1. 90前端首页
  2. 前端开发
  3. JavaScript

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球星威少、乐福、库兹马都是零号。

所以双问号可以更准确得去处理 nullundefined

可选操作符

在点号之前加一个问号

我太喜欢这个可选操作符了,和双问号异曲同工,配合使用安全加倍。
相信前端遇到过很多次这种错误:
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

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}
// ]

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000022048819

展开阅读全文

发表评论

登录后才能评论