ES 2020 新功能

Posted 2020-12-18 xguoz

ES 2020 新功能

虽然现在浏览器的支持情况还不友好，但是先记下来总是不亏的。

1、可选的链接操作。
假设后端返回的数据是一个层级比较深的 json 数据。如果想要使用里面的项而不报错，就需要每一层先判断再使用。

let res = {
  user: {
    name: ‘tom‘
  }
}

console.log(res.user.name) // 正常使用方法
// 假设想使用 student 的age
console.log(res.student && res.student.age)

// 新写法
console.log(res.student?.age)
// 多层级的可以直接一直这样写下去，减少判断代码
console.log(res?.student?.class?.sex?.man?.age)
// 也可以用在函数上
getUserInfo?.().data?.user?.name

2、空值合并运算
当我们使用某个值的时候，需要考虑边界值问题，比如：null、undefined、‘‘ 等。我们需要给这些值设置默认值。
但是也有一些情况，并不是如我们所愿，例如：

let user = {
  name: "tom",
  isMan: false,
  age: 0
};

console.log(user.name || ‘jerry‘); // tom 正确
console.log(user.isMan || ‘women‘); // women 错误
console.log(user.age || ‘22‘); // 22 错误
console.log(user.job || ‘程序猿‘); // 程序猿 正确

// 如上情况，就会在程序中引起一些问题。
// 而空值合并则避免了这个情况。使用 ?? 操作符来代替 || ，使其类型更严格一些，这只允许在值为null或未定义时使用默认值。
let user = {
  name: "tom",
  isMan: false,
  age: 0
};

console.log(user.name ?? ‘jerry‘);
console.log(user.isMan ?? ‘women‘);
console.log(user.age ?? ‘22‘);
console.log(user.job ?? ‘程序猿‘);

3、Promise.allSettled 并发执行多个异步操作，无论其中的失败还是成功最后返回一个执行结果的数组，不会因为某一个失败而阻塞。

const promise1 = new Promise((resolve) => setTimeout(resolve, 200, ‘ok‘));
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, ‘bad‘));
const promises = [promise1, promise2];

Promise.allSettled(promises)
  .then(results => console.log(results) );

// output:
// [{status: "fulfilled", value: "ok"}
// {status: "rejected", reason: "bad"}]

4、BigInt javascript能处理的最大数字可通过 Number.MAX_SAFE_INTEGER 查看，一旦超过，就会出现精度问题。

let bigNum1 = 111111111111111111111n
let bigNum2 = BigInt(222222222222222222)

BigInt 数值只能和同类型的运算。bigNum1 + 2n(不能直接使用普通数值)

5、动态引入模块。
可以再需要的时候引入，从而避免资源浪费。

6、类的私有方法和属性。通过前面加一个 # 即可。

class Counter extends htmlElement {
  #xValue = 0;

  get #x() { return #xValue; }
  set #x(value) {
    this.#xValue = value;
    window.requestAnimationFrame(this.#render.bind(this));
  }

  #clicked() {
    this.#x++;
  }

  constructor() {
    super();
    this.onclick = this.#clicked.bind(this);
  }

  connectedCallback() { this.#render(); }

  #render() {
    this.textContent = this.#x.toString();
  }
}

GitHub地址