JavaScript ES2021 最值得期待的 5 个新特性解析

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 在写本文时,本文提到的新的 JavaScript 提案功能已进入第 4 阶段,并且几乎肯定会包含在 ES2021 中。你已经可以开始在 最新版本的浏览器,Node.js 和 Babel 中使用。

在写本文时,本文提到的新的 JavaScript 提案功能已进入第 4 阶段,并且几乎肯定会包含在 ES2021 中。你已经可以开始在 最新版本的浏览器,Node.js 和 Babel 中使用


注意:ECMAScript 是 JavaScript 所基于的标准,由 TC39 委员会管理。ECMAScript 始终是一个不需要的名称,这会使一切都对初学者感到困惑。人们经常谈论 JavaScript 功能,但参考的是 ECMAScript 规范。


更新特性



1. 数值分隔符


大数字文字很难使人眼快速解析,尤其是当有很多重复的数字时:


1000000000000   1019436871.42


为了提高可读性,新的 JavaScript 语言功能 启用了下划线作为数字文字中的分隔符。因此,上面的内容现在可以重写为每千位数字,例如:


1_000_000_000_000    1_019_436_871.42


现在,更容易说出第一个数字是 1 万亿,而第二个数字大约是 10 亿。

数字分隔符有助于提高各种数字文字的可读性:


// A decimal integer literal with its digits grouped per thousand:
1_000_000_000_000
// A decimal literal with its digits grouped per thousand:
1_000_000.220_720
// A binary integer literal with its bits grouped per octet:
0b01010110_00111000
// A binary integer literal with its bits grouped per nibble:
0b0101_0110_0011_1000
// A hexadecimal integer literal with its digits grouped by byte:
0x40_76_38_6A_73
// A BigInt literal with its digits grouped per thousand:
4_642_473_943_484_686_707n


它们甚至适用于八进制整数文字(尽管 我想不出 其中分隔符为此类文字提供值 的示例):


// A numeric separator in an octal integer literal: 🤷♀️
0o123_456


请注意,JavaScript 还具有不带显式 0o 前缀的八进制文字的旧式语法。例如,017 === 0o17。在严格模式下或模块内不支持此语法,并且在现代代码中不应使用此语法。因此,这些文字不支持数字分隔符。使用 0o17 风格的文字代替。


2. Promise combinators


自从 ES2015 中引入 Promise 以来,JavaScript 完全支持两种 Promise 组合器:静态方法 Promise.all 和 Promise.race。


目前有两个新提案正在通过标准化流程:Promise.allSettled 和 Promise.any。有了这些添加,JavaScript 中将总共有四个诺言组合器,每个组合器支持不同的用例。


以下是这四个组合器的概述:


微信图片_20220512135518.png


2.1 Promise.allSettled


Promise.allSettled 给你当所有输入的诺言是一种信号结算,这意味着他们要么履行或拒绝。如果您不在乎承诺的状态,而只是想知道工作何时完成,无论它是否成功,这都是很有用的。


例如,您可以启动一系列独立的 API 调用,并使用 Promise.allSettled 它们来确保它们已全部完成,然后再执行其他操作,例如删除加载微调器:


const promises = [
  fetch('/api-call-1'),
  fetch('/api-call-2'),
  fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.
await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).
removeLoadingIndicator();


2.2 Promise.any


Promise.any 方法和 Promise.race 类似——只要给定的迭代中的一个 promise 成功,就采用第一个 promise 的值作为它的返回值,但与 Promise.race 的不同之处在于——它会等到所有 promise 都失败之后,才返回失败的值:


const promises = [
  fetch('/endpoint-a').then(() => 'a'),
  fetch('/endpoint-b').then(() => 'b'),
  fetch('/endpoint-c').then(() => 'c'),
];
try {
  const first = await Promise.any(promises);
  // Any of the promises was fulfilled.
  console.log(first);
  // → e.g. 'b'
} catch (error) {
  // All of the promises were rejected.
  console.assert(error instanceof AggregateError);
  // Log the rejection values:
  console.log(error.errors);
  // → [
  //     <TypeError: Failed to fetch /endpoint-a>,
  //     <TypeError: Failed to fetch /endpoint-b>,
  //     <TypeError: Failed to fetch /endpoint-c>
  //   ]
}


此代码示例检查哪个端点响应最快,然后将其记录下来。只有当 所有 请求都失败时,我们才最终进入代码 catch 块,然后在其中处理错误。


