ES2020新增功能

双问号操作符

由于JavaScript是动态类型的，因此在分配变量时，我们需要牢记JavaScript对真值/假值的处理。 很多时候数字0和空字符串''就是我们需要的值，我们来看一下下面这个对象

双管道 ||

let player = {
  profile: {
    number: 0,
    name: undefined,
    other: ''
  }
};

console.log(player.profile.number || "未知"); // 未知
console.log(player.profile.name || "未知"); // 未知

双问号 ??

let player = {
  profile: {
    number: 0,
    name: undefined,
    other: ''
  }
};

console.log(player.profile.number ?? "未知"); // 0
console.log(player.profile.name ?? "未知"); // 未知

很多情况下前端从后端获取的数据中，并不确定某个属性存不存在，所以会做个判断，如果不存在就给个默认值避免报错。

但是数字0和空字符串''通常会被“误伤”，比如nba球星威少、乐福、库兹马都是零号。

所以双问号可以更准确得去处理 null 和 undefined

 

可选操作符

在点号之前加一个问号

我太喜欢这个可选操作符了，和双问号异曲同工，配合使用安全加倍。
相信前端遇到过很多次这种错误：
Cannot read property 'xxx' of undefined
有木有？？？！！！
有时候是粗心，有时候是拼错属性名，有时候就是后端数据返回有问题。
直接上代码：

很多时候会这样处理，看上去没什么问题

// 假设从后端返回的是一个空对象
let player = {};
console.log(player.profile.number || "未知")

// Uncaught TypeError: Cannot read property 'number' of undefined

可选操作符，操作一下

let player = {};

console.log(player.profile.number ?? "23"); // player.profile is undefined`

console.log(player.profile?.number ?? "23"); //23

 

动态导入

假设你有一个utils工具文件，则其中某些功能可能很少使用，而导入其所有依赖项会很浪费资源。现在，我们可以使用 async / await在需要时动态导入依赖项。

const add = (num1, num2) => num1 + num2;

export { add };

const doMath = async (num1, num2) => {
  if (num1 && num2) {
    const math = await import('./math.js');
    console.log(math.add(5, 10));
  };
};

doMath(4, 2);

我在现实项目中就遇到过，比如回帖编辑器，很多人只是看一下别人的回复乐呵乐呵，用户不点击回帖，就没必要去加载整个editor.js

const replyBtn = document.querySelector('#replyBtn')
replyBtn.addEventListener('click', e => {
    e.preventDefault()
    (async () => {
        const Editor = await import('./editor.js')
        let editor = new Editor()
    })();
})

// 也可以
replyBtn.addEventListener('click', e => {
    e.preventDefault()
    import('/modules/editor.js')
      .then(Editor => {
        let editor = new Editor()
      })
      .catch(err => {
        console.log(err)
      });
})

 

class的私有属性

类的主要目的之一是将我们的代码包含在可重用的模块中。 我们可能会在很多地方用到这个类，有些属性并不希望被类的外部访问。

现在，通过在变量或函数前面添加一个简单的哈希符号，我们可以将它们完全保留给类内部使用。

class People {
  #message = "湖人总冠军"
  bb() { 
    console.log(this.#message) 
  }
}

const p = new People()

p.bb() // 湖人总冠军
console.log(p.#message) // Private name #message is not defined

广州设计公司https://www.houdianzi.com 我的007办公资源网站https://www.wode007.com

Promise.allSettled

当我们处理多个Promise时，尤其是当它们相互依赖时，通过Promise.allSettled 可以很好的记录调试或者获取每个promise的状态结果，它会返回一个新的Promise，仅当传递给它的所有Promise都完成时（settled 顾名思义可以理解成定居、稳定）才返回。 这将使我们能够访问一个数组，其中包含每个promise的一些数据。

相比于Promise.all ，如果传入的promise中有一个失败（rejected），Promise.all 异步地将失败rejected的那个结果给失败状态的回调函数，而不管其它promise是否完成。

Promise.allSettled 会等所有传入的promise的状态变为 fulfilled 或者 rejected

 

const p1 = new Promise((res, rej) => setTimeout(res, 1000, 24));

const p2 = new Promise((res, rej) => setTimeout(rej, 1000));

Promise.allSettled([p1, p2]).then(data => console.log(data));

// [
//   Object { status: "fulfilled", value: 24},
//   Object { status: "rejected", reason: undefined}
// ]