了解新的ES2021 ECMAScript特性

对于那些不知道的人来说， TC39 是ECMAScript（JavaScript）规范的标准化背后的组织。自2015年ES6发布以来，它已成为每年发布新功能的规范。

对于要添加到年度释放的功能，它必须通过四个提议阶段，最后阶段是批准。让我们来看看目前在最终阶段中的五个特征建议，其中一些是预期在2021年中期的发布。

逻辑分配运算符

新的逻辑分配运算符 &&=，||=和??=与现有逻辑运算符非常类似，并且非常有用，可以将默认值分配给变量。

逻辑或分配运算符（`||=`）

x ||= y

逻辑或分配运算符是短路操作，就像逻辑或运算符（||）。上面的表达式与x || (x = y)相同，这意味着y只会被分配到x如果x是 falsy 。否则，x保留其原始值。

示例：

const giveKey = () => {
  //perform randon computations
  return "somekey";
}
let userDetails = {name:"chika", age:5, room:10, key:""}
userDetails.key ||= giveKey()
console.log(userDetails.key)

//output : somekey

const giveKey = () => {
  //perform randon computations
  return "somekey";
}
let userDetails = {name:"chika", age:5, room:10, key:""}
if (!userDetails.key) {
    userDetails.key = giveKey()
}
// userDetails.key ||= giveKey()
console.log(userDetails.key)

//output : somekey

常用的写法

console.log(userDetails.key)返回"somekey"，因为原始键值是空字符串，这是一个fasle值。

逻辑并赋值运算符（`&&=`）

x &&= y

逻辑并分配运算符与逻辑或分配运算符相反。在这种情况下，y仅分配给x，如果且仅if x是true值。否则，它保留其原始值。

示例：

const deleteKey = () => {
  //perform randon computations
  return " ";
}
let userDetails = {name:"chika", age:5, room:10, key:"990000"}
userDetails.key &&= deleteKey()
console.log(userDetails.key)

//output : ""

const deleteKey = () => {
  //perform randon computations
  return " ";
}
let userDetails = {name:"chika", age:5, room:10, key:"990000"}
userDetails.key &&= deleteKey()
console.log(userDetails.key)

//output : ""

userDetails.key &&= deleteKey()从deleteKey函数返回一个空字符串，因为前一个值userDetails是一个数字，这是一个true的值。

逻辑无效赋值运算符（`??=`）

x ??= y

x ??= y

逻辑无效运算符仅分配y至x如果x是nullish的

示例：

const getKey = () => {
  //perform randon computations
  return "somekey";
}
let userDetails = {name:"chika", age:5, room:10,}
userDetails.key ??= getKey()
console.log(userDetails.key)

//output : "somekey"

这里，输出是"somekey"，因为响应对象中不存在userDetails.key（即undefined）

String.replaceAll

const newString = oldString.replaceAll(pattern, replacement);

方法返回一个新的字符串，所有的 pattern被传递给它的replacement替换。 pattern参数可以是字符串或正则表达式模式，replacement可以是一个字符串或创建新字符串的函数。

replaceAll方法是String.replace方法的续集，String.replace仅替换pattern的第一次找到的位置。

示例：

const str = "Linda is a self-taught developer.Linda will rule the world";

let newStr = str.replace("Linda","Micheal")
//output: Micheal is a self-taught developer.Linda will rule the world

let newStr = str.replaceAll("Linda","Micheal")
//output: Micheal is a self-taught developer.Micheal will rule the world

数字分离器separator

数字分离器通过使用下划线（_）字符以单独的数字组来提高大数字的可读性，就像您使用逗号以单独的方式分隔数字。考虑数字1200044555。乍一看，这一数字又很难被理解阅读

示例：

const billGatesNetWorth = 1_200_044_555;

现在这更可读。请注意，这没有任何性能损失或影响。 1_200_044_555仍然等于1200044555。

`Promise.Any`

