ECMAScript 12 (ES12, ES2021) 新特性
还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。
| No. | 内容链接 |
|---|---|
| 1 | Openlayers 【入门教程】 - 【源代码+示例300+】 |
| 2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
| 3 | Cesium 【入门教程】 - 【源代码+图文示例200+】 |
| 4 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
| 5 | 前端就业宝典 【面试题+详细答案 1000+】 |
文章目录
- 新特性概述
- 1. Promise.any()
- 2. String.prototype.replaceAll()
- 3. WeakRefs
- 4. Logical Assignment Operators
- 5. New Methods in RegExp
- 6. Numeric Separators
ECMAScript 12（通常称为ES2021或ES12）是JavaScript语言的一个版本，它在2021年由ECMA国际标准化组织发布。虽然这个版本引入的变化相对较小，但它仍然包含了一些有用的新特性。
新特性概述
1. Promise.any()
Promise.any() 是一个新方法，用于处理多个Promise。如果其中任何一个Promise解析成功，则返回第一个成功的Promise的结果；如果所有的Promise都被拒绝，则返回一个聚合错误。
示例:
const promise1 = Promise.reject(new Error('Fail'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 500, 'Success'));
const promise3 = Promise.reject(new Error('Fail'));Promise.any([promise1, promise2, promise3]).then((value) => console.log(value)) // Logs "Success".catch((error) => console.error(error));
2. String.prototype.replaceAll()
replaceAll() 方法返回一个新的字符串，其中所有匹配给定模式的子串都被替换为指定的替换文本。
示例:
const str = 'hello world';
console.log(str.replaceAll('l', 'L')); // Logs "heLLo worLd"
3. WeakRefs
WeakRef 允许你持有对象的一个弱引用，这意味着当对象不再被任何强引用所引用时，垃圾回收器可以自由地回收该对象。
示例:
class Resource {constructor(data) {this.data = data;}
}const resource = new Resource('some data');
const weakRef = new WeakRef(resource);
console.log(weakRef.deref()); // Logs the Resource object// Clearing the strong reference.
resource = null;
// After garbage collection, the weakRef should be null.
setTimeout(() => {console.log(weakRef.deref()); // Logs "undefined" if garbage collected
}, 0);
4. Logical Assignment Operators
逻辑赋值运算符允许你使用逻辑AND (&&=) 和 OR (||=) 运算符进行赋值。
示例:
let a = false;
let b = true;a ||= 1; // a remains false
b ||= 2; // b remains true
a &&= 3; // a remains false
b &&= 4; // b becomes 4console.log(a); // Logs "false"
console.log(b); // Logs "4"
5. New Methods in RegExp
在正则表达式中添加了新的方法，如 lastIndex 的 setter。
示例:
const re = /./g;
re.lastIndex = 10; // Set lastIndex to 10
console.log(re.lastIndex); // Logs "10"
6. Numeric Separators
数字分隔符 _ 可以用来更清晰地表示大数。
示例:
const largeNumber = 1_000_000;
console.log(largeNumber); // Logs "1000000"