导读:今天,我们将讨论一些有用的JavasScript新功能,这些新功能可以通过减少代码量,帮助开发者实现更多目标。
JavaScript是一种易于学习的编程语言,它非常适合初学者。多年来,它已经发展到几乎无处不在的程度。

人们已经在前端(React,Angular或Vue.js),后端(Node.js),使用Electron.JS创建桌面应用程序等等发现它的影子。

JavaScript在2021年又发布了一些新功能,可以在更多方面为开发人员提供助益。

2021年JavaScript的一些新功能,我们来总结如下:


1)新的逻辑运算符


JavaScript在现有集合中添加了3个新的逻辑运算符。这3个运算符分别是

&&=,||=和??=。

我们来详细讨论这些运算符:

a)&&=运算符

在深入解释之前,来看下面的示例代码:

let a = 1;
let b = 2;
a &&= b;
console.log(a) // 输入的变量 'a' 的值将为 2.
a&&= b相当于下面的代码:

if(a){ 
  a = b; 
}
该逻辑运算符表示,如果变量a是真值(因为它具有非零值,那么它就为真值),则a应为变量分配变量的值b。

因此运行console.log(a)时,变量的值a等于2而不是1。

b)||=运算符

来看以下代码块:

let a = 1;
let b = 2;
a ||= b;
console.log(b); // 变量“a”的结果为 1.

该运算符与&&=运算符的结果相反。

在这种情况下,仅当变量a不为真值时,变量b才等于变量a。上面的代码块等效于以下的代码:


if (!a) {
  a = b;
}

c)??=运算符

此运算符检查值是否为null或未定义。考虑以下示例:

let a;
let b = 2;
a ??= 1;
console.log(a) // 输出变量 'a' 的值为 1.
// 以下代码类似于以上实例.
// if(a === null || a === undefined) {
//   a = 1
// }

在以上的示例中,变量“ a”的值计算为未定义,因此if条件表达式的计算“a”表达式的结果为true,并且将“ a”分配值为1。

2)字符串'replaceAll'方法


很多人都用replace方法将字符串中的字符或单词替换为指定的元素。但是它有一个局限性,该方法仅替换了我们要替换的字符或单词的第一个匹配项,而其余匹配项则保持不变。要替换所有字符或单词,我们必须使用正则表达式。

例子:

// without regex
let str = 'JS is everywhere. JS is amazing!';
console.log(str.replace('JS', 'JavaScript')); // the output would be 'JavaScript is everywhere. JS is amazing!'
// with regex
let str = 'JS is everywhere. JS is amazing!';
console.log(str.replace(/JS/g, 'JavaScript')); // the output would be 'JavaScript is everywhere. JavaScript is amazing!'.
使用该replaceAll方法,可以移除正则表达式。来看下面的代码:

let str = 'JS is everywhere. JS is amazing!';
console.log(str.replaceAll('JS', 'JavaScript')); // the output would be 'JavaScript is everywhere. JavaScript is amazing!'.
replaceAll方法可用指定的元素替换所有出现的指定字符或单词。

3)使用下划线作为整数的分隔符


整数是字符串,数组等中的数据类型之一。有时候数值会变得很大,几乎很难计算出存在的元素数或弄清楚该数字是一百万还是十个亿。

通过引入下划线功能,可以提高整数的可读性。人们可以使用下划线将数字分开,而无需将数据类型转换为字符串。如下代码示例:

let number = 1_000_000_000; // one billion
console.log(number) // 1000000000 (the number would remain an integer)

4)Promise.any()


如果你不知道promises在JavaScript表示什么,那么应该首先阅读以下文字。

Promise.any()是一项新功能,它是一个多个可迭代的Promise,并返回最先实现的Promise。以下示例可清楚地说明这一点:


const p1 = new Promise(resolve => setTimeout(resolve, 500, 'First'));
const p2 = new Promise(resolve => setTimeout(resolve, 800, 'Second'));
const p3 = Promsie.reject(1);
const promises = [p1, p2, p3];
Promise.any(promises)
.then(result => {
   console.log(result);
}) // the result would be 'First' because that's the promise, that is fulfilled first.
.catch(e => {
    console.log(e);
})

万一所有promise都没有兑现,那么我们将得到一个AggregateError。要处理AggregateError,我们可以在catch语句之后定义一条then语句。

5)WeakRef和Finalizers


WeakRef是“弱引用”的缩写。WeakRef允许持有对象的弱引用。所保持的弱引用称为“目标”,弱引用不会阻止垃圾回收器回收对象。

(垃圾收集是一种收集不再需要的变量的方法,可以释放计算机内存。)

注意:WeakRef仅应在进行了适当的调整后使用,并应尽可能避免使用。

让我们通过一个例子来理解以下内容:

const weakRefFunc =()=> { 
    const obj = new WeakRef({ 
       name:'JavaScript' 
    }); 
    console.log(obj.deref()。name); 

const test =()=> { 
    new Promise(resolve => { 
     setTimeout(()=> { 
       weakRefFunc(); 
        resolve(); 
      },3000)
    })
    new Promise(resolve => { 
     setTimeout(()=> { 
       weakRefFunc(); 
        resolve(); 
      },5000)
    })

test();

该deref方法返回被保留的目标,如果目标是垃圾回收,则返回undefined。

在此示例中,变量obj是要保留的弱引用。

第一次在函数weakrefFunc内部test调用时,保证会打印'JavaScript',但是第二次调用时,不能保证会打印'JavaScript',因为变量obj可能被垃圾回收。它被认为是弱引用。

Finalizers


Finalizers 通常与WeakRef一起联合使用,但是WeakRef可以单独使用。Finalizers用来告诉解释引擎何时同对象进行垃圾回收。让我们来用一个例子来理解这一点:

首先,使用FinalizationRegistry方法创建一个Finalizers。

const registerFinalizer = new FinalizationRegistry(data => console.log(data));
const obj = {'name': 'JavaScript'};
registerFinalizer.register(obj, 'obj is collected now!')


那么现在,变量registerFinalizer是一个对象,其中包含register是我们将要使用的方法。registerFinalizer.register需要2个参数。首先是要监视对象的垃圾回收,其次是当对象被垃圾回收时要在控制台上显示的消息。

当变量obj由垃圾收集器收集时,会显示一条消息,显示对象被收集,打印在控制台。

结论


总体上,JavaScript是一种令人兴奋的学习语言,主要原因之一是它已经无处不在。我在工作发现上面讨论的这些新功能非常有用。

JavaScript 2021的功能非常出色,希望明年能够发布并实现,各位不妨一试哦。

作者:万能的大雄