90% 前端都会的 ES6 简化代码技巧，你用过哪些？

目录

块级作用域

解构

箭头函数

模板字符串

剩余参数 / 展开语法

对象字面量简写语法

数组实例的 includes()

Async / await 异步语法

---

块级作用域

为什么需要块级作用域？

ES5只有全局作用域和函数作用域，没有块级作用域，这导致很多场景不合理。

• 第一种场景，内层变量可能会覆盖外层变量。

以上代码的原意是，if代码块外部使用外层的 tmp 变量，内部使用内部的 tmp 变量。但是，函数 fn 执行后，输出的结果为 undefined，原因在于变量提升导致内层的 tmp 变量覆盖了外层的 tmp 变量。

• 第二种场景，用来计数的循环变量泄露为全局变量。

上面代码中，变量 i 只是用来控制循环，但是循环结束后，他并没有消失，而是泄露成了全局变量。

let 实际上为 JavaScript 新增了块级作用域。

上面的函数有两个代码块，都声明了变量 n ，运行后输出 5 。这表示外层代码块不受内层代码块的影响。如果使用 var 定义变量，最后输出的值就是 10。

那么我们能利用 块级作用域 做什么呢？

我们先来做到面试题

看到这，相信聪明的你已经理解块级作用域的好处了 O(∩_∩)O

那么 ES5 能不能实现 块级作用域的效果呢？可以的，我们可以利用闭包

解构

解构：是将一个数据结构分解为更小的部分的过程。ES6中，从数组和对象中提取值，对变量进行赋值。

那么结构有什么用处呢？

1.可以大大的简化变量的声明操作。
// ES5
var foo = 1
var bar = 2
var baz = 3
// ES6
let [foo,bar,baz] = [1,2,3]

2.变量交换：看起来如同镜像。赋值语句的左侧的解构模式，右侧是临时创建的数组字面量。x 被赋值为数组中的 y，y 被赋值为数组中的x。
let x = 1
let y = 2
[x,y] = [y,x]
// x = 2, y = 1

3.对象结构
var obj = { x:1,y:2,c:1 }
let { x,y } = obj
// x = 1
// y = 2

4.字符串解构
const [a,b,c,d,e] = hello
// a => h
// b => e
// c => l
// d => l
// e => o

5.函数参数解构
const shaochang = {name:'少昌',age:18}
function getAge({ name,age }){ return `${name}今年${age}岁` }
getAge(shaochang) // 少昌今年18岁

箭头函数

ES6 允许使用箭头 => 定义的函数

var f = v => v
// 等同于ES5的
var f = function(v){ return v }

如果箭头函数不需要参数或需要多个参数，就使用圆括号代表参数部分。

var f = () => 5
// 等同于 ES5 的
var f = function (){ return 5 }
var sum = (num1,num2) => num1 + num2
// 等同于 ES5 的
var sum = function(num1, num2){ return num1 +num2 }

箭头函数可以与解构结合使用。

const full = ({ first, last }) => first + + last;
// 等同于 ES5 的
function full(person){ return person.first + + person.last; }

箭头函数表达简洁。

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 对象的指向是可变的，但是在箭头函数中，它是固定的。

// 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）是增强版的字符串，用反引号（``）标识。它可以当作普通字符串，也可以用来定义多行字符串，或者在字符串中嵌入变量。

const { log } = console
const name = wenshaochang
const age = 18
// 普通字符串拼接
const result = name + '今年' + age + '岁'
// 使用模板字符串
const result2 = `${name}今年${age}岁`
log(result) // wenshaochang今年18岁
log(result2) // wenshaochang今年18岁
// ${} 大括号可以放入任意的 JavaScript 表达式，可以进行运算
const result3 = `${name}今年${age * 2}岁`
log(result3) // wenshaochang今年36岁

剩余参数 / 展开语法

ES6 引入了 rest参数（形式为 ...变量名），用于获取函数的多余参数，这样就不需要使用 arguments 对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入其中。

function sortNumbers(){ return Array.prototype.slice.call(arguments).sort() }
// 使用 rest
const sortNumbers = (...numbers) => numbers.sort()

比较以上两种写法可以发现，rest 参数的写法更自然也更简洁。

扩展运算符（spread）是三个点（...）如同 rest 参数的逆运算 将一个数组转为用逗号分隔的参数序列

console.log(...[1, 2, 3]) // 1 2 3
console.log(1,...[2,3,4],5) // 1 2 3 4 5

下面是扩展运算符取代 apply 方法的一个实际例子，应用 Math.max 方法简化求出数组中的最大元素。

// ES5 的写法
Math.max.apply(null,[14,2,77])
// ES6 的写法
Math.max(...[14,3,77])
// 等同于
Math.max(14,3,77)

扩展运算符提供了数组合并的新写法。

// ES5
[1,2].concat(more)
// ES6
[1,2,...more]

对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

let z = { a:3, b:bb }
let n = { ...z }
n // { a:3, b:bb }
n === z // false

特别注意：... 扩展对象，只能做到当对象属性是 基本数据才是深拷贝，如果是 引入数据类型，那就是浅拷贝。

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 是同一个引用地址

对象字面量简写语法

const name = wen
// ES5 写法 const obj = { name:name, f:function(){ console.log(this.name) }, }
// ES6 简写 const obj2 = { name, f(){ console.log(this.name) } }
obj.f() // wen obj2.f() // wen

数组实例的 includes()

Array.prototype.includes 方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。ES2016引入了方法。

[1,2,3].includes(2) // true
[1,2,3].includes(4) // false
[1,2,NaN].includes(NaN) // true

没有该方法之前，我们通常使用数组的 indexOf 方法，检查是否包含某个值。

// ES5 if (arr.indexOf(el) !== -1) { // ... }
// ES6 if (arr.includes(el)) { // ... }
// 那么 indexOf 能不能做到类似于 includes 的写法呢？ 我们可以利用 ~ 位运算符 if (~arr.indexOf(el)) { // ... }

indexOf 方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符（===）进行判断，这会导致对 NaN 的误判。

;[NaN].indexOf(NaN) // -1

includes 使用的是不一样的判断算法，就没有这个问题

;[NaN].includes(NaN) // true

Async / await 异步语法

ES2017 标准引入了 async 函数，使得异步操作变得更加方便。

async 函数是什么？一句话，它就是 Generator 函数的语法糖。

async function getTitle(url) { let response = await fetch(url) let html = await response.text() return html.match(/([sS]+)/i)[1] }
getTitle( https://tc39.github.io/ecma262/ ).then((res) => console.log(res))

上面代码中，函数 getTitle 内部有三个操作：抓取网页、取出文本、匹配页面标题。只有这三个操作全部完成，才会执行 then 方法里面的 console.log