前言
最新的 ECMAScript 都已经到发布到 2018 版了。
我们应该有的态度是： Stay hungry ! Stay young ！
从接触 vue 到工作中用到 vue 将近 2 年了，在开发 vue 项目中用到了很多 es6 的 api ，es6 给我的开发带来了很大便利。
本文只总结小汪在工作和面试中经常遇到的 ES6 及之后的新 api 。
有空就得多总结，一边总结，一边重温学习！！！
正文
1 let 和 const
let 的作用域与 const 命令相同：只在声明所在的块级作用域内有效。且不存在变量提升 。
1.1 let
let 所声明的变量，可以改变。
let a = 123 a = 456 // 正确，可以改变 let b = [123] b = [456] // 正确，可以改变let a = 123 a = 456 // 正确，可以改变 let b = [123] b = [456] // 正确，可以改变
1.2 const
const 声明一个只读的常量。一旦声明，常量的值就不能改变。
简单类型的数据（数值、字符串、布尔值），不可以变动
const a = 123 a = 456 // 报错，不可改变 const b = [123] b = [456] // 报错，不可以重新赋值，不可改变
复合类型的数据（主要是对象和数组），可以这样子变动
const a = [123] a.push(456) // 成功 const b = {} b.name = 'demo' // 成功
1.3 不存在变量提升
{ let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1
所以 for循环的计数器，就很合适使用 let 命令。
let a = []; for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 6
1.4 推荐
对于 数值、字符串、布尔值 经常会变的，用 let 声明。
对象、数组和函数用 const 来声明。
// 如经常用到的导出 函数 export const funA = function(){ // .... }
2 解构（Destructuring）
2.1 数组
一次性声明多个变量：
let [a, b, c] = [1, 2, 3]; console.log(a) // 1 console.log(b) // 2 console.log(c) // 3
结合扩展运算符：
let [head, ...tail] = [1, 2, 3, 4]; console.log(head) // 1 console.log(tail) // [2, 3, 4]
解构赋值允许指定默认值：
let [foo = true] = []; foo // true let [x, y = 'b'] = ['a']; // x='a', y='b'
2.2 对象
解构不仅可以用于数组，还可以用于对象。
let { a, b } = { a: "aaa", b: "bbb" }; a // "aaa" b // "bbb"
数组中，变量的取值由它 排列的位置 决定；而对象中，变量必须与 属性 同名，才能取到正确的值。
对象的解构也可以指定默认值。
let {x = 3} = {}; x // 3 let {x, y = 5} = {x: 1}; x // 1 y // 5
2.3 字符串
字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello'; a // "h" b // "e" c // "l" d // "l" e // "o"
2.4 用途
- 交换变量的值
let x = 1; let y = 2; [x, y] = [y, x];
- 从函数返回多个值
// 返回一个数组 function example() { let [a, b, c] = [1, 2, 3] return [a, b, c] } let [a, b, c] = example(); // 返回一个对象 function example() { return { foo: 1, bar: 2 }; } let { foo, bar } = example(); 1. 函数参数的默认值 function funA (a = 1, b = 2){ return a + b; } funA(3) // 5 因为 a 是 3, b 是 2 funA(3，3) // 6 因为 a 是 3, b 是 3
- 输入模块的指定方法
加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
const { SourceMapConsumer, SourceNode } = require("source-map");
在 utils.js 中：
export const function A (){ console.log('A') } export const function B (){ console.log('B') } export const function C (){ console.log('C') }
在 组件中引用时：
import { A, B, C } from "./utils.js" //调用 A() // 输出 A
3. 模板字符串（template string）
模板字符串（template string）用反引号（`）标识。
3.1 纯字符串
所有模板字符串的空格和换行，都是被保留的.
console.log(`输出值为 N, 换行`) // "输出值为 N 换行"
3.2 字符串中加变量
模板字符串中嵌入变量，需要将变量名写在 ${ } 之中
let x = 1; let y = 2; console.log(`输出值为：${x}`) // "输出值为：1" console.log(`输出值为：${x + y}`) // "输出值为：3"
3.3 模板字符串之中还能调用函数。
function fn() { return "Hello World"; } console.log(`输出值为：${fn()}`) // "输出值为：Hello World"
4. 字符串函数扩展
- includes()：返回布尔值，表示是否找到了参数字符串。
- startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
- endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
let s = 'Hello world!'; s.startsWith('Hello') // true s.endsWith('!') // true s.includes('o') // true
这三个方法都支持第二个参数，表示开始搜索的位置。
let s = 'Hello world!'; s.startsWith('world', 6) // true s.endsWith('Hello', 5) // true s.includes('Hello', 6) // false
5. 数值扩展
5.1 指数运算符
ES2016 新增了一个指数运算符（**）。
2 ** 2 // 4 2 ** 3 // 8
这个运算符的一个特点是右结合，而不是常见的左结合。多个指数运算符连用时，是从最右边开始计算的。
// 相当于 2 ** (3 ** 2) 2 ** 3 ** 2 // 512
上面代码中，首先计算的是第二个指数运算符，而不是第一个。
指数运算符可以与等号结合，形成一个新的赋值运算符（**=）。
let a = 1.5; a **= 2; // 等同于 a = a * a; let b = 4; b **= 3; // 等同于 b = b * b * b;
