十九、ES6+ 后续版本简介（ES7~ES13）

ES6 之后，JavaScript 每年都会发布一个新的版本，带来新的特性和改进。本节将介绍 ES7 到 ES13 的主要新特性。

ES7 (ES2016)

1. 指数运算符 **

// 计算 2 的 3 次方
console.log(2 ** 3); // 8

// 相当于 Math.pow()
console.log(Math.pow(2, 3)); // 8

// 可以与赋值运算符结合
let a = 2;
a **= 3;
console.log(a); // 8

2. Array.prototype.includes()

const arr = [1, 2, 3, 4, 5];

console.log(arr.includes(3)); // true
console.log(arr.includes(6)); // false

// 可以指定搜索起点
console.log(arr.includes(3, 3)); // false（从索引 3 开始搜索）

ES8 (ES2017)

1. async/await

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData().then(data => {
  console.log(data);
});

2. Object.values() 和 Object.entries()

const obj = { a: 1, b: 2, c: 3 };

// Object.values() 返回对象的值数组
console.log(Object.values(obj)); // [1, 2, 3]

// Object.entries() 返回键值对数组
console.log(Object.entries(obj)); // [['a', 1], ['b', 2], ['c', 3]]

3. String.prototype.padStart() 和 String.prototype.padEnd()

const str = '123';

// padStart() 在开头补全
console.log(str.padStart(5, '0')); // 00123

// padEnd() 在结尾补全
console.log(str.padEnd(5, '0')); // 12300

ES9 (ES2018)

1. 异步迭代器

async function processItems(items) {
  for await (const item of items) {
    console.log(item);
  }
}

// 模拟异步数据源
async function* asyncGenerator() {
  yield Promise.resolve(1);
  yield Promise.resolve(2);
  yield Promise.resolve(3);
}

processItems(asyncGenerator());

2. Rest/Spread 属性

// Rest 属性
const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a, b, rest); // 1 2 { c: 3, d: 4 }

// Spread 属性
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3, d: 4 };
console.log(obj2); // { a: 1, b: 2, c: 3, d: 4 }

3. Promise.prototype.finally()

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))
  .finally(() => console.log('请求完成'));

ES10 (ES2019)

1. Array.prototype.flat() 和 Array.prototype.flatMap()

// flat() 扁平化数组
const arr = [1, [2, [3, [4]]]];
console.log(arr.flat()); // [1, 2, [3, [4]]]
console.log(arr.flat(2)); // [1, 2, 3, [4]]
console.log(arr.flat(Infinity)); // [1, 2, 3, 4]

// flatMap() 先映射后扁平化
const arr2 = [1, 2, 3];
console.log(arr2.flatMap(x => [x, x * 2])); // [1, 2, 2, 4, 3, 6]

2. String.prototype.trimStart() 和 String.prototype.trimEnd()

const str = '   Hello World   ';

// trimStart() 去除开头空白
console.log(str.trimStart()); // 'Hello World   '

// trimEnd() 去除结尾空白
console.log(str.trimEnd()); // '   Hello World'

3. Object.fromEntries()

// 将键值对数组转换为对象
const entries = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(entries);
console.log(obj); // { a: 1, b: 2, c: 3 }

ES11 (ES2020)

1. 可选链操作符 ?.

const user = {
  name: 'John',
  address: {
    street: '123 Main St',
    // city: 'New York'
  }
};

// 传统方式
console.log(user.address && user.address.city); // undefined

// 可选链
console.log(user.address?.city); // undefined

// 可选链与函数调用
console.log(user.getAddress?.()); // undefined

2. 空值合并运算符 ??

// 空值合并运算符只对 null 和 undefined 生效
const a = null ?? 'default';
console.log(a); // 'default'

const b = undefined ?? 'default';
console.log(b); // 'default'

const c = 0 ?? 'default';
console.log(c); // 0（0 不是 null 或 undefined）

const d = '' ?? 'default';
console.log(d); // ''（空字符串不是 null 或 undefined）

3. BigInt

// 创建 BigInt
const bigInt1 = 123n;
const bigInt2 = BigInt(123);

// 大整数运算
console.log(1n + 2n); // 3n
console.log(10n * 2n); // 20n

// 注意：BigInt 不能与普通数字混合运算
// console.log(1n + 2); // 报错

4. globalThis

// 在任何环境中获取全局对象
console.log(globalThis);

ES12 (ES2021)

1. 逻辑赋值运算符 ||= &&= ??=

// 逻辑或赋值
let a = false;
a ||= 'default';
console.log(a); // 'default'

// 逻辑与赋值
let b = true;
b &&= 'value';
console.log(b); // 'value'

// 空值合并赋值
let c = null;
c ??= 'default';
console.log(c); // 'default'

2. String.prototype.replaceAll()

const str = 'Hello World Hello';

// 替换所有匹配项
const newStr = str.replaceAll('Hello', 'Hi');
console.log(newStr); // 'Hi World Hi'

3. Promise.any()

const promises = [
  Promise.reject('Error 1'),
  Promise.resolve('Success'),
  Promise.reject('Error 2')
];

Promise.any(promises)
  .then(result => console.log('成功:', result)) // 成功: Success
  .catch(error => console.log('所有都失败:', error));

ES13 (ES2022)

1. 类字段

class Person {
  // 实例字段
  name = 'John';
  age = 30;
  
  // 静态字段
  static species = 'human';
  
  constructor(name, age) {
    if (name) this.name = name;
    if (age) this.age = age;
  }
}

const person = new Person('Jane', 25);
console.log(person.name); // Jane
console.log(Person.species); // human

2. 私有字段和方法

class Person {
  // 私有字段
  #name = 'John';
  #age = 30;
  
  // 私有方法
  #getSecret() {
    return 'Secret';
  }
  
  // 公共方法
  getName() {
    return this.#name;
  }
  
  getSecret() {
    return this.#getSecret();
  }
}

const person = new Person();
console.log(person.getName()); // John
console.log(person.getSecret()); // Secret
// console.log(person.#name); // 报错：私有字段不能在类外部访问

3. 顶层 await

// 模块顶层使用 await
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);

export default data;

4. Array.prototype.at()

const arr = [1, 2, 3, 4, 5];

// 正数索引
console.log(arr.at(0)); // 1
console.log(arr.at(2)); // 3

// 负数索引（从末尾开始）
console.log(arr.at(-1)); // 5
console.log(arr.at(-2)); // 4

数字分隔符

ES12 引入了数字分隔符，使大数字更易读：

// 使用下划线作为数字分隔符
const billion = 1_000_000_000;
console.log(billion); // 1000000000

const pi = 3.141_592_653_589;
console.log(pi); // 3.141592653589

const hex = 0x1234_5678;
console.log(hex); // 305419896

通过本章节的学习，你已经了解了 ES6 之后各个版本的主要新特性。这些特性不断改进和完善 JavaScript 语言，使代码更加简洁、易读和高效。