Promise.any 拒绝可以一次代表多个错误。 为了在语言级别支持此功能,引入了一种新的错误类型,称为 AggregateError。 除了上面示例中的基本用法外,还可以以编程方式构造 AggregateError 对象,就像其他错误类型一样:


const aggregateError = new AggregateError([errorA, errorB, errorC], 'Stuff went wrong!');


3. Weak references and finalizers


此功能包含两个高级对象 WeakRefFinalizationRegistry。根据使用情况,这些接口可以单独使用,也可以一起使用。正确使用它们需要仔细考虑,如果可能,最好避免使用它们。


一般来说,在JavaScript中,对象的引用是强保留的,这意味着只要持有对象的引用,它就不会被垃圾回收。


const ref = { x: 42, y: 51 };
// 只要我们访问 ref 对象(或者任何其他引用指向该对象),这个对象就不会被垃圾回收


目前在 Javascript 中,WeakMap 和 WeakSet 是弱引用对象的唯一方法:将对象作为键添加到 WeakMap 或 WeakSet 中,是不会阻止它被垃圾回收的。


JavaScript 的 WeakMap 并不是真正意义上的弱引用:实际上,只要键仍然存活,它就强引用其内容。WeakMap 仅在键被垃圾回收之后,才弱引用它的内容。


WeakRef 是一个更高级的 API,它提供了真正的弱引用,Weakref 实例具有一个方法 deref,该方法返回被引用的原始对象,如果原始对象已被收集,则返回 undefined 对象。


JavaScript 中对象的引用是强引用,WeakMap 和 WeakSet 可以提供部分的弱引用功能,若想在 JavaScript 中实现真正的弱引用,可以通过配合使用 WeakRef 和终结器(Finalizer)来实现。


WeakRef 是用来指目标对象不脱离垃圾收集保留它的对象。如果未通过垃圾回收回收目标对象,则 WeakRefs 可以取消引用以允许访问目标对象。


// Create a WeakRef object referring to a given target object
const ref = new WeakRef(targetObject)
// Return the WeakRef instance's target object, or undefined if the target object has been garbage-collected
const obj = ref.deref()


使用 FinalizationRegistry 对象可以在垃圾回收对象时请求回调。


// Create a registry object that uses the given callback
const registry = new FinalizationRegistry([callback])
// Register an object with a registry instance so that if the object is garbage-collected, the registry's callback may get called
registry.register(target, heldValue, [unregisterToken])
// Unregister a target object from a registry instance
registry.unregister(unregisterToken)

更多信息:TC39提案V8


4. String.prototype.replaceAll


当前,如果不使用全局正则表达式,就无法替换字符串中子字符串的所有实例。与字符串参数一起使用时,String.prototype.replace 仅影响首次出现。


String.prototype.replaceAll() 将为开发人员提供一种简单的方法来完成此常见的基本操作。


'aabbcc'.replaceAll('b', '.') // 'aa..cc'
'aabbcc'.replaceAll(/b/g, '.') // 'aa..cc'


5. Logical assignment (逻辑分配)


支持与新的运营逻辑分配 &&=||=??=。与它们的 数学和按位对应物不同,逻辑分配遵循其各自逻辑操作的短路行为。仅当逻辑运算将评估右侧时,它们才执行分配。


// falsy: false, 0, -0, 0n, "", null, undefined, and NaN
// truthy: all values are truthy unless defined as falsy
// nullish: null or undefined
a ||= b
// Logical OR assignment
// Equivalent to: a || (a = b);
// Only assigns if a is falsy
a &&= b
// Logical AND assignment
// Equivalent to: a && (a = b);
// Only assigns if a is truthy
a ??= b
// Logical nullish assignment
// Equivalent to: a ?? (a = b);
// Only assigns if a is nullish


5.1 具体例子


带有 && 运算符的逻辑赋值运算符


仅当 LHS 值为真时,才将 RHS 变量值赋给 LHS 变量。


// Logical Assignment Operator with && operator
let num1 = 5
let num2 = 10
num1 &&= num2
console.log(num1) // 10
// Line 5 can also be written as following ways
// 1. num1 && (num1 = num2)
// 2. if (num1) num1 = num2


带有 || 的运算符逻辑赋值运算符


仅当 LHS 值为假时,才将 RHS 变量值赋给 LHS 变量。


// Logical Assignment Operator with || operator
let num1
let num2 = 10
num1 ||= num2
console.log(num1) // 10
// Line 5 can also be written as following ways
// 1. num1 || (num1 = num2)
// 2. if (!num1) num1 = num2


