[[406951]]

前言 (介紹 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 只有全局作用域和函數作用域，沒有塊級作用域，這導致很多場景不合理。

•  第一種場景，內層變量可能會覆蓋外層變量。 

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

以上代碼的原意是， if 代碼塊的外部使用外層的 tmp 變量，內部使用內層的 tmp 變量。但是，函數 fn 執行后，輸出結果為 undefined ，原因在于變量提升導致內層的 tmp 變量覆蓋了外層的 tmp 變量。

•  第二種場景，用來計數的循環變量泄露為全局變量。 

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

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

let 實際上為 JavaScript 新增了塊級作用域。 

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

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

那么我們能利用塊級作用域做什么呢？

我們先來做道面試題 

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

改成 ES6 中的 let 

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

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

那么 ES5 能不能實現 塊級作用域 的效果呢? 可以的，我們可以利用閉包 

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

解構

解構 ：是將一個數據結構分解為更小的部分的過程。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 xueyue = {  
  name:  雪月 ,  
  age: 18,  
}  
function getAge({ name, age }) {  
  return `${name}今年${age}歲`  
} 
getAge(xueyue) // 雪月今年18歲  
復制代碼 

箭頭函數

ES6 允許使用箭頭 => 定義函數 

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

如果箭頭函數不需要參數或需要多個參數，就使用圓括號代表參數部分。 

var f = () => 5  
// 等同于 ES5 的  
var f = function () {  
  return 5  
}  
var sum = (numl, num2) => numl + num2  
// 等同于 ES5 的  
var sum = function (numl, num2) {  
  return numl + 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 =  雪月   
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 參數搭配的變量是一個數組，該變量將多余的參數放入其中。 

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 方法簡化求出數組中的最大元素。 

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

擴展運算符提供了數組合并的新寫法。 

//  ESS  
;[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 =  雪月   
// 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 的同學是不是感到很熟悉 

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

數組實例的 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(/<title>([sS]+)</title>/i)[1]  
}  
getTitle( https://tc39.github.io/ecma262/ ).then((res) => console.log(res))  
復制代碼 

上面代碼中，函數 getTitle 內部有三個操作：抓取網頁、取出文本、匹配頁面標題。只有這三個操作全部完成，才會執行 then 方法里面的 console.log

結束（意猶未盡）

文章介紹了 ES6 常用的一些語法以及使用場景; 但是 ES6 內容遠不止于此，感興趣的同學可以去 阮一峰老師的 ES6 入門教程 一書中查看詳細內容。如果您認可這本書，也可以去正版渠道購買書籍。這樣可以使出版社不因出版開源書籍而虧錢，進而鼓勵更多的作者開源自己的書籍。

后記（列舉API）

還有很多 ES6 實用的 API 我就簡單提及一下，朋友們看看平時是否有用到 

;[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]  
}  
復制代碼