关于javascript:JavaScript-ES2021-最值得期待的-5-个新特性解析

在写本文时，本文提到的新的 JavaScript 提案性能已进入第 4 阶段，并且简直必定会蕴含在 ES2021 中。你曾经能够开始在最新版本的浏览器，Node.js 和 Babel 中应用。

留神：ECMAScript 是 JavaScript 所基于的规范，由 TC39 委员会治理。ECMAScript 始终是一个不须要的名称，这会使所有都对初学者感到困惑。人们常常议论 JavaScript 性能，但参考的是 ECMAScript 标准。

更新个性

数字分隔符（_）
逻辑调配（&&=，||=，??=）
援用有余（WeakRef和FinalizationRegistry）
Promise.any
String.prototype.replaceAll

大数字文字很难使人眼疾速解析，尤其是当有很多反复的数字时：

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 格调的文字代替。

自从 ES2015 中引入 Promise 以来，JavaScript 齐全反对两种 Promise 组合器：静态方法 Promise.all 和 Promise.race。

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

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

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();

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!');

此性能蕴含两个高级对象 WeakRef 和 FinalizationRegistry。依据应用状况，这些接口能够独自应用，也能够一起应用。正确应用它们须要认真思考，如果可能，最好防止应用它们。

一般来说，在 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

以后，如果不应用全局正则表达式，就无奈替换字符串中子字符串的所有实例。与字符串参数一起应用时，String.prototype.replace 仅影响首次呈现。

String.prototype.replaceAll() 将为开发人员提供一种简略的办法来实现此常见的基本操作。

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

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

// 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

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

仅当 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)

作为开发人员，跟紧语言的新个性是很重要的。

以上将在 2021 年公布的一些新性能，它们是进入第 4 阶段的提案，简直能够必定会包含在内，这些性能曾经在最新的浏览器和 babel 中实现。

欢送关注公众号：“全栈修炼 ”，回复“ 电子书”即能够取得 160 本前端精髓书籍哦。

参考文章：JavaScript Features in 2021

往期精文

Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 我的项目配置最佳实际
TypeScript 中晋升幸福感的 10 个高级技巧
举荐 7 个 Vue2、Vue3 源码解密剖析的重磅开源我的项目

通过浏览本篇文章，如果有播种的话，能够 点个赞 和在看，这将会成为我继续分享的能源，感激～

关于javascript:JavaScript-ES2021-最值得期待的-5-个新特性解析

1. 数值分隔符

2. Promise combinators

2.1 Promise.allSettled

2.2 Promise.any

3. Weak references and finalizers

4. String.prototype.replaceAll

5. Logical assignment (逻辑调配)

5.1 具体例子

概括

Just My Socks（注册教程内含优惠码）

关于javascript:JavaScript-ES2021-最值得期待的-5-个新特性解析

1. 数值分隔符

2. Promise combinators

2.1 Promise.allSettled

2.2 Promise.any

3. Weak references and finalizers

4. String.prototype.replaceAll

5. Logical assignment (逻辑调配)

5.1 具体例子

概括

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）