【ES6 系列】 90% 的前端都会使用 ES6 来简化代码，你都用过吗？
## 前言 (介绍 ECMAScript)
最初 `JavaScript` 语言有 2 份标准：
`ECMA-262`：主标准，由 ECMA 国际组织（`Ecma International`）负责管理（为了让最初的`JavaScript` 与最初的 `JScript` 能遵循同一套标准发展而诞生的 `ECMAScript` ，正好排到了作为 `Ecma` 的 `262` 号标准，所以得到 `ECMA-262` 编号。）
`ISO/IEC 16262`：第二标准，由国际标准化组织 `ISO`（`International Standard Organization`）和国际电子技术委员会 `IEC`（`International Electrotechnical Commission`）负责管理
出于商标版权的原因，规范标准中将这门语言称为 `ECMAScript` ，所以原则上 `JavaScript` 与 `ECMAScript` 指的是同一个东西，但有时也会加以区分：
* `JavaScript`：指语言及其实现
* `ECMAScript`：指语言标准及语言版本，比如 ES6 表示语言（标准）的第 6 版
## ECMAScript 发展历史
* ECMAScript 1（1997 年 6 月）：规范第一版
* ECMAScript 2（1998 年 6 月）：为了同步 ISO 标准，引入了一些小更新
* ECMAScript 3（1999 年 12 月）：增加了正则表达式、字符串处理、控制语句（do-while、switch）、异常处理（try-catch）等众多核心特性
* ECMAScript 4（2008 年 7 月废除)：本来是一次大规模升级（静态类型、模块、命名空间等），但跨度过大，出现了分歧，最终没能推广使用
* ECMAScript 5（2009 年 12 月）：变化不大，加了一些标准库特性和严格模式
* ECMAScript-5.1（2011 年 6 月）：又一次小更新，为了同步 ISO 标准
* ECMAScript 6（2015 年 6 月）：一大波更新，实现了当年 ES4 的许多设想，并正式改为按年份命名规范版本
* ECMAScript 2016（2016 年 6 月）：第一个年度版本，与 ES6 相比，发布周期较短，新特性也相对少些
* ECMAScript 2017（2017 年 6 月）：第二个年度版本...
> 以后的 ECMAScript 版本（ES2018、ES2019、ES2020 等）都在 6 月正式获准生效
## 开始 （聚焦 ES6）
这里引用 `阮一峰` 老师的 `ES6标准入门` 一书中的总结：ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版本以后的 `JavaScript` 的下一代标准，涵盖了 `ES2015、ES2016、ES2017` 等，而 `ES2015` 则是正式名称，特指当年发布的正式版本的语言标准 市面上提到的 ES6 一般是指 `ES2015` 标准，但有时也是泛指 `下一代 JavaScript`
**本文主要讲解以下内容:**
* 块级作用域（Block scoping，ES2015）
* 解构（Destructuring，ES2015）
* 箭头函数（Arrow Functions，ES2015）
* 模板字符串（template string，ES2015）
* 剩余参数 / 展开语法（Rest and spread parameters，ES2015）
* 对象字面量简写语法（Object shorthand，ES2015）
* 数组实例的 includes() （ES2016）
* Async/await 异步语法 (ES2017)
### 块级作用域
为什么需要块级作用域?
ES5 只有全局作用域和函数作用域，没有块级作用域，这导致很多场景不合理。
* 第一种场景，内层变量可能会覆盖外层变量。
```js
var tmp = new Date()
function fn() {
console.log(tmp)
if (false) {
var tmp = 'hello world'
}
}
fn() // undefined
```
以上代码的原意是， if 代码块的外部使用外层的 tmp 变量，内部使用内层的 tmp 变量。但是，函数 `fn` 执行后，输出结果为 `undefined` ，原因在于变量提升导致内层的 tmp 变量覆盖了外层的 tmp 变量。
* 第二种场景，用来计数的循环变量泄露为全局变量。
```js
var s = 'hello'
for (var i = O; i < s.length; i++) {
console.log(s[i])
}
console.log(i) // 5
```
上面的代码中，变量 `i` 只用来控制循环，但是循环结束后，它并没有消失，而是泄露成了全局变量。
`let` 实际上为 `JavaScript` 新增了块级作用域。
```js
function fl() {
let n = 5
if (true) {
let n = 10
}
console.log(n) // 5
}
```
上面的函数有两个代码块，都声明了变量 `n`，运行后输出 `5` 。这表示外层代码块不受内层代码块的影响。如果使用 `var` 定义变量 ，最后输出的值就是 `10`
那么我们能利用`块级作用域`做什么呢？
我们先来做道面试题
```js
for (var i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i)
}, 1000)
}
// 5 5 5 5 5
```
改成 `ES6` 中的 let
```js
for (let i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i)
}, 1000)
}
// 0 1 2 3 4
```
看到这，相信聪明的你已经理解块级作用域的好处了 O(∩_∩)O
那么 `ES5` 能不能实现 `块级作用域` 的效果呢? 可以的，我们可以利用闭包
```js
for (var i = 0; i < 5; i++) {
;(function (index) {
setTimeout(() => {
console.log(index)
}, 1000)
})(i)
}
// 0 1 2 3 4
```
### 解构
> 解构 ：是将一个数据结构分解为更小的部分的过程。ES6 中，从数组和对象中提取值，对变量进行赋值。
那么解构有什么用处呢？
1. 可以大大的简化变量声明操作。
```js
// ES5
var foo = 1
var bar = 2
var baz = 3
// ES6
let [foo, bar, baz] = [1, 2, 3]
```
2. 变量交换：看起来如同镜像。赋值语句的左侧的解构模式，右侧是临时创建的数组字面量。x 被赋值为数组中的 y，y 被赋值为数组中的 x。
```js
let x = 1
let y = 2
;[x, y] = [y, x]
// x = 2, y = 1
```
3. 对象解构
```js
var obj = { x: 1, y: 2, c: 1 }
let { x, y } = obj
// x = 1
// y = 2
```
4. 字符串解构
```js
const [a, b, c, d, e] = 'hello'
// a => h
// b => e
// c => l
// d => l
// e => o
```
5. 函数参数解构
```js
const xueyue = {
name: '雪月',
age: 18,
}
function getAge({ name, age }) {
return `${name}今年${age}岁`
}
getAge(xueyue) // 雪月今年18岁
```
### 箭头函数
`ES6` 允许使用箭头 `=>` 定义函数
```js
var f = v => v
// 等同于 ES5 的
var f = function (v) {
return v
}
```
如果箭头函数不需要参数或需要多个参数，就使用圆括号代表参数部分。
```js
var f = () => 5
// 等同于 ES5 的
var f = function () {
return 5
}
var sum = (numl, num2) => numl + num2
// 等同于 ES5 的
var sum = function (numl, num2) {
return numl + num2
}
```
箭头函数可以与解构结合使用。
```js
const full = ({ first , last }) => first + ' ' + last;
// 等同于 ES5 的
function full(person) {
return person.first + ' ' + person.last;
}
```
箭头函数使得表达更加简洁
```js
const isEven = n => n % 2 === 0
const square = n => n * n
var result = values.sort((a, b) => a - b)
// 等同于 ES5 的
var result = values.sort(function (a, b) {
return a - b
})
```
上面代码只用了两行，就定义了两个简单的工具函数。如果不用箭头函数，可能就要占用多行，而且还不如现在这样写醒目。
**箭头函数使用注意点**
1. 函数体内的 `this` 对象，就是定义时所在的对象，而不是使用时所在的对象。
2. 不可以当作构造函数，也就是说，不可以使用 `new` 命令，否则会抛出一个错误。
3. 不可以使用 `arguments` 对象，该对象在函数体内不存在。如果要用，可以用 `rest` 参数代替。
4. 不可以使用 `yield` 命令，因此箭头函数不能用作 `Generator` 函数。
上面四点中，第一点尤其值得注意。`this` 对象的指向是可变的，但是在箭头函数中，它是固定的。
```js
// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id)
}, 100)
}
// 转换成ES5
function foo() {
var _this = this
setTimeout(function () {
console.log('id:', _this.id)
}, 100)
}
```
上面代码中，转换后的 `ES5` 版本清楚地说明了，箭头函数里面根本没有自己的 `this`，而是引用外层的 `this`。
### 模板字符串
> 模板字符串（ template string ）是增强版的字符串 ，用反引号 `(``)` 标识 。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
```js
const { log } = console
const name = '雪月'
const age = 18
// 普通字符串拼接
const result = name + '今年' + age + '岁'
// 使用模板字符串
const result2 = `${name}今年${age}岁`
log(result) // 雪月今年18岁
log(result2) // 雪月今年18岁
// ${} 大括号可以放入任意的 JavaScript 表达式，可以进行运算
const result3 = `${name}今年${age * 2}岁`
log(result3) // 雪月今年36岁
```
### 剩余参数 / 展开语法
ES6 引入了 rest 参数（形式为`...变量名`），用于获取函数的多余参数，这样就不需要使用 `arguments` 对象了。 `rest` 参数搭配的变量是一个数组，该变量将多余的参数放入其中。
```js
function sortNumbers() {
return Array.prototype.slice.call(arguments).sort()
}
// 使用 rest
const sortNumbers = (...numbers) => numbers.sort()
```
比较上面的两种写法可以发现， `rest` 参数的写法更自然也更简洁。
扩展运算符（ `spread` ）是三个点（...） 如同 `rest` 参数的逆运算 将一个数组转为用逗号分隔的参数序列
```js
console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
```
下面是扩展运算符取代 apply 方法的一个实际例子 应用 Math.max 方法简化求出数组中的最大元素。
```js
// ESS 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77)
```
展运算符提供了数组合并的新写法。
```js
// ESS
;[1, 2].concat(more)
// ES6
;[1, 2, ...more]
```
对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。
```js
let z = { a: 3, b: 'bb' }
let n = { ...z }
n // { a: 3, b: 'bb' }
n === z // false
```
**特别注意：** `...`扩展对象，只能做到当对象属性是 `基本数据类型` 才是 `深拷贝`，如果是 `引用数据类型`，那就是`浅拷贝`。
```js
let z = { a: 3, b: 'bb', c: { name: 'ccc' } }
let n = { ...z }
n // { a: 3, b: 'bb', c: { name: 'ccc' } }
n === z // false
n.c === z.c // true
// n.c 跟 z.c 是同一个引用地址
```
### 对象字面量简写语法
```js
const name = '雪月'
// ES5写法
const obj = {
name: name,
f: function () {
console.log(this.name)
},
}
// ES6简写
const obj2 = {
name,
f() {
console.log(this.name)
},
}
obj.f() // 雪月
obj2.f() // 雪月
```
使用 `vue` 的同学是不是感到很熟悉
```js
new Vue({
el: '#app',
data() {
return {
list: [],
}
},
})
```
### 数组实例的 includes()
Array.prototype.includes 方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的 includes 方法类似。ES2016 引入了该方法。
```js
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true
```
没有该方法之前，我们通常使用数组的 indexOf 方法，检查是否包含某个值。
```js
// ES5
if (arr.indexOf(el) !== -1) {
// ...
}
// ES6
if (arr.includes(el)) {
// ...
}
// 那么 indexOf 能不能做到类似于 includes 的写法呢？ 我们可以利用 ~ 位运算符
if (~arr.indexOf(el)) {
// ...
}
```
`indexOf` 方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符（===）进行判断，这会导致对 `NaN` 的误判。
```js
[NaN].indexOf(NaN)
// -1
```
`includes` 使用的是不一样的判断算法，就没有这个问题
```js
[NaN].includes(NaN)
// true
```
### Async/await 异步语法
```js
async function getTitle(url) {
let response = await fetch(url)
let html = await response.text()
return html.match(/<title>([\s\S]+)<\/title>/i)[1]
}
getTitle('https://tc39.github.io/ecma262/').then((res) => console.log(res))
```
上面代码中，函数 `getTitle` 内部有三个操作：`抓取网页`、`取出文本`、`匹配页面标题`。只有这三个操作全部完成，才会执行 `then` 方法里面的 `console.log`
## 结束（意犹未尽）
文章介绍了 `ES6` 常用的一些语法以及使用场景; 但是 `ES6` 内容远不止于此，感兴趣的同学可以去 `阮一峰老师的` [ES6 入门教程](https://es6.ruanyifeng.com/#README) 一书中查看详细内容。如果您认可这本书，也可以去正版渠道购买书籍。这样可以使出版社不因出版开源书籍而亏钱，进而鼓励更多的作者开源自己的书籍。
## 后记（列举API）
还有很多 `ES6` 实用的 `API` 我就简单提及一下，朋友们看看平时是否有用到
```js
;[1, 4, -5, 10].find(n => n < 0)
// -5
;[1, 5, 10, 15].findIndex((value, index, arr) => value > 9)
// 2
;[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
;[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
;[3, 8, 54, 8, 3, NaN, NaN, 'NaN', 'NaN'].filter((number, index, arr) => arr.indexOf(number) === index)
// [3, 8, 54, "NaN"] 利用filter过滤去重，注意会漏掉NaN
;[1, 2, 3, 4].map((item) => item * 2)
// [2, 4, 6, 8] 利用map返回一个新数组，不改变原数组
// 使用 reduce 求和; reduce功能极其强大 ! yyds
;[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
return accumulator + currentValue;
});
// 10
// ES2017 引入了跟 Object.keys 配套的 Object.values 和 Object.entries，作为遍历一个对象的补充手段，
// 供 for...of 循环使用。
let { keys, values, entries } = Object;
let obj = { a: 1, b: 2, c: 3 };
for (let key of keys(obj)) {
console.log(key); // 'a', 'b', 'c'
}
for (let value of values(obj)) {
console.log(value); // 1, 2, 3
}
for (let [key, value] of entries(obj)) {
console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}
``` 
