ECMAScript 新特性详解：从ES6到ES14的演进与应用

ECMAScript（简称ES）是JavaScript的标准，每年都会发布一个新版本，从ES6（2015年）到ES14（2023年），每个版本都引入了新的特性和改进。以下是每个版本的一些主要特性及其使用方式和应用场景：

ES6 (2015)

1. let 和 const

   • 用法: let x = 1; const y = 2;
   • 场景: 块级作用域变量声明，避免变量提升导致的错误。

2. 箭头函数

   • 用法: const add = (a, b) => a + b;
   • 场景: 更简洁的函数表达式，自动绑定 this。

3. 模板字符串

   • 用法: const message = `Hello, ${name}!`;
   • 场景: 多行字符串和字符串插值。

4. 类（Class）

   • 用法:

     class Person {
       constructor(name) {
         this.name = name;
       }
       greet() {
         console.log(`Hello, ${this.name}`);
       }
     }

   • 场景: 面向对象编程。

5. 解构赋值

   • 用法:

     const [a, b] = [1, 2];
     const {name, age} = {name: 'Alice', age: 25};

   • 场景: 从数组或对象中提取值。

6. 默认参数

   • 用法: function multiply(a, b = 1) { return a * b; }
   • 场景: 函数参数有默认值。

7. Promise

   • 用法:

     const promise = new Promise((resolve, reject) => {
       // async operation
     });
     promise.then(result => {}).catch(error => {});

   • 场景: 处理异步操作。

ES7 (2016)

1. 指数操作符

   • 用法: const result = 2 ** 3;
   • 场景: 代替 Math.pow。

2. Array.prototype.includes

   • 用法: const hasValue = [1, 2, 3].includes(2);
   • 场景: 检查数组中是否包含某个值。

ES8 (2017)

1. async/await

   • 用法:

     async function fetchData() {
       const response = await fetch('url');
       const data = await response.json();
       return data;
     }

   • 场景: 更简洁的异步代码。

2. Object.values 和 Object.entries

   • 用法:

     const values = Object.values({a: 1, b: 2});
     const entries = Object.entries({a: 1, b: 2});

   • 场景: 获取对象的值或键值对数组。

ES9 (2018)

1. 异步迭代

   • 用法:

     for await (const value of asyncIterable) {
       console.log(value);
     }

   • 场景: 处理异步数据流。

2. Rest/Spread 属性

   • 用法:

     const {a, ...rest} = {a: 1, b: 2, c: 3};
     const newObj = {...oldObj, d: 4};

   • 场景: 复制和合并对象。

ES10 (2019)

1. Array.prototype.flat 和 flatMap

   • 用法:

     const flattened = [1, [2, 3]].flat();
     const flatMapped = [1, 2, 3].flatMap(x => [x, x * 2]);

   • 场景: 扁平化数组。

2. Object.fromEntries

   • 用法:

     const obj = Object.fromEntries([['a', 1], ['b', 2]]);

   • 场景: 将键值对列表转为对象。

3. String.prototype.trimStart 和 trimEnd

   • 用法: const str = ' hello '.trimStart();
   • 场景: 去除字符串的首尾空格。

ES11 (2020)

1. 可选链（Optional Chaining）

   • 用法: const value = obj?.prop?.subProp;
   • 场景: 安全地访问嵌套属性。

2. Nullish Coalescing

   • 用法: const value = a ?? 'default';
   • 场景: 处理 null 或 undefined 值。

3. BigInt

   • 用法: const bigInt = 123n;
   • 场景: 表示任意精度的整数。

4. Promise.allSettled

   • 用法:

     const promises = [promise1, promise2];
     Promise.allSettled(promises).then(results => console.log(results));

   • 场景: 等待所有 Promise 完成，无论成功或失败。

ES12 (2021)

1. 逻辑赋值运算符

   • 用法:

     a ||= b; // 等同于 a || (a = b);
     a &&= b; // 等同于 a && (a = b);
     a ??= b; // 等同于 a ?? (a = b);

   • 场景: 简化赋值操作。

2. String.prototype.replaceAll

   • 用法: const newStr = 'aabbcc'.replaceAll('b', 'd');
   • 场景: 全局替换字符串中的子串。

3. WeakRefs 和 FinalizationRegistry

   • 用法:

     let ref = new WeakRef(someObject);
     let registry = new FinalizationRegistry((heldValue) => {
       console.log(heldValue);
     });
     registry.register(someObject, 'some metadata');

   • 场景: 高级内存管理。

ES13 (2022)

1. 顶层 await

   • 用法:

     const response = await fetch('url');
     const data = await response.json();

   • 场景: 在模块顶层使用 await。

2. 类字段声明

   • 用法:

     class MyClass {
       myField = 10;
       #privateField = 20;
     }

   • 场景: 简化类属性声明，支持私有属性。

ES14 (2023)

1. Array.prototype.toSorted

   • 用法:

     const sortedArray = [3, 1, 2].toSorted();

   • 场景: 返回排序的新数组，而不改变原数组。

2. Symbol.asIntN 和 Symbol.asUintN

   • 用法:

     const int8 = Symbol.asIntN(8, 128); // -128
     const uint8 = Symbol.asUintN(8, 256); // 0

   • 场景: 处理大整数。

3. WeakMap.prototype.emplace 和 WeakSet.prototype.emplace

   • 用法:

     const wm = new WeakMap();
     wm.emplace(key, {
       insert: () => 'new value',
       update: (value) => 'updated value'
     });

   • 场景: 提供更灵活的键值操作。

这些新特性和改进不仅增强了JavaScript的功能性和表现力，还使得编写更简洁、高效和安全的代码成为可能。