ES7/ES8/ES9/ES10 新特性整理

ES7 新特性

ES7 在 ES6 的基础上新增了两个功能，分别是数组的 includes 方法和 Math.pow 的简写语法。

1. 数组的 includes 方法

Array.prototype.includes() 方法用于确定一个数组是否包含某个元素，如果包含则返回 true，否则返回 false。该方法的语法如下：

Array.prototype.includes(element, start)

其中，element 是要查找的元素，start 是可选参数，指定搜索的起始位置。

2. Math.pow 的简写语法

Math.pow() 方法用于计算一个数的幂。在 ES7 中，Math.pow() 方法新增了一个简写语法，可以使用 ```` 运算符代替 Math.pow() 方法。例如：

Math.pow(2, 3) // 等价于 2 ** 3

ES8 新特性

ES8 在异步操作、Object、String 能力上做了进一步增强，让代码编写更加便捷高效。

1. 异步操作

ES8 引入了 async/await 语法，使异步编程更加容易。async 函数可以使函数暂停执行，直到异步操作完成，然后继续执行。await 用于等待异步操作完成。例如：

async function fetchUserData() {
  const response = await fetch('https://example.com/api/users');
  const data = await response.json();
  return data;
}

2. Object

ES8 新增了两个新的 Object 方法：Object.values() 和 Object.entries()。Object.values() 方法返回一个数组，其中包含对象的所有值。Object.entries() 方法返回一个数组，其中包含对象的所有键值对。例如：

const obj = {
  name: 'John Doe',
  age: 30
};

console.log(Object.values(obj)); // ['John Doe', 30]
console.log(Object.entries(obj)); // [['name', 'John Doe'], ['age', 30]]

3. String

ES8 新增了两个新的 String 方法：String.prototype.padStart() 和 String.prototype.padEnd()。这两个方法用于在字符串的开头或结尾填充字符，直到字符串达到指定长度。例如：

const str = 'Hello';

console.log(str.padStart(10, ' ')); // '     Hello'
console.log(str.padEnd(10, ' ')); // 'Hello     '

ES9 新特性

ES9 引入了许多新的特性，包括 Symbol、Spread operator 等，使 JavaScript 更加强大和灵活。

1. Symbol

Symbol 是一个新的原始数据类型，它可以作为对象的属性名或函数名。Symbol 的主要特点是它不能被重复创建，这意味着每个 Symbol 都具有唯一性。例如：

const symbol1 = Symbol();
const symbol2 = Symbol();

console.log(symbol1 === symbol2); // false

2. Spread operator

Spread operator (...) 是一个新的语法，它可以将数组或对象展开为一系列元素。例如：

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

console.log(newArr); // [1, 2, 3, 4, 5]

ES10 新特性

ES10 引入了许多新的特性，包括 Optional chaining、Nullish coalescing operator 等，使 JavaScript 更加简洁和易于使用。

1. Optional chaining

Optional chaining (?.) 是一个新的语法，它可以安全地访问嵌套对象的属性。如果某个属性不存在，optional chaining 将返回 undefined，而不会报错。例如：

const obj = {
  name: 'John Doe',
  address: {
    street: '123 Main Street'
  }
};

console.log(obj.address?.city); // undefined

2. Nullish coalescing operator

Nullish coalescing operator (??) 是一个新的语法，它可以安全地获取两个表达式的值。如果第一个表达式为 null 或 undefined，则返回第二个表达式的值。否则，返回第一个表达式的值。例如：

const name = firstName ?? lastName;

console.log(name); // 'John Doe'