带有 ?? 运算符的逻辑赋值运算符


ES2020 引入了空值合并运算符,其也可以与赋值运算符结合使用。

仅当 LHS 为 undefined 或仅为 null 时,才将 RHS 变量值赋给 LHS 变量。


// Logical Assignment Operator with ?? operator
let num1
let num2 = 10
num1 ??= num2
console.log(num1) // 10
num1 = false
num1 ??= num2
console.log(num1) // false
// Line 5 can also be written as following ways
// num1 ?? (num1 = num2)
相关文章
|
4天前
|
JavaScript
js 解析 byte数组 成字符串
js 解析 byte数组 成字符串
|
11天前
|
安全 Android开发 iOS开发
安卓与iOS的较量:技术特性与用户体验的深度解析
在移动操作系统的战场上,安卓和iOS一直占据着主导地位。本文将深入探讨这两大平台的核心技术特性,以及它们如何影响用户的体验。我们将从系统架构、应用生态、安全性能和创新功能四个方面进行比较,帮助读者更好地理解这两个系统的异同。
41 3
|
2天前
|
PHP
PHP 7新特性深度解析与实践
【9月更文挑战第13天】本文将深入探讨PHP 7的新特性,包括性能提升、语法改进、错误处理等方面。我们将通过实例代码来展示这些新特性的使用方法和优势,帮助您更好地理解和应用PHP 7。
|
6天前
|
编译器 PHP 开发者
PHP 7新特性深度解析
在这篇文章中,我们将深入探讨PHP 7带来的一系列新特性,包括性能提升、语法改进等方面。通过对比分析,我们将揭示这些变化如何影响开发者的编码实践和应用程序的性能优化。
|
7天前
|
编译器 PHP 开发者
PHP 8新特性解析与应用实践
PHP 8作为PHP语言的最新版本,带来了许多令人兴奋的新特性和性能改进。本文将深入探讨PHP 8中的JIT编译器、联合类型、匹配表达式等关键更新,并通过实例演示如何在项目中有效利用这些新工具,帮助开发者提升代码质量和执行效率。
|
14天前
|
JavaScript 前端开发 API
Javaweb之javascript的BOM对象的详细解析
BOM为Web开发提供了强大的API,允许开发者与浏览器进行深入的交互。合理使用BOM中的对象和方法,可以极大地增强Web应用的功能性和用户体验。需要注意的是,BOM的某些特征可能会在不同浏览器中表现不一致,因此在开发过程中需要进行仔细的测试和兼容性处理。通过掌握BOM,开发者能够制作出更丰富、更动态、更交互性的JavaWeb应用。
12 1
|
13天前
|
自然语言处理 前端开发 JavaScript
Javaweb之javascript的详细解析
通过明确JavaScript的定位,掌握其核心概念和相关技术栈,在实现交互丰富的Web应用时,JavaScript就能够发挥它不可替代的作用。随着前后端分离趋势的推进,JavaScript在现代 Web 开发中变得更加重要,不仅限于传统的 JavaWeb 应用,而是广泛应用于各种类型的前端项目。
10 0
|
16天前
|
开发者 图形学 C#
深度解密:Unity游戏开发中的动画艺术——Mecanim状态机如何让游戏角色栩栩如生:从基础设置到高级状态切换的全面指南,助你打造流畅自然的游戏动画体验
【8月更文挑战第31天】Unity动画系统是游戏开发的关键部分,尤其适用于复杂角色动画。本文通过具体案例讲解Mecanim动画状态机的使用方法及原理。我们创建一个游戏角色并设计行走、奔跑和攻击动画,详细介绍动画状态机设置及脚本控制。首先导入动画资源并添加Animator组件,然后创建Animator Controller并设置状态间的转换条件。通过编写C#脚本(如PlayerMovement)控制动画状态切换,实现基于玩家输入的动画过渡。此方法不仅适用于游戏角色,还可用于任何需动态动画响应的对象,增强游戏的真实感与互动性。
40 0
|
16天前
|
JavaScript 前端开发
|
Web App开发 JavaScript 前端开发
7 个令人兴奋的 JavaScript 新特性
一个ECMAScript标准的制作过程,包含了Stage 0到Stage 4五个阶段,每个阶段提交至下一阶段都需要TC39审批通过。本文介绍这些新特性处于Stage 3或者Stage 4阶段,这意味着应该很快在浏览器和其他引擎中支持这些特性。
1215 0
7 个令人兴奋的 JavaScript 新特性

热门文章

最新文章

推荐镜像

更多