翻译:疯狂的技术宅
原文: https://www.strictmode.io/art...
未经允许严禁转载
ECMAScript 2020 是我们最喜欢的编程语言的第 11 版,其中包含一些新功能。有些是小特性,但有些将会有可能永远改变我们编写 JavaScript 的方式。
Dynamic import()
ES2015 引入了 static import
语法。现在你可以从一个模块导出变量,然后将其导入另一个模块。
// utils.js
export function splitName(name) {
return name.split(" ");
}
// index.js
import { splitName } from "./utils";
console.log(splitName("John Snow"));
这种语法被称为静态语法,因为你无法在运行时动态导入模块(取决于某些条件)。请注意,这不一定是坏事:可以在编译时优化静态导入,并允许 Tree Shaking。
另一方面,如果合理地使用了动态导入,则可以通过按需加载依赖项来帮助减少分发包的大小。
新的 dynamic import
语法看起来像一个函数(但不是),它返回 promise,这也意味着可以将其与 async/await一起使用。
// ...
const mod = figure.kind === "rectangle" ? "rectangle.js" : "circle.js";
const { calcSquare } = await import(mod);
console.log(calcSquare(figure));
空值合并
流行的用 short-circuting 设置默认值的方法有其缺陷。由于它实际上不是在检查空值,而是在检查是否为假,因此它会以诸如 false
或 0
(两者均被视为假)。
ES2020引入了一个新的运算符 ??
,该运算符的工作原理与其类似,但仅在初始值为 null
或 undefined
时才赋值为右手。
这是一个简单的例子:
const initialVal = 0;
// old way
const myVar = initialVal || 10; // => 10
// new way
const myVar = initialVal ?? 10; // => 0
可选链
新的 optional chaining
运算符用来在处理嵌套对象并检查可能的 undefineds
时使代码更短。
const user = { name: "John" };
// Fails with `Uncaught TypeError: Cannot read property 'city' of undefined`
const city = user.address.city;
// Works but verbose
let city = "Not Set";
if (user.address !== undefined && user.address !== null) {
city = user.address.city;
}
// Works and concise but requires a 3rd party library
const city = _.get(user, "address.city", "Not Set");
//
const city = user?.address?.city ?? "Not Set";
BigInt
BigInt 是一个新对象,代表的数字大于Number.MAX_SAFE_INTEGER
(即2 ^ 53-1)。对于普通人来说,这听起来可能绰绰有余,但对于某些数学应用程序和机器学习而言,新的 BigInt 类型就能够派上用场了。
它带有自己的字面量表示法(只需在数字末尾添加 n
):
const x = 9007199254740991n;
// or it can be constructed from a string
const y = BigInt("9007199254740991234");
BigInts
带有自己的代数方法,它不能转换为常规数字,因此我们不能把 number 与 BigInt 混淆。应该先将它们强制转换为任一类型。
1 === 1n; // => false
1n + 1; // throws Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
6n << 3; // nope
6n << 3n; // that works
String.matchAll
所以这是一个例子。想象一下,你有一个很长的文本字符串,并且需要从中提取所有标签(即以 #
开头的单词)。用正则表达式可以解决!
const tweet = "#JavaScript is full of #surprises. Both good and bad ones #TIL";
for (h of tweet.matchAll(/(#\w+)/g)) {
console.log(h[0]);
}
// or
const tags = [...tweet.matchAll(/(#\w+)/g)]
matchAll
返回一个迭代器。我们可以用 for..of
对其进行迭代,也可以将其转换为数组。
Promise.allSettled
还记得 Promise.all 函数吗?它仅在所有的 Promise 均得到解决时才会被解决。假如其中有一项 Promise 被拒绝,此时可能还有其他 promise 没完成。
新的 allSettled
的行为有所不同。只有当所有的 promise 全部都完成时(即成功或被拒绝),它才会被解决。它被分解为一个数组,其中包含 promise 的状态及其所解决的内容(或错误)。
因此, allSettled
永远不会被拒绝。它要么是 pending
,要么是 resolved
。
一个现实中的问题是删除加载指示器:
// const urls = [...]
try {
await Promise.all(urls.map(fetch))
} catch (e) {
// at least one fetch is rejected here, but there may others still pending
// so it may be too early for removing the loading indicator
removeLoading()
}
// with allSettled
await Promise.allSettled(urls.map(fetch))
removeLoading()
globalThis
在 JavaScript 中,总是有一个包含所有内容的大型上下文对象。传统上,在浏览器中是 window
。但是,如果尝试在 Node 程序中访问它,则会收到错误消息。 Node 中没有 window
全局对象;而是有一个 window
对象。另外在 WebWorker 中,没有访问 window
的权限,但是有 self
的权限。
新的 globalThis
属性可以消除差异。这意味着你可以自始至终去引用 globalThis
,而无需关心你现在所处的上下文是什么。
如果你认为这命名有点尴尬,那么我完全同意你的看法,但是请注意,将其命名为 self
或 global
可能会使某些旧代码不兼容。所以我想我们必须忍受这一点。
有用的链接
为了方便你的学习,这里是本文提到的每个功能的 MDN 文档的链接。
本文首发微信公众号:前端先锋
欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章
欢迎继续阅读本专栏其它高赞文章:
- 深入理解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个方案及实现