90% 前端都會(huì)的 ES6 簡(jiǎn)化代碼技巧，你用過(guò)哪些？

作者：佚名 2021-06-23 10:32:24

文章介紹了 ES6 常用的一些語(yǔ)法以及使用場(chǎng)景; 但是 ES6 內(nèi)容遠(yuǎn)不止于此，感興趣的同學(xué)可以去阮一峰老師的 ES6 入門教程一書中查看詳細(xì)內(nèi)容。

前言 (介紹 ECMAScript)

最初 JavaScript 語(yǔ)言有 2 份標(biāo)準(zhǔn)：

ECMA-262：主標(biāo)準(zhǔn)，由 ECMA 國(guó)際組織（Ecma International）負(fù)責(zé)管理（為了讓最初的JavaScript 與最初的 JScript 能遵循同一套標(biāo)準(zhǔn)發(fā)展而誕生的 ECMAScript ，正好排到了作為 Ecma 的 262 號(hào)標(biāo)準(zhǔn)，所以得到 ECMA-262 編號(hào)。）

ISO/IEC 16262：第二標(biāo)準(zhǔn)，由國(guó)際標(biāo)準(zhǔn)化組織 ISO（International Standard Organization）和國(guó)際電子技術(shù)委員會(huì) IEC（International Electrotechnical Commission）負(fù)責(zé)管理

出于商標(biāo)版權(quán)的原因，規(guī)范標(biāo)準(zhǔn)中將這門語(yǔ)言稱為 ECMAScript ，所以原則上 JavaScript 與ECMAScript 指的是同一個(gè)東西，但有時(shí)也會(huì)加以區(qū)分：

JavaScript：指語(yǔ)言及其實(shí)現(xiàn)
ECMAScript：指語(yǔ)言標(biāo)準(zhǔn)及語(yǔ)言版本，比如 ES6 表示語(yǔ)言（標(biāo)準(zhǔn)）的第 6 版

ECMAScript 發(fā)展歷史

ECMAScript 1（1997 年 6 月）：規(guī)范第一版
ECMAScript 2（1998 年 6 月）：為了同步 ISO 標(biāo)準(zhǔn)，引入了一些小更新
ECMAScript 3（1999 年 12 月）：增加了正則表達(dá)式、字符串處理、控制語(yǔ)句（do-while、switch）、異常處理（try-catch）等眾多核心特性
ECMAScript 4（2008 年 7 月廢除)：本來(lái)是一次大規(guī)模升級(jí)（靜態(tài)類型、模塊、命名空間等），但跨度過(guò)大，出現(xiàn)了分歧，最終沒(méi)能推廣使用
ECMAScript 5（2009 年 12 月）：變化不大，加了一些標(biāo)準(zhǔn)庫(kù)特性和嚴(yán)格模式
ECMAScript-5.1（2011 年 6 月）：又一次小更新，為了同步 ISO 標(biāo)準(zhǔn)
ECMAScript 6（2015 年 6 月）：一大波更新，實(shí)現(xiàn)了當(dāng)年 ES4 的許多設(shè)想，并正式改為按年份命名規(guī)范版本
ECMAScript 2016（2016 年 6 月）：第一個(gè)年度版本，與 ES6 相比，發(fā)布周期較短，新特性也相對(duì)少些
ECMAScript 2017（2017 年 6 月）：第二個(gè)年度版本...
以后的 ECMAScript 版本（ES2018、ES2019、ES2020 等）都在 6 月正式獲準(zhǔn)生效

開(kāi)始（聚焦 ES6）

這里引用阮一峰老師的 ES6標(biāo)準(zhǔn)入門一書中的總結(jié)：ES6 既是一個(gè)歷史名詞，也是一個(gè)泛指，含義是 5.1 版本以后的 JavaScript 的下一代標(biāo)準(zhǔn)，涵蓋了 ES2015、ES2016、ES2017等，而 ES2015 則是正式名稱，特指當(dāng)年發(fā)布的正式版本的語(yǔ)言標(biāo)準(zhǔn) 市面上提到的 ES6 一般是指 ES2015 標(biāo)準(zhǔn)，但有時(shí)也是泛指下一代 JavaScript

本文主要講解以下內(nèi)容:

塊級(jí)作用域（Block scoping，ES2015）
解構(gòu)（Destructuring，ES2015）
箭頭函數(shù)（Arrow Functions，ES2015）
模板字符串（template string，ES2015）
剩余參數(shù) / 展開(kāi)語(yǔ)法（Rest and spread parameters，ES2015）
對(duì)象字面量簡(jiǎn)寫語(yǔ)法（Object shorthand，ES2015）
數(shù)組實(shí)例的 includes() （ES2016）
Async/await 異步語(yǔ)法 (ES2017)

