每年半小时学习 ES 新特性

·  阅读 2714

这是我参与更文挑战的第4天,活动详情查看:更文挑战

先简单了解一下 ECMAScript 跟 JavaScript 的关系。ECMAScript 是语言规范,JavaScript 是该规范的一种实现。我们通常认为 JavaScript 等价于 ECMAScript,但完整的 JavaScript 实现实际包含了三部分:核心(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)。

我们在使用 JavaScript 开发项目时如果遇到问题,通常利用 Google 或者 stack overflow 都能获得解答。但当我们通过常规的方式无法获得想要的结果时,就应该查询规范了,不妨在 ECMA-262 全局搜索一下试试~

ES6 有比较大的改动,建议翻阅阮一峰的 《ES6 入门教程》进行详细学习。在 ES6 之后,ECMAScript 每年都会有少量新特性增加。而对我们来说,只要每年花上半小时,足以充分学习并掌握这些新增特性。

ES7~ ES11相关内容可以参看前端内参

ES12

String.prototype.replaceAll

该方法将字符串内所有符合匹配规则的字符替换掉,返回一个全新的字符串。

let str = 'Hello, world';
str.replaceAll('l', ''); // "Heo, word"
// 相当于
str.replace(/l/g, '');
复制代码

需要注意的是如果该方法的匹配规则是正则表达式,需要有 g 标识符,不然会报错。

str1.replaceAll(/l/, '');  // TypeError: String.prototype.replaceAll called with a non-global RegExp argument
复制代码

Promise.any

接受一个项全为 promise 的数组,当其中任意一个 promise 成功 resolve 就返回第一个 resolve 的结果,如果所有都失败则抛出异常。

Promise.any([
  new Promise((resolve, reject) => setTimeout(reject, 1000, '我是第一个 promise')),
  new Promise((resolve, reject) => setTimeout(resolve, 2000, '我是第二个 promise')),
  new Promise((resolve, reject) => setTimeout(resolve, 3000, '我是第三个 promise')),
])
.then(value => console.log(value)) // 我是第二个 promise
.catch (err => console.log(err))

//---------------------
Promise.any([
  Promise.reject(),
  Promise.reject(),
  Promise.reject()
])
.then(value => console.log(value))
.catch (err => console.log(err)) //AggregateError: All promises were rejected
复制代码

WeakRefs

这个提案主要包括两个主要的新功能:

  • 使用 WeakRef 类创建对象的弱引用
  • 使用 FinalizationRegistry 类对对象进行垃圾回收后,运行用户定义的终结器

它们可以分开使用,也可以一起使用。

WeakRef 对象包含对对象的弱引用,这个弱引用被称为该 WeakRef 对象的 target 或者是 referent。对对象的弱引用是指当该对象应该被 GC 回收时不会阻止 GC 的回收行为。

let ref = new WeakRef(obj)
let isLive = ref.deref() // 如果 obj 被垃圾回收了,那么 isLive 就是 undefined
复制代码

FinalizationRegistry 能力:当一个在注册表中注册的对象被回收时,请求在某个时间点上调用一个清理回调。

const registry = new FinalizationRegistry(heldValue => {
  // ....
});

// 通过 register 方法,注册任何你想要清理回调的对象,传入该对象和 heldValue
registry.register(theObject, "some value");
复制代码

Logical Assignment Operators(逻辑赋值操作符)

新增了三个逻辑赋值操作符,如下所示:

a ||= b;
// 等价于
a || (a = b);

a &&= b;
// 等价于
a && (a = b);

a ??= b;
// 等价于
a ?? (a = b);
复制代码

Numeric separators(数字分割符)

可以在数字之间增加可视化分隔符,通过下划线 _ 来分割数字,增加可读性。

let budget = 1_000_000_000_000;
budget === 10 ** 12; // true

let nibbles = 0b1010_0001_1000_0101;
console.log(!!(nibbles & (1 << 7))); // true
复制代码
分类:
前端
收藏成功!
已添加到「」, 点击更改