ES2015、ES2016、ES2017特性及其使用

ECMAScript 版本比较

ECMAScript 版本	发布日期	主要新特性
ES5	2009 年 12 月	严格模式、JSON、getter/setter、Object.create()、Object.defineProperty()、Array.forEach()、Array.map()、Array.filter()、Array.reduce()、Array.reduceRight()
ES6 (ES2015)	2015 年 6 月	箭头函数、类、模块、展开运算符、解构赋值、模板字符串、Promise、生成器函数、Symbol
ES7 (ES2016)	2016 年 6 月	Array.includes()、Array.find()、Array.findIndex()、Object.assign()、Object.values()、Object.entries()、String.includes()、String.startsWith()、String.endsWith()
ES8 (ES2017)	2017 年 6 月	async/await、Object.getOwnPropertyDescriptors()、Reflect.apply()、Reflect.construct()、Reflect.get()、Reflect.set()

ES2015 新特性

1. 箭头函数

箭头函数是 ES2015 中引入的一种新的函数语法。箭头函数没有自己的 this ，也没有自己的 arguments 对象。箭头函数非常适合作为回调函数或闭包使用。

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

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

2. 类

ES2015 中引入了 class 关键字，允许我们使用面向对象的方式来编写 JavaScript 代码。类可以包含属性和方法，还可以继承其他类。

// ES5
var Person = function(name, age) {
  this.name = name;
  this.age = age;

  this.greet = function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  };
};

// ES6
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

3. 模块

ES2015 中引入了模块的概念。模块允许我们将代码分成多个文件，然后在需要的时候导入这些模块。模块可以提高代码的可读性、可维护性和可重用性。

// module1.js
export const add = (a, b) => a + b;

// module2.js
import { add } from './module1.js';

const result = add(1, 2);
console.log(result); // 3

4. 展开运算符

展开运算符 (...) 可以将数组或对象展开成一组单独的元素。展开运算符可以用于函数调用、数组连接和对象合并。

// 数组展开
const numbers = [1, 2, 3];
console.log(...numbers); // 1 2 3

// 函数调用
const sum = (a, b, c) => a + b + c;
const args = [1, 2, 3];
console.log(sum(...args)); // 6

// 对象合并
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { a: 1, b: 2, c: 3, d: 4 }

5. 解构赋值

解构赋值是一种新的赋值语法，允许我们将数组或对象的元素赋值给变量。解构赋值可以使代码更加简洁和易读。

// 数组解构
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

// 对象解构
const person = { name: 'John Doe', age: 30 };
const { name, age } = person;
console.log(name); // John Doe
console.log(age); // 30

6. 模板字符串

模板字符串是一种新的字符串语法，允许我们在字符串中嵌入变量和表达式。模板字符串可以使用反引号 (`) 来表示。

const name = 'John Doe';
const age = 30;

// ES5
const greeting = 'Hello, my name is ' + name + ' and I am ' + age + ' years old.';

// ES6
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

7. Promise

Promise 是 ES2015 中引入的一种新的异步编程机制。Promise 可以让我们在异步操作完成时执行回调函数。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');
  }, 2000);
});

promise.then((result) => {
  console.log(result); // Hello, world!
});

8. 生成器函数

生成器函数是 ES2015 中引入的一种新的函数类型。生成器函数可以生成一系列值，这些值可以通过 yield 关键字来产生。

function* fibonacci() {
  let [a, b] = [0, 1];
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

const fibonacciGenerator = fibonacci();

for (const number of fibonacciGenerator) {
  console.log(number); // 0 1 1 2 3 5 8 13 21 34 ...
}

9. Symbol

Symbol 是 ES2015 中引入的一种新的原始数据类型。Symbol 是一个唯一的值，它不能被复制或改变。Symbol 可以用于创建私有属性和方法。

const symbol = Symbol('mySymbol');

const obj = {
  [symbol]: 'Hello, world!'
};

console.log(obj[symbol]); // Hello, world!

ES2016 新特性

1. Array.includes()

Array.includes() 方法可以检查一个元素是否在数组中。

const numbers = [1, 2, 3];

console.log(numbers.includes(2)); // true
console.log(numbers.includes(4)); // false

2. Array.find()

Array.find() 方法可以返回数组中第一个满足给定条件的元素。

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

const evenNumber = numbers.find((number) => number % 2 === 0);

console.log(evenNumber); // 2

3. Array.findIndex()

Array.findIndex() 方法可以返回数组中第一个满足给定条件的元素的索引。

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

const evenNumberIndex = numbers.findIndex((number) => number % 2 === 0);

console.log(evenNumberIndex); // 1

4. Object.assign()

Object.assign() 方法可以将一个或多个对象的属性复制到另一个对象。

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

Object.assign(obj1, obj2);

console.log(obj1); // { a: 1, b: 2, c: 3, d: 4 }

5. Object.values()

Object.values() 方法可以返回一个对象的所有值的数组。

const obj = { a