专栏首页京程一灯ECMAScript 2020 新增功能速成

ECMAScript 2020 新增功能速成

每日前端夜话第317篇

翻译:疯狂的技术宅

作者:佚名

来源:strictmode

正文共:2025 字

预计阅读时间:7 分钟

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 设置默认值的方法有其缺陷。由于它实际上不是在检查空值,而是在检查是否为“假”(https://developer.mozilla.org/zh-cn/docs/Glossary/Falsy),因此它会以诸如 false0(两者均被视为假)。

ES2020引入了一个新的运算符 ??,该运算符的工作原理与其类似,但仅在初始值为 nullundefined 时才赋值为右手。

这是一个简单的例子:

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,而无需关心你现在所处的上下文是什么。

如果你认为这命名有点尴尬,那么我完全同意你的看法,但是请注意,将其命名为 selfglobal 可能会使某些旧代码不兼容。所以我想我们必须忍受这一点。

有用的链接

为了方便你的学习,这里是本文提到的每个功能的 MDN 文档的链接。

  • Dynamic imports:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
  • Nullish 合并运算符:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
  • 可选链:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
  • BigInt:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt
  • Promise.allSettled:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled
  • globalThis:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis

原文链接

https://www.strictmode.io/articles/whats-new-es2020/

本文分享自微信公众号 - 前端先锋(jingchengyideng),作者:疯狂的技术宅

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS中Object.freeze()与Const之间的区别[每日前端夜话0x6A]

    ES6 自发布以来为 JavaScript 带来了一些新功能和方法。与 JavaScript 相比,这些功能更好地改善了我们的工作流程。这些新功能包括 Obje...

    疯狂的技术宅
  • JavaScript引擎是如何工作的?从调用栈到Promise你需要知道的一切[每日前端夜话0x6B]

    JavaScript Engines: How Do They Even Work?

    疯狂的技术宅
  • WebSockets实战:在 Node 和 React 之间进行实时通信[每日前端夜话0x6C]

    Web 为了支持客户端和服务器之间的全双工(或双向)通信已经走过了很长的路。这是 WebSocket 协议的主要目的:通过单个 TCP 套接字连接在客户端和服务...

    疯狂的技术宅
  • 简化NLP:TensorFlow中tf.strings的使用

    TensorFlow中很早就包含了tf.strings这个模块,不过实话说,在tf 1.x的固定计算图的情况下,各种操作颇为复杂,我们在迎来了2.0中才更好可以...

    段清华DEAN
  • R语言︱文本挖掘之中文分词包——Rwordseg包(原理、功能、详解)

    笔者寄语:与前面的RsowballC分词不同的地方在于这是一个中文的分词包,简单易懂,分词是一个非常重要的步骤,可以通过一些字典,进行特定分词。大致分析步骤如下...

    素质
  • 分分钟钟学会Python - 解释器安装

    py3study
  • R语言实现︱局部敏感哈希算法(LSH)解决文本机械相似性的问题(二,textreuse介绍)

    上一篇(R语言实现︱局部敏感哈希算法(LSH)解决文本机械相似性的问题(一,基本原理))讲解了LSH的基本原理,笔者在想这么牛气冲天的方法在R语...

    素质
  • python pymyssql模块安装

    #./configure --prefix=/usr/local/freetds --with-tdsver=8.0 --enable-msdblib  --...

    py3study
  • 为什么数据中台如此重要?明略科技吴信东:智能时代企业核心竞争力之源 | MEET2020

    数字化转型无疑成了当下一个不可阻挡的大浪潮。而在今年,中台这两个字随着阿里巴巴、腾讯、华为等巨头的战略部署,一下子火了起来。

    量子位
  • TwentyEleven暗色系主题实现透明

    1.找到 /wp-content/themes/twentyeleven/colors/dark.css

    ApacheCN_飞龙

扫码关注云+社区

领取腾讯云代金券