Promise.any([promise1, promise2, promise3, ...]).then(....do something)

Promise.any()方法是新的promise方法，它接受promise 数组，它返回第一个成功resolve的值。

示例：

const promise1 = new Promise((resolve) => setTimeout((resolve) => resolve, 300, 'faster');
const promise2 = new Promise((reject) => setTimeout( (reject) =>reject, 100,"fastest")
const promise3 = new Promise((resolve) => setTimeout( (resolve) => resolve,700,'fast');
const promises = [promise1, promise2, promise3];

Promise.any(promises).then((value)=>console.log(value));

//Output: faster

`WeakRef`

const weakRef = new WeakRef({
   name:"Linda";
});
console.log(weakRef.deref().name)

//output: Linda

WeakRef是一个高级功能应该避免的使用，根据TC39提案说明。要了解WeakRef，您需要首先了解javascript中的对象引用的概念和垃圾收集。

const obj = {}

当您在JavaScript中创建一个对象并将其分配给变量时，在浏览器上运行的JavaScript引擎会分配存储对象的内存地址。另一方面，分配对象的变量存储对象的存储器地址，而不是对象本身的值。因此，您可以说obj保留对分配给它的对象的引用。

随着对象的创建并存储在内存中，在某个点，浏览器需要释放内存空间。垃圾收集是浏览器引擎通过删除不再由任何变量引用的对象来释放内存空间的过程。

WeakRef为传递给它的对象创建弱引用。这意味着每当浏览器需要运行垃圾收集时，如果对该对象的唯一引用来自WeakRef变量，则JavaScript引擎可以安全地从内存中删除对象并释放空间。由于寿命短暂，这可能是WebSocket数据的理想选择。

使用new WeakRef构造函数创建WeakRef，并且可以通过deRef方法访问WeakRef变量的值。

如何在你的代码中使用中的ES2021功能

新的ES2021功能已经支持了最近版本的主要浏览器，如Chrome 85，Firefox 79和Safari 14.但是，要使您的代码能够在较旧的浏览器中运行，您需要将项目设置为Babel编译器。

安装以下包：

npm install --save-dev @babel/core @babel/cli @babel/preset-env 
npm install core-js

在项目根目录中创建babel.config.json文件：

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "corejs": {
                    "version": "3.8",
                    "proposals": true
                }
            }
        ]
    ]
}

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "corejs": {
                    "version": "3.8",
                    "proposals": true
                }
            }
        ]
    ]
}

上面的配置指示Babel使用preset-env，其中包含所有最新JavaScript功能的编译器，该功能使其成为TC39提案过程中的四个阶段。它还指示Babel从core JS在需要时检索polyfills。

在项目根目录中创建一个.browserlistrc文件，以指示Babel的转换代码至目标浏览器：

defaults
maintained node versions

defaults指示Babel仅用于编译和检索polyfill：

Browsers of the last two versions
Browsers with >0.5 percent marketshare usage
Browsers that are not dead

maintained node versions表示Babel应该为Node.js Foundation仍维护的所有Node.js版本的编译和检索polyfill。

现在，你可以运行：

./node_modules/.bin/babel src --out-dir lib

这将解析并将src目录中的所有JavaScript文件解析为适用于旧浏览器的代码（如.browserlistrc文件指定）并将每个文件输出到lib目录。

N.B 如果您使用的工具链如Create React应用程序或Vue-CLI，则这些配置已经配置好。

现在你就可以在今天开始使用ES2021！

逻辑分配运算符

逻辑或分配运算符（||=）

逻辑并赋值运算符（&&=）

逻辑无效赋值运算符（??=）

String.replaceAll

数字分离器separator

Promise.Any

WeakRef

如何在你的代码中使用中的ES2021功能

逻辑或分配运算符（`||=`）

逻辑并赋值运算符（`&&=`）

逻辑无效赋值运算符（`??=`）

`Promise.Any`

`WeakRef`