ES7 到 ES2020 中的所有主要特性和语法改进

理解了！这里是 ES7 到 ES2020 中的所有特性和语法改进，每个示例都配有详细的注释，以帮助你更好地理解和应用现代 JavaScript。

1. Array.prototype.includes

Array.prototype.includes 方法用于检查数组是否包含某个元素，替代了传统的 indexOf 方法。

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

// 使用 includes 方法检查元素是否存在
console.log(array.includes(3)); // 输出 true
console.log(array.includes(6)); // 输出 false

2. 指数运算符 (**)

指数运算符 (**) 用于计算幂运算。

// 幂运算示例
console.log(2 ** 3); // 输出 8 (2 的 3 次方)
console.log(Math.pow(2, 3)); // 输出 8

3. Async/Await

Async/Await 是处理异步操作的更简洁方式，基于 Promise 实现。

// 异步函数示例
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 fetching data:', error);
    throw error;
  }
}

// 调用异步函数
fetchData()
  .then(data => console.log('Fetched data:', data))
  .catch(error => console.error('Error:', error));

4. Object.entries 和 Object.values

Object.entries 返回一个给定对象自身可枚举属性的 [key, value] 数组，Object.values 返回一个给定对象自身可枚举属性的值数组。

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

// 使用 Object.entries 获取对象的键值对数组
console.log(Object.entries(obj)); // 输出 [["a", 1], ["b", 2], ["c", 3]]

// 使用 Object.values 获取对象的值数组
console.log(Object.values(obj)); // 输出 [1, 2, 3]

5. String.prototype.padStart 和 String.prototype.padEnd

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"

6. BigInt

BigInt 是一种新的基本数据类型，用于表示任意精度的整数。

const bigIntValue = BigInt(Number.MAX_SAFE_INTEGER) + BigInt(2);

console.log(bigIntValue.toString()); // 输出 "9007199254740994"

7. Optional Chaining (可选链)

可选链 (?.) 允许直接访问对象的属性或调用对象的方法，而无需事先验证对象是否为 null 或 undefined。

const obj = {
  property: {
    value: 42
  }
};

// 使用可选链访问深层属性
console.log(obj.property?.value); // 输出 42
console.log(obj.property?.nonexistent?.value); // 输出 undefined 而不是抛出错误

8. Nullish 合并运算符 (??)

Nullish 合并运算符 (??) 用于对 null 或 undefined 进行默认值的设定。

const nullValue = null;
const undefinedValue = undefined;
const defaultValue = 'Default Value';

// 使用 Nullish 合并运算符设定默认值
console.log(nullValue ?? defaultValue); // 输出 "Default Value"
console.log(undefinedValue ?? defaultValue); // 输出 "Default Value"

9. 元组（Tuple）类型

元组是一种固定长度和固定类型的数组。

// 定义一个元组类型
let tuple: [string, number] = ['example', 42];

// 访问元组的成员
console.log(tuple[0]); // 输出 "example"
console.log(tuple[1]); // 输出 42

10. 可选参数和默认参数

函数可以使用可选参数和默认参数来提供更灵活的调用方式。

// 可选参数示例
function greet(name?: string) {
  if (name) {
    return `Hello, ${name}!`;
  } else {
    return `Hello, Guest!`;
  }
}

console.log(greet()); // 输出 "Hello, Guest!"
console.log(greet('Alice')); // 输出 "Hello, Alice!"

// 默认参数示例
function increment(num: number, incrementBy: number = 1) {
  return num + incrementBy;
}

console.log(increment(5)); // 输出 6 (默认增量为 1)
console.log(increment(5, 2)); // 输出 7 (指定增量为 2)

这些示例涵盖了 ES7 到 ES2020 中的所有主要特性和语法改进，每个示例都附带了详细的注释，以帮助你理解每个新功能的用法和目的。