来尝尝JavaScript 2021的新功能！
<p><img alt="" src="https://www.21cto.com/uploads/images/what-javascript-framework-to-choose-in-2021.jpeg" style="width: 100%; height: 100%;" />导读：今天，我们将讨论一些有用的JavasScript新功能，这些新功能可以通过减少代码量，帮助开发者实现更多目标。<br />
JavaScript是一种易于学习的编程语言，它非常适合初学者。多年来，它已经发展到几乎无处不在的程度。</p>
<p>人们已经在前端（React，Angular或Vue.js），后端（Node.js），使用Electron.JS创建桌面应用程序等等发现它的影子。</p>
<p>JavaScript在2021年又发布了一些新功能，可以在更多方面为开发人员提供助益。</p>
<p>2021年JavaScript的一些新功能，我们来总结如下：</p>
<p><br />
1）新的逻辑运算符</p>
<p><br />
JavaScript在现有集合中添加了3个新的逻辑运算符。这3个运算符分别是</p>
<p>&&=，||=和??=。</p>
<p>我们来详细讨论这些运算符：</p>
<p>a）&&=运算符</p>
<p>在深入解释之前，来看下面的示例代码：</p>
<p>let a = 1;<br />
let b = 2;<br />
a &&= b;<br />
console.log(a) // 输入的变量 'a' 的值将为 2.<br />
a&&= b相当于下面的代码：</p>
<p>if（a）{ <br />
a = b; <br />
}<br />
该逻辑运算符表示，如果变量a是真值（因为它具有非零值，那么它就为真值），则a应为变量分配变量的值b。</p>
<p>因此运行console.log(a)时，变量的值a等于2而不是1。</p>
<p>b）||=运算符</p>
<p>来看以下代码块：</p>
<p>let a = 1;<br />
let b = 2;<br />
a ||= b;<br />
console.log(b); // 变量“a”的结果为 1.</p>
<p>该运算符与&&=运算符的结果相反。</p>
<p>在这种情况下，仅当变量a不为真值时，变量b才等于变量a。上面的代码块等效于以下的代码：</p>
<p><br />
if (!a) {<br />
a = b;<br />
}</p>
<p>c）??=运算符</p>
<p>此运算符检查值是否为null或未定义。考虑以下示例：</p>
<p>let a;<br />
let b = 2;<br />
a ??= 1;<br />
console.log(a) // 输出变量 'a' 的值为 1.<br />
// 以下代码类似于以上实例.<br />
// if(a === null || a === undefined) {<br />
// a = 1<br />
// }</p>
<p>在以上的示例中，变量“ a”的值计算为未定义，因此if条件表达式的计算“a”表达式的结果为true，并且将“ a”分配值为1。</p>
<p>2）字符串'replaceAll'方法</p>
<p><br />
很多人都用replace方法将字符串中的字符或单词替换为指定的元素。但是它有一个局限性，该方法仅替换了我们要替换的字符或单词的第一个匹配项，而其余匹配项则保持不变。要替换所有字符或单词，我们必须使用正则表达式。</p>
<p>例子：</p>
<p>// without regex<br />
let str = 'JS is everywhere. JS is amazing!';<br />
console.log(str.replace('JS', 'JavaScript')); // the output would be 'JavaScript is everywhere. JS is amazing!'<br />
// with regex<br />
let str = 'JS is everywhere. JS is amazing!';<br />
console.log(str.replace(/JS/g, 'JavaScript')); // the output would be 'JavaScript is everywhere. JavaScript is amazing!'.<br />
使用该replaceAll方法，可以移除正则表达式。来看下面的代码：</p>
<p>let str = 'JS is everywhere. JS is amazing!';<br />
console.log(str.replaceAll('JS', 'JavaScript')); // the output would be 'JavaScript is everywhere. JavaScript is amazing!'.<br />
replaceAll方法可用指定的元素替换所有出现的指定字符或单词。</p>
<p>3）使用下划线作为整数的分隔符</p>
<p><br />
整数是字符串，数组等中的数据类型之一。有时候数值会变得很大，几乎很难计算出存在的元素数或弄清楚该数字是一百万还是十个亿。</p>
<p>通过引入下划线功能，可以提高整数的可读性。人们可以使用下划线将数字分开，而无需将数据类型转换为字符串。如下代码示例：</p>
<p>let number = 1_000_000_000; // one billion<br />
console.log(number) // 1000000000 (the number would remain an integer)</p>
<p>4）Promise.any()</p>
<p><br />
如果你不知道promises在JavaScript表示什么，那么应该首先阅读以下文字。</p>
<p>Promise.any()是一项新功能，它是一个多个可迭代的Promise，并返回最先实现的Promise。以下示例可清楚地说明这一点：</p>
<p><br />
const p1 = new Promise(resolve => setTimeout(resolve, 500, 'First'));<br />
const p2 = new Promise(resolve => setTimeout(resolve, 800, 'Second'));<br />
const p3 = Promsie.reject(1);<br />
const promises = [p1, p2, p3];<br />
Promise.any(promises)<br />
.then(result => {<br />
console.log(result);<br />
}) // the result would be 'First' because that's the promise, that is fulfilled first.<br />
.catch(e => {<br />
console.log(e);<br />
})</p>
<p>万一所有promise都没有兑现，那么我们将得到一个AggregateError。要处理AggregateError，我们可以在catch语句之后定义一条then语句。</p>
<p>5）WeakRef和Finalizers</p>
<p><br />
WeakRef是“弱引用”的缩写。WeakRef允许持有对象的弱引用。所保持的弱引用称为“目标”，弱引用不会阻止垃圾回收器回收对象。</p>
<p>（垃圾收集是一种收集不再需要的变量的方法，可以释放计算机内存。）</p>
<p>注意：WeakRef仅应在进行了适当的调整后使用，并应尽可能避免使用。</p>
<p>让我们通过一个例子来理解以下内容：</p>
<p>const weakRefFunc =（）=> { <br />
const obj = new WeakRef（{ <br />
name：'JavaScript' <br />
}）; <br />
console.log（obj.deref（）。name）; <br />
} <br />
const test =（）=> { <br />
new Promise（resolve => { <br />
setTimeout（（）=> { <br />
weakRefFunc（）; <br />
resolve（）; <br />
}，3000）<br />
}）<br />
new Promise（resolve => { <br />
setTimeout（（）=> { <br />
weakRefFunc（）; <br />
resolve（）; <br />
}，5000）<br />
}）<br />
} <br />
test（）;</p>
<p>该deref方法返回被保留的目标，如果目标是垃圾回收，则返回undefined。</p>
<p>在此示例中，变量obj是要保留的弱引用。</p>
<p>第一次在函数weakrefFunc内部test调用时，保证会打印'JavaScript'，但是第二次调用时，不能保证会打印'JavaScript'，因为变量obj可能被垃圾回收。它被认为是弱引用。</p>
<p>Finalizers</p>
<p><br />
Finalizers 通常与WeakRef一起联合使用，但是WeakRef可以单独使用。Finalizers用来告诉解释引擎何时同对象进行垃圾回收。让我们来用一个例子来理解这一点：</p>
<p>首先，使用FinalizationRegistry方法创建一个Finalizers。</p>
<p>const registerFinalizer = new FinalizationRegistry(data => console.log(data));<br />
const obj = {'name': 'JavaScript'};<br />
registerFinalizer.register(obj, 'obj is collected now!')</p>
<p><br />
那么现在，变量registerFinalizer是一个对象，其中包含register是我们将要使用的方法。registerFinalizer.register需要2个参数。首先是要监视对象的垃圾回收，其次是当对象被垃圾回收时要在控制台上显示的消息。</p>
<p>当变量obj由垃圾收集器收集时，会显示一条消息，显示对象被收集，打印在控制台。</p>
<p>结论</p>
<p><br />
总体上，JavaScript是一种令人兴奋的学习语言，主要原因之一是它已经无处不在。我在工作发现上面讨论的这些新功能非常有用。</p>
<p>JavaScript 2021的功能非常出色，希望明年能够发布并实现，各位不妨一试哦。</p>
<p>作者：万能的大雄</p>
本文为 @ 21CTO 创作并授权 21CTO 发布，未经许可，请勿转载。
内容授权事宜请您联系 webmaster@21cto.com或关注 21CTO 公众号。
该文观点仅代表作者本人，21CTO 平台仅提供信息存储空间服务。
评论