塊級(jí)作用域

為什么需要塊級(jí)作用域?

ES5 只有全局作用域和函數(shù)作用域，沒(méi)有塊級(jí)作用域，這導(dǎo)致很多場(chǎng)景不合理。

第一種場(chǎng)景，內(nèi)層變量可能會(huì)覆蓋外層變量。

var tmp = new Date()  
function fn() {  
  console.log(tmp)  
  if (false) {  
    var tmp =  hello world   
  }  
}  
fn() // undefined  
復(fù)制代碼

以上代碼的原意是， if 代碼塊的外部使用外層的 tmp 變量，內(nèi)部使用內(nèi)層的 tmp 變量。但是，函數(shù) fn 執(zhí)行后，輸出結(jié)果為 undefined ，原因在于變量提升導(dǎo)致內(nèi)層的 tmp 變量覆蓋了外層的 tmp 變量。

第二種場(chǎng)景，用來(lái)計(jì)數(shù)的循環(huán)變量泄露為全局變量。

var s =  hello   
for (var i = O; i < s.length; i++) {  
  console.log(s[i])  
}  
console.log(i) // 5  
復(fù)制代碼

上面的代碼中，變量 i 只用來(lái)控制循環(huán)，但是循環(huán)結(jié)束后，它并沒(méi)有消失，而是泄露成了全局變量。

let 實(shí)際上為 JavaScript 新增了塊級(jí)作用域。

function fl() {  
  let n = 5  
  if (true) {  
    let n = 10  
  }  
  console.log(n) // 5  
}  
復(fù)制代碼

上面的函數(shù)有兩個(gè)代碼塊，都聲明了變量 n，運(yùn)行后輸出 5 。這表示外層代碼塊不受內(nèi)層代碼塊的影響。如果使用 var 定義變量，最后輸出的值就是 10

那么我們能利用塊級(jí)作用域做什么呢？

我們先來(lái)做道面試題

for (var i = 0; i < 5; i++) {  
  setTimeout(() => {  
    console.log(i)  
  }, 1000)  
}  
// 5 5 5 5 5  
復(fù)制代碼

改成 ES6 中的 let

for (let i = 0; i < 5; i++) {  
  setTimeout(() => {  
    console.log(i)  
  }, 1000)  
}  
// 0 1 2 3 4  
復(fù)制代碼

看到這，相信聰明的你已經(jīng)理解塊級(jí)作用域的好處了 O(∩_∩)O

那么 ES5 能不能實(shí)現(xiàn) 塊級(jí)作用域的效果呢? 可以的，我們可以利用閉包

for (var i = 0; i < 5; i++) {  
  ;(function (index) {  
    setTimeout(() => {  
      console.log(index)  
    }, 1000)  
  })(i)  
}  
// 0 1 2 3 4  
復(fù)制代碼

解構(gòu)

解構(gòu) ：是將一個(gè)數(shù)據(jù)結(jié)構(gòu)分解為更小的部分的過(guò)程。ES6 中，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值。

那么解構(gòu)有什么用處呢？

可以大大的簡(jiǎn)化變量聲明操作。

// ES5  
var foo = 1  
var bar = 2  
var baz = 3  
// ES6  
let [foo, bar, baz] = [1, 2, 3]  
復(fù)制代碼

2. 變量交換：看起來(lái)如同鏡像。賦值語(yǔ)句的左側(cè)的解構(gòu)模式，右側(cè)是臨時(shí)創(chuàng)建的數(shù)組字面量。x 被賦值為數(shù)組中的 y，y 被賦值為數(shù)組中的 x。

let x = 1  
let y = 2  
;[x, y] = [y, x]  
// x = 2, y = 1  
復(fù)制代碼

3. 對(duì)象解構(gòu)

var obj = { x: 1, y: 2, c: 1 }  
let { x, y } = obj  
// x = 1  
// y = 2  
復(fù)制代碼

4. 字符串解構(gòu)

const [a, b, c, d, e] =  hello   
// a => h  
// b => e  
// c => l  
// d => l  
// e => o  
復(fù)制代碼

5. 函數(shù)參數(shù)解構(gòu)

const xueyue = {  
  name:  雪月 ,  
  age: 18,  
}  
function getAge({ name, age }) {  
  return `${name}今年${age}歲`  
} 
getAge(xueyue) // 雪月今年18歲  
復(fù)制代碼

箭頭函數(shù)

ES6 允許使用箭頭 => 定義函數(shù)

var f = v => v  
// 等同于 ES5 的  
var f = function (v) {  
  return v  
}  
復(fù)制代碼

如果箭頭函數(shù)不需要參數(shù)或需要多個(gè)參數(shù)，就使用圓括號(hào)代表參數(shù)部分。

