ES6：操作手册

ES全称ECMAScript，ES6是它的第六个版本（以下简称ES6），它是JavaScript语言的下一代标准，已经在2015年6月正式发布了，所以ES6也称为ES2015。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。除此之外还有ES还有其他版本，像ES5等，目前ES6还不被大多数浏览器兼容。

一、变量&常量

ES6中引入了let和const关键字，可以声明块级作用域变量和常量。与var不同的是，let和const定义的变量只在当前块级作用域内有效，不会影响其他作用域的变量。同时避免了let和var之间的变量提升问题。

示例：

function demo() {
  let x = 1;
  if (true) {
    let x = 2; // 不同于ES5，此处不会改变外面的x值
    console.log(x); // 输出2
  }
  console.log(x); // 输出1
}
demo();

二、数组

1. find() 该方法返回满足某个条件的第一个数组元素的值，如果找不到满足条件的元素，则返回undefined。

示例：

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

const result = numbers.find(number => number > 3);

console.log(result); // Output: 4

2. findIndex() 该方法返回满足某个条件的第一个数组元素的索引，如果找不到满足条件的元素，则返回-1。 

示例：

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

const index = numbers.findIndex(number => number === 3);

console.log(index); // Output: 2

3. includes() 该方法判断数组是否包含指定的元素，返回true或false。 

示例：

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

const isNumberIncluded = numbers.includes(3);

console.log(isNumberIncluded); // Output: true

4. filter() 该方法返回满足某个条件的所有数组元素的值组成的新数组。 

示例：

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

const filteredNumbers = numbers.filter(number => number % 2 === 0);

console.log(filteredNumbers); // Output: [2, 4]

5. map() 该方法返回对数组每个元素进行某种操作后的结果组成的新数组。 示例：map() 该方法返回对数组每个元素进行某种操作后的结果组成的新数组。 

示例：

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

const doubledNumbers = numbers.map(number => number * 2);

console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

6. reduce() 该方法对数组元素进行累加、累减等操作，返回一个最终的值。 

示例：

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

const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);

console.log(sum); // Output: 15

三、箭头函数

箭头函数是一种新的函数声明方式，它非常简洁，能够避免this指向问题。箭头函数使用 => 符号来分割参数列表和函数体，其中如果函数体只有一行代码，则可以省略花括号。

示例：

const arr = [1, 2, 3];
// ES5写法
arr.map(function (item) {
  return item * 2;
});

// ES6写法
arr.map(item => item * 2);

四、模板字符串

模板字符串允许嵌入表达式、变量和函数调用等内容，从而使生成HTML、JSON等结构更加方便。在模板字符串中，可以使用${}包裹变量或表达式。

示例：

const name = 'John';
const age = 30;
console.log(`My name is ${name} and I'm ${age} years old.`);
// 输出: My name is John and I'm 30 years old.

五、解构赋值

解构赋值是一种快速轻松地将数组或对象的元素分配到变量中的方式。在ES6中，我们可以使用花括号或方括号来解构赋值。

示例：

// 数组解构赋值
const [a, b] = [1, 2];
console.log(a); // 输出1
console.log(b); // 输出2

// 对象解构赋值
const obj = { x: 1, y: 2 };
const { x, y } = obj;
console.log(x); // 输出1
console.log(y); // 输出2

六、扩展运算符

扩展运算符可以将数组或对象展开成独立的元素，并且支持在函数调用时传递不定数量的参数。

示例：

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

// 对象展开
const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1, z: 3 };
console.log(obj2); // 输出{x: 1, y: 2, z: 3}

// 函数调用
function add(x, y, z) {
  return x + y + z;
}
const arr = [1, 2, 3];
console.log(add(...arr)); // 输出6

七、函数默认参数

默认参数使函数参数更加灵活，允许函数定义时为参数设置默认值，从而在调用时可以省略这些参数。如果不传递默认参数，则使用函数定义时指定的默认值。

示例：

function add(x = 1, y = 2) {
  return x + y;
}
console.log(add()); // 输出3
console.log(add(2)); // 输出4
console.log(add(2, 3)); // 输出5

八、类和继承

ES6引入了class关键字，允许开发者更加方便地实现面向对象编程，并且支持继承和多态性。使用class关键字声明类时，我们可以定义构造函数、类方法和静态方法等内容。

示例：

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Cat extends Animal {
  constructor(name) {
    super(name);
  }
  speak() {
    console.log(`${this.name} meows.`);
  }
}

const animal = new Animal('Animal');
const cat = new Cat('Whiskers');

animal.speak(); // 输出Animal makes a noise.
cat.speak(); // 输出Whiskers meows.

九、模块化

ES6支持模块化开发，可以轻松地将代码划分为小型、可重用的功能块，增强了代码的可读性和可维护性。在一个模块中，我们只需要将需要导出的变量或函数用export关键字导出，然后在其他模块中使用import关键字引入即可。

示例：

// 模块1
export const PI = 3.14;
export function add(x, y) {
  return x + y;
}

// 模块2
import { PI, add } from './module1';
console.log(PI); // 输出3.14
console.log(add(1, 2)); // 输出3

十、Promise对象

Promise是一种全新的异步编程方式，支持链式操作，从而更好地处理异步请求和回调函数。Promise对象有三种状态：pending（等待状态）、fulfilled（已完成）和rejected（已拒绝），一旦Promise对象的状态发生改变，就会触发相应的回调函数。

示例：

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('data');
    }, 1000);
  });
}

getData()
  .then(data => console.log(data)) // 输出data
  .catch(error => console.log(error));

以上就是一些重要的 ES6 及后续版本新增的特性及。掌握这些特性，可以更加高效、简洁、可维护的编程。