乐趣区

关于javascript:盘点-ES2020-的新功能

jiezi

Ecma International 负责对 JavaScript 标准化。是他们制订了 ECMAScript 标准。当提到 ECMAScript 时，基本上能够把它看作是 JavaScript 的同义词。从 2015 年开始，开始用年份标记版本，即 ECMAScript 2015 缩写为 ES2015。然而也会应用版本号的计数，所以 ES6 与 ES2015 雷同。尚未公布的性能被称为 ESNext。

ECMAScript 2020/ES2020/ES11 于 6 月公布，并且曾经在古代浏览器中实现。让咱们看看这会带来什么益处。

太长不看版

如果你不想看细节，那么只看这张图就够了。

空值合并

如果你在赋值时想要一个默认值（如果它为 null 或 undefined），则能够应用 ??。

const name = person.fullName ?? 'anonymous';

如果对象 person 没有 fullName 值，则 name 将被赋值为“anonymous”。如果 person 的 fullName 有值，则把该值赋值给变量 name。

你可能认为用 || 就能做到。但这简直是简直雷同的，如果 || 后面的值是虚值，那么这个表达式将不会短路，并且会应用前面的值。然而请记住，空字符串 ''，0，NaN 和 false 都是虚值，在这些状况下将应用默认值，如果咱们要用这些进行赋值的话，就行不通了。?? 则只查看 null 和 undefined。

const user = {preferredSound: 0}
let sound = user.preferredSound ?? 50 // value is 0
let soundWrong = user.preferredSound || 50 // value is 50

仅当 preferredSound 为 undefined 或者 null 时才应用 50 这个值。

可选链

如果要应用多级嵌套在对象中的属性，在以前必须要查看它们是否为 null 或 undefined，以防止代码解体。当初能够在拜访这些属性之前应用 ?.，这样就能够只有在值不为 null 或 undefined 时应用 ?. 前面的代码。

例如：

const house = {owner: { name: 'Jim', pet: null}};// Old JavaScript
if(house && house.owner && house.owner.pet && house.owner.pet.type === 'dog'){console.log('owner has a dog');
}// ES2020
if (house?.owner?.pet?.type === 'dog') {console.log('owner has a dog');
}

Promise.allSettled

如果要执行更多的异步申请，能够应用 Promise.all 来收集它们。然而如果其中任何一个申请失败的话，将会引发异样。如果咱们心愿每个申请都可能实现，无论其申请是否失败，那该怎么办。这时能够用 Promise.allSettled，当所有申请都被解决或回绝时，它将返回。

const promises = [Promise.resolve(1), Promise.reject(2)];
const [result1, result2] = await Promise.allSettled(promises);

即便其余 promise 被回绝了，咱们依然能够在这里应用 result1 的值。

matchAll

如果要用正则表达式查找所有的匹配项，能够用 match 来失去所有子字符串。然而，如果你既须要子字符串又须要索引，该怎么办？这时能够用 matchAll 并进行反复匹配。

例如找到一个字符串中的所有数字：

const matches = 'Here are some numbers: 5 12 88'.matchAll(/\d+/g);
for (const match of matches) {console.log(match);
}// 输入:
// ["5", index: 22, input: "Here are some numbers: 5 12 88", groups: undefined]
// ["12", index: 24, input: "Here are some numbers: 5 12 88", groups: undefined]
// ["88", index: 27, input: "Here are some numbers: 5 12 88", groups: undefined]

BigInt

BigInt 是 JavaScript 中新的原始数据类型，与 Boolean、Number、String、Symbol 和 undefined 的位置雷同。BigInt 能够平安的解决大于 Number 限度的整数数字。也就是说如果要解决大于 9007199254740991 的数字时应该用 BigInt。BigInt 在数字开端用 n 示意。

9_007_199_254_740_991 + 2; // 9007199254740992
BigInt(9_007_199_254_740_991) + BigInt(2) // 9007199254740993n

动静导入

以前只能在文件结尾动态导入模块。当初有了动静导入，能够按需在代码中的任何地位进行这种操作。import() 会与模块一起返回一个 Promise。

const module = await import('module');

模块命名空间导出

在大多数状况下，咱们可能通过导入导出 JavaScript 模块来重命名模块的名称，就像这样：

import * as values from 'module';
import {value as v} from 'module';export {v as value};

然而没有方法间接从名称被更改的另一个模块中从新导出某些内容。当初有了 ES2020，则能够这样做：

export * as someUtils from 'utils';

globalThis

如果你的代码须要在多个环境（例如浏览器和 Node 服务器）下运行，那么它们所应用全局对象名称并不统一。在浏览器中用的是 window，Node 则用的是 global，而 web worker 用的是 self。当初，无论代码在哪种环境中运行，globalThis 都可能为你提供正确的全局对象。

上面是一个例子，咱们须要查看是否能够向用户提醒 alert。如果代码在浏览器中运行，则 globalThis 将会援用 window，并且 alert 也能够应用。

if (typeof globalThis.alert === 'function'){globalThis.alert('hi');
}

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

  • 深刻了解 Shadow DOM v1
  • 一步步教你用 WebVR 实现虚拟现实游戏
  • 13 个帮你进步开发效率的古代 CSS 框架
  • 疾速上手 BootstrapVue
  • JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
  • WebSocket 实战：在 Node 和 React 之间进行实时通信
  • 对于 Git 的 20 个面试题
  • 深刻解析 Node.js 的 console.log
  • Node.js 到底是什么？
  • 30 分钟用 Node.js 构建一个 API 服务器
  • Javascript 的对象拷贝
  • 程序员 30 岁前月薪达不到 30K，该何去何从
  • 14 个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩大插件
  • Node.js 多线程齐全指南
  • 把 HTML 转成 PDF 的 4 个计划及实现
  • 更多文章 …
退出移动版