var f = () => 5  
// 等同于 ES5 的  
var f = function () {  
  return 5  
}  
var sum = (numl, num2) => numl + num2  
// 等同于 ES5 的  
var sum = function (numl, num2) {  
  return numl + num2  
}  
復(fù)制代碼

箭頭函數(shù)可以與解構(gòu)結(jié)合使用。

const full = ({ first , last }) => first +     + last;  
// 等同于 ES5 的  
function full(person) {  
  return person.first +     + person.last;  
}  
復(fù)制代碼

箭頭函數(shù)使得表達(dá)更加簡(jiǎn)潔

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  
})  
復(fù)制代碼

上面代碼只用了兩行，就定義了兩個(gè)簡(jiǎn)單的工具函數(shù)。如果不用箭頭函數(shù)，可能就要占用多行，而且還不如現(xiàn)在這樣寫醒目。

箭頭函數(shù)使用注意點(diǎn)

函數(shù)體內(nèi)的 this 對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。
不可以當(dāng)作構(gòu)造函數(shù)，也就是說(shuō)，不可以使用 new 命令，否則會(huì)拋出一個(gè)錯(cuò)誤。
不可以使用 arguments 對(duì)象，該對(duì)象在函數(shù)體內(nèi)不存在。如果要用，可以用 rest 參數(shù)代替。
不可以使用 yield 命令，因此箭頭函數(shù)不能用作 Generator 函數(shù)。

上面四點(diǎn)中，第一點(diǎn)尤其值得注意。this 對(duì)象的指向是可變的，但是在箭頭函數(shù)中，它是固定的。

// ES6  
function foo() {  
  setTimeout(() => {  
    console.log( id: , this.id)  
  }, 100)  
}  
// 轉(zhuǎn)換成ES5  
function foo() {  
  var _this = this   
  setTimeout(function () {  
    console.log( id: , _this.id) 
   }, 100)  
}  
復(fù)制代碼

上面代碼中，轉(zhuǎn)換后的 ES5 版本清楚地說(shuō)明了，箭頭函數(shù)里面根本沒(méi)有自己的 this，而是引用外層的 this。

模板字符串

模板字符串（ template string ）是增強(qiáng)版的字符串，用反引號(hào) (``) 標(biāo)識(shí) 。它可以當(dāng)作普通字符串使用，也可以用來(lái)定義多行字符串，或者在字符串中嵌入變量。

const { log } = console  
const name =  雪月   
const age = 18  
// 普通字符串拼接  
const result = name +  今年  + age +  歲   
// 使用模板字符串  
const result2 = `${name}今年${age}歲`  
log(result) // 雪月今年18歲  
log(result2) // 雪月今年18歲   
// ${} 大括號(hào)可以放入任意的 JavaScript 表達(dá)式，可以進(jìn)行運(yùn)算  
const result3 = `${name}今年${age * 2}歲`  
log(result3) // 雪月今年36歲  
復(fù)制代碼

剩余參數(shù) / 展開(kāi)語(yǔ)法

ES6 引入了 rest 參數(shù)（形式為...變量名），用于獲取函數(shù)的多余參數(shù)，這樣就不需要使用 arguments 對(duì)象了。rest 參數(shù)搭配的變量是一個(gè)數(shù)組，該變量將多余的參數(shù)放入其中。

function sortNumbers() {  
  return Array.prototype.slice.call(arguments).sort()  
}  
// 使用 rest  
const sortNumbers = (...numbers) => numbers.sort()  
復(fù)制代碼

比較上面的兩種寫法可以發(fā)現(xiàn)， rest 參數(shù)的寫法更自然也更簡(jiǎn)潔。

擴(kuò)展運(yùn)算符（ spread ）是三個(gè)點(diǎn)（...）如同 rest 參數(shù)的逆運(yùn)算將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列

console.log(...[1, 2, 3])  
// 1 2 3  
console.log(1, ...[2, 3, 4], 5)  
// 1 2 3 4 5  
復(fù)制代碼

下面是擴(kuò)展運(yùn)算符取代 apply 方法的一個(gè)實(shí)際例子應(yīng)用 Math.max 方法簡(jiǎn)化求出數(shù)組中的最大元素。

// ESS 的寫法  
Math.max.apply(null, [14, 3, 77])  
// ES6 的寫法  
Math.max(...[14, 3, 77])  
// 等同于  
Math.max(14, 3, 77)  
復(fù)制代碼

擴(kuò)展運(yùn)算符提供了數(shù)組合并的新寫法。

//  ESS  
;[1, 2].concat(more)  
// ES6  
;[1, 2, ...more]  
復(fù)制代碼

對(duì)象的擴(kuò)展運(yùn)算符（...）用于取出參數(shù)對(duì)象的所有可遍歷屬性，拷貝到當(dāng)前對(duì)象之中。

