从 ES6 到 ES11，你需要知道的新特性

从 ES6 到 ES11，你需要知道的新特性

JavaScript 是一种动态的、弱类型的编程语言，常用于前端开发。它自问世以来，一直在不断地发展和完善，其中 ECMAScript（简称 ES）是 JavaScript 标准的核心。ES6（ES2015）是 ECMAScript 的第六个版本，于 2015 年发布。自此以后，每年都会发布一个新版本，ES7（ES2016）、ES8（ES2017）、ES9（ES2018）、ES10（ES2019）和 ES11（ES2020）。

本文将介绍从 ES6 到 ES11 的新特性，帮助你更好地了解和使用 JavaScript。内容详细且有深度和学习以及指导意义，并包含示例代码。

1. ES6

ES6 引入了许多新的特性，包括箭头函数、模板字符串、解构赋值、let 和 const 关键字、类和模块等等。以下是一些常用的新特性：

1.1 箭头函数

箭头函数是 ES6 中的一个新特性，它可以简化函数的书写方式。箭头函数的语法如下：

// ES5
function add(a, b) {
  return a + b;
}

// ES6
const add = (a, b) => a + b;

箭头函数可以省略 function 关键字，而且如果函数体只有一条语句，可以省略 return 关键字。

1.2 模板字符串

模板字符串是 ES6 中的另一个新特性，它可以让我们更方便地拼接字符串。模板字符串的语法如下：

// ES5
var name = 'Tom';
var greeting = 'Hello, ' + name + '!';

// ES6
const name = 'Tom';
const greeting = `Hello, ${name}!`;

模板字符串使用反引号（`）包裹，可以在其中使用 ${} 来嵌入变量或表达式。

1.3 解构赋值

解构赋值是 ES6 中的一个新特性，它可以让我们更方便地从对象或数组中获取值。解构赋值的语法如下：

// javascriptcn.com 代码示例
// ES5
var person = {
  name: 'Tom',
  age: 18
};
var name = person.name;
var age = person.age;

// ES6
const person = {
  name: 'Tom',
  age: 18
};
const { name, age } = person;

解构赋值使用花括号（{}）包裹，可以将要获取的属性名作为变量名。

1.4 let 和 const 关键字

let 和 const 是 ES6 中引入的两个新关键字，它们可以让我们更好地控制变量的作用域和可变性。

let 关键字用于声明变量，它的作用域是块级作用域，只在当前代码块中有效。const 关键字用于声明常量，它的值不能被重新赋值，但是如果常量是一个对象或数组，可以修改其属性或元素的值。

// javascriptcn.com 代码示例
// ES5
var x = 1;
if (true) {
  var x = 2;
}
console.log(x); // 2

// ES6
let y = 1;
if (true) {
  let y = 2;
}
console.log(y); // 1

const z = 1;
z = 2; // 报错

1.5 类和模块

ES6 引入了类和模块的概念，让 JavaScript 更像面向对象编程语言。类可以用来创建对象，模块可以用来组织代码。

// javascriptcn.com 代码示例
// 类
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}

const person = new Person('Tom', 18);
person.sayHello();

// 模块
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// app.js
import { add, subtract } from './math.js';
console.log(add(1, 2)); // 3
console.log(subtract(2, 1)); // 1

1. ES7

ES7 引入了一些新特性，包括 Array.prototype.includes() 和指数运算符。

2.1 Array.prototype.includes()

Array.prototype.includes() 方法用于判断数组中是否包含某个元素。它返回一个布尔值，表示数组是否包含该元素。

const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false

2.2 指数运算符

指数运算符是 ES7 中的一个新特性，它可以用来计算一个数的幂次方。

console.log(2 ** 3); // 8

1. ES8

ES8 引入了一些新特性，包括 async/await 和 Object.values() / Object.entries()。

3.1 async/await

async/await 是 ES8 中的一个新特性，它可以让我们更方便地处理异步操作。async 函数返回一个 Promise 对象，await 可以等待 Promise 对象的结果。

// javascriptcn.com 代码示例
// ES5
function fetchUser() {
  return fetch('/api/user')
    .then(response => response.json())
    .then(data => data.user);
}

// ES8
async function fetchUser() {
  const response = await fetch('/api/user');
  const data = await response.json();
  return data.user;
}

const user = await fetchUser();
console.log(user);

3.2 Object.values() / Object.entries()

Object.values() 和 Object.entries() 方法分别用于获取对象的值和键值对数组。

const obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj)); // [1, 2, 3]
console.log(Object.entries(obj)); // [['a', 1], ['b', 2], ['c', 3]]

1. ES9

ES9 引入了一些新特性，包括 Rest/Spread 属性和 Promise.finally()。

4.1 Rest/Spread 属性

Rest/Spread 属性可以让我们更方便地操作对象和数组。

// javascriptcn.com 代码示例
// 对象
const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { ...obj1, d: 4 };
console.log(obj2); // { a: 1, b: 2, c: 3, d: 4 }

// 数组
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

4.2 Promise.finally()

Promise.finally() 方法用于指定 Promise 结束时的回调函数，无论 Promise 成功还是失败都会执行。

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))
  .finally(() => console.log('fetch finished'));

1. ES10

ES10 引入了一些新特性，包括 Array.prototype.flat() 和 Array.prototype.flatMap()。

5.1 Array.prototype.flat()

Array.prototype.flat() 方法用于将多维数组转化为一维数组。

const arr1 = [1, 2, [3, 4]];
const arr2 = arr1.flat();
console.log(arr2); // [1, 2, 3, 4]

5.2 Array.prototype.flatMap()

Array.prototype.flatMap() 方法可以将数组的每个元素先进行映射，然后再将结果压缩成一个新数组。

const arr1 = [1, 2, 3];
const arr2 = arr1.flatMap(x => [x * 2]);
console.log(arr2); // [2, 4, 6]

1. ES11

ES11 引入了一些新特性，包括可选链操作符和空值合并操作符。

6.1 可选链操作符

可选链操作符可以让我们更方便地访问对象的属性或方法，避免了因为属性或方法不存在而导致的错误。

// javascriptcn.com 代码示例
const person = {
  name: 'Tom',
  age: 18,
  address: {
    city: 'Beijing'
  }
};

console.log(person.address.city); // Beijing
console.log(person.address.country); // 报错

console.log(person?.address?.city); // Beijing
console.log(person?.address?.country); // undefined

6.2 空值合并操作符

空值合并操作符可以让我们更方便地设置默认值。

const name = person.name || 'Unknown';
const age = person.age ?? 0;

空值合并操作符（??）只在左侧的值为 null 或 undefined 时才会返回右侧的值。

总结

本文介绍了从 ES6 到 ES11 的新特性，包括箭头函数、模板字符串、解构赋值、let 和 const 关键字、类和模块、Array.prototype.includes()、指数运算符、async/await、Object.values() / Object.entries()、Rest/Spread 属性、Promise.finally()、Array.prototype.flat()、Array.prototype.flatMap()、可选链操作符和空值合并操作符。这些新特性可以让我们更方便地编写 JavaScript 代码，提高开发效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65595e52d2f5e1655d3c9ca1