let z = { a: 3, b:  bb  }  
let n = { ...z }  
n // { a: 3, b:  bb  }  
n === z // false  
復(fù)制代碼

特別注意： ...擴(kuò)展對(duì)象，只能做到當(dāng)對(duì)象屬性是基本數(shù)據(jù)類型才是深拷貝，如果是引用數(shù)據(jù)類型，那就是淺拷貝。

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 是同一個(gè)引用地址  
復(fù)制代碼

對(duì)象字面量簡(jiǎn)寫語(yǔ)法

const name =  雪月   
// ES5寫法  
const obj = {  
  name: name,  
  f: function () {  
    console.log(this.name)  
  },  
}   
// ES6簡(jiǎn)寫  
const obj2 = {  
  name,  
  f() {  
    console.log(this.name)  
  },  
}   
obj.f() // 雪月  
obj2.f() // 雪月  
復(fù)制代碼

使用 vue 的同學(xué)是不是感到很熟悉

new Vue({  
  el:  #app ,  
  data() {  
    return {  
      list: [],  
    }  
  },  
})  
復(fù)制代碼

數(shù)組實(shí)例的 includes()

Array.prototype.includes 方法返回一個(gè)布爾值，表示某個(gè)數(shù)組是否包含給定的值，與字符串的 includes 方法類似。ES2016 引入了該方法。

;[1, 2, 3].includes(2) // true  
;[1, 2, 3].includes(4) // false  
;[1, 2, NaN].includes(NaN) // true  
復(fù)制代碼

沒(méi)有該方法之前，我們通常使用數(shù)組的 indexOf 方法，檢查是否包含某個(gè)值。

// ES5  
if (arr.indexOf(el) !== -1) {  
  // ...  
}  
// ES6  
if (arr.includes(el)) {  
  // ...  
}   
// 那么 indexOf 能不能做到類似于 includes 的寫法呢？ 我們可以利用 ~ 位運(yùn)算符  
if (~arr.indexOf(el)) {  
  // ...  
}  
復(fù)制代碼

indexOf 方法有兩個(gè)缺點(diǎn)，一是不夠語(yǔ)義化，它的含義是找到參數(shù)值的第一個(gè)出現(xiàn)位置，所以要去比較是否不等于-1，表達(dá)起來(lái)不夠直觀。二是，它內(nèi)部使用嚴(yán)格相等運(yùn)算符（===）進(jìn)行判斷，這會(huì)導(dǎo)致對(duì) NaN 的誤判。

;[NaN].indexOf(NaN)  
// -1  
復(fù)制代碼

includes 使用的是不一樣的判斷算法，就沒(méi)有這個(gè)問(wèn)題

;[NaN].includes(NaN)  
// true  
復(fù)制代碼

Async/await 異步語(yǔ)法

ES2017 標(biāo)準(zhǔn)引入了 async 函數(shù)，使得異步操作變得更加方便。

async 函數(shù)是什么？一句話，它就是 Generator 函數(shù)的語(yǔ)法糖。

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

上面代碼中，函數(shù) getTitle 內(nèi)部有三個(gè)操作：抓取網(wǎng)頁(yè)、取出文本、匹配頁(yè)面標(biāo)題。只有這三個(gè)操作全部完成，才會(huì)執(zhí)行 then 方法里面的 console.log

結(jié)束（意猶未盡）

文章介紹了 ES6 常用的一些語(yǔ)法以及使用場(chǎng)景; 但是 ES6 內(nèi)容遠(yuǎn)不止于此，感興趣的同學(xué)可以去阮一峰老師的 ES6 入門教程一書中查看詳細(xì)內(nèi)容。如果您認(rèn)可這本書，也可以去正版渠道購(gòu)買書籍。這樣可以使出版社不因出版開(kāi)源書籍而虧錢，進(jìn)而鼓勵(lì)更多的作者開(kāi)源自己的書籍。

后記（列舉API）

還有很多 ES6 實(shí)用的 API 我就簡(jiǎn)單提及一下，朋友們看看平時(shí)是否有用到

;[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過(guò)濾去重，注意會(huì)漏掉NaN  
;[1, 2, 3, 4].map((item) => item * 2)  
// [2, 4, 6, 8] 利用map返回一個(gè)新數(shù)組，不改變?cè)瓟?shù)組  
// 使用 reduce 求和; reduce功能極其強(qiáng)大 ! yyds  
;[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){  
  return accumulator + currentValue; 
});   
// 10   
// ES2017 引入了跟 Object.keys 配套的 Object.values 和 Object.entries，作為遍歷一個(gè)對(duì)象的補(bǔ)充手段， 
// 供 for...of 循環(huán)使用。  
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]  
}  
復(fù)制代碼