031.ES6/7 新標準的考查 · 每天一道面試題

> 題目：ES6 箭頭函數中的`this`和普通函數中的有什么不同 ### 箭頭函數箭頭函數是 ES6 中新的函數定義形式，`function name(arg1, arg2) {...}`可以使用`(arg1, arg2) => {...}`來定義。示例如下： ~~~ // JS 普通函數 var arr = [1, 2, 3] arr.map(function (item) { console.log(index) return item + 1 }) // ES6 箭頭函數 const arr = [1, 2, 3] arr.map((item, index) => { console.log(index) return item + 1 }) ~~~ 箭頭函數存在的意義，第一寫起來更加簡潔，第二可以解決 ES6 之前函數執行中`this`是全局變量的問題，看如下代碼 ~~~ function fn() { console.log('real', this) // {a: 100} ，該作用域下的 this 的真實的值 var arr = [1, 2, 3] // 普通 JS arr.map(function (item) { console.log('js', this) // window 。普通函數，這里打印出來的是全局變量，令人費解 return item + 1 }) // 箭頭函數 arr.map(item => { console.log('es6', this) // {a: 100} 。箭頭函數，這里打印的就是父作用域的 this return item + 1 }) } fn.call({a: 100}) ~~~ > 題目：ES6 模塊化如何使用？ ### Module ES6 中模塊化語法更加簡潔，直接看示例。如果只是輸出一個唯一的對象，使用`export default`即可，代碼如下 ~~~ // 創建 util1.js 文件，內容如 export default { a: 100 } // 創建 index.js 文件，內容如 import obj from './util1.js' console.log(obj) ~~~ 如果想要輸出許多個對象，就不能用`default`了，且`import`時候要加`{...}`，代碼如下 ~~~ // 創建 util2.js 文件，內容如 export function fn1() { alert('fn1') } export function fn2() { alert('fn2') } // 創建 index.js 文件，內容如 import { fn1, fn2 } from './util2.js' fn1() fn2() ~~~ > 題目：ES6 class 和普通構造函數的區別 ### class class 其實一直是 JS 的關鍵字（保留字），但是一直沒有正式使用，直到 ES6 。 ES6 的 class 就是取代之前構造函數初始化對象的形式，從語法上更加符合面向對象的寫法。例如： JS 構造函數的寫法 ~~~ function MathHandle(x, y) { this.x = x; this.y = y; } MathHandle.prototype.add = function () { return this.x + this.y; }; var m = new MathHandle(1, 2); console.log(m.add()) ~~~ 用 ES6 class 的寫法 ~~~ class MathHandle { constructor(x, y) { this.x = x; this.y = y; } add() { return this.x + this.y; } } const m = new MathHandle(1, 2); console.log(m.add()) ~~~ 注意以下幾點，全都是關于 class 語法的： * class 是一種新的語法形式，是`class Name {...}`這種形式，和函數的寫法完全不一樣 * 兩者對比，構造函數函數體的內容要放在 class 中的`constructor`函數中，`constructor`即構造器，初始化實例時默認執行 * class 中函數的寫法是`add() {...}`這種形式，并沒有`function`關鍵字使用 class 來實現繼承就更加簡單了，至少比構造函數實現繼承簡單很多。看下面例子 JS 構造函數實現繼承 ~~~ // 動物 function Animal() { this.eat = function () { console.log('animal eat') } } // 狗 function Dog() { this.bark = function () { console.log('dog bark') } } Dog.prototype = new Animal() // 哈士奇 var hashiqi = new Dog() ~~~ ES6 class 實現繼承 ~~~ class Animal { constructor(name) { this.name = name } eat() { console.log(`${this.name} eat`) } } class Dog extends Animal { constructor(name) { super(name) this.name = name } say() { console.log(`${this.name} say`) } } const dog = new Dog('哈士奇') dog.say() dog.eat() ~~~ 注意以下兩點： * 使用`extends`即可實現繼承，更加符合經典面向對象語言的寫法，如 Java * 子類的`constructor`一定要執行`super()`，以調用父類的`constructor` > 題目：ES6 中新增的數據類型有哪些？ ### Set 和 Map Set 和 Map 都是 ES6 中新增的數據結構，是對當前 JS 數組和對象這兩種重要數據結構的擴展。由于是新增的數據結構，目前尚未被大規模使用，但是作為前端程序員，提前了解是必須做到的。先總結一下兩者最關鍵的地方： * Set 類似于數組，但數組可以允許元素重復，Set 不允許元素重復 * Map 類似于對象，但普通對象的 key 必須是字符串或者數字，而 Map 的 key 可以是任何數據類型 **Set** Set 實例不允許元素有重復，可以通過以下示例證明。可以通過一個數組初始化一個 Set 實例，或者通過`add`添加元素，元素不能重復，重復的會被忽略。 ~~~ // 例1 const set = new Set([1, 2, 3, 4, 4]); console.log(set) // Set(4)?{1, 2, 3, 4} // 例2 const set = new Set(); [2, 3, 5, 4, 5, 8, 8].forEach(item => set.add(item)); for (let item of set) { console.log(item); } // 2 3 5 4 8 ~~~ Set 實例的屬性和方法有 * `size`：獲取元素數量。 * `add(value)`：添加元素，返回 Set 實例本身。 * `delete(value)`：刪除元素，返回一個布爾值，表示刪除是否成功。 * `has(value)`：返回一個布爾值，表示該值是否是 Set 實例的元素。 * `clear()`：清除所有元素，沒有返回值。 ~~~ const s = new Set(); s.add(1).add(2).add(2); // 添加元素 s.size // 2 s.has(1) // true s.has(2) // true s.has(3) // false s.delete(2); s.has(2) // false s.clear(); console.log(s); // Set(0)?{} ~~~ Set 實例的遍歷，可使用如下方法 * `keys()`：返回鍵名的遍歷器。 * `values()`：返回鍵值的遍歷器。不過由于 Set 結構沒有鍵名，只有鍵值（或者說鍵名和鍵值是同一個值），所以`keys()`和`values()`返回結果一致。 * `entries()`：返回鍵值對的遍歷器。 * `forEach()`：使用回調函數遍歷每個成員。 ~~~ let set = new Set(['aaa', 'bbb', 'ccc']); for (let item of set.keys()) { console.log(item); } // aaa // bbb // ccc for (let item of set.values()) { console.log(item); } // aaa // bbb // ccc for (let item of set.entries()) { console.log(item); } // ["aaa", "aaa"] // ["bbb", "bbb"] // ["ccc", "ccc"] set.forEach((value, key) => console.log(key + ' : ' + value)) // aaa : aaa // bbb : bbb // ccc : ccc ~~~ **Map** Map 的用法和普通對象基本一致，先看一下它能用非字符串或者數字作為 key 的特性。 ~~~ const map = new Map(); const obj = {p: 'Hello World'}; map.set(obj, 'OK') map.get(obj) // "OK" map.has(obj) // true map.delete(obj) // true map.has(obj) // false ~~~ 需要使用`new Map()`初始化一個實例，下面代碼中`set``get``has``delete`顧名即可思義（下文也會演示）。其中，`map.set(obj, 'OK')`就是用對象作為的 key （不光可以是對象，任何數據類型都可以），并且后面通過`map.get(obj)`正確獲取了。 Map 實例的屬性和方法如下： * `size`：獲取成員的數量 * `set`：設置成員 key 和 value * `get`：獲取成員屬性值 * `has`：判斷成員是否存在 * `delete`：刪除成員 * `clear`：清空所有 ~~~ const map = new Map(); map.set('aaa', 100); map.set('bbb', 200); map.size // 2 map.get('aaa') // 100 map.has('aaa') // true map.delete('aaa') map.has('aaa') // false map.clear() ~~~ Map 實例的遍歷方法有： * `keys()`：返回鍵名的遍歷器。 * `values()`：返回鍵值的遍歷器。 * `entries()`：返回所有成員的遍歷器。 * `forEach()`：遍歷 Map 的所有成員。 ~~~ const map = new Map(); map.set('aaa', 100); map.set('bbb', 200); for (let key of map.keys()) { console.log(key); } // "aaa" // "bbb" for (let value of map.values()) { console.log(value); } // 100 // 200 for (let item of map.entries()) { console.log(item[0], item[1]); } // aaa 100 // bbb 200 // 或者 for (let [key, value] of map.entries()) { console.log(key, value); } // aaa 100 // bbb 200 ~~~ ### Promise `Promise`是 CommonJS 提出來的這一種規范，有多個版本，在 ES6 當中已經納入規范，原生支持 Promise 對象，非 ES6 環境可以用類似 Bluebird、Q 這類庫來支持。 `Promise`可以將回調變成鏈式調用寫法，流程更加清晰，代碼更加優雅。簡單歸納下 Promise：**三個狀態、兩個過程、一個方法**，快速記憶方法：**3-2-1** 三個狀態：`pending`、`fulfilled`、`rejected` 兩個過程： * pending→fulfilled（resolve） * pending→rejected（reject）一個方法：`then` 當然還有其他概念，如`catch`、`Promise.all/race`，這里就不展開了。關于 ES6/7 的考查內容還有很多，本小節就不逐一介紹了，如果想繼續深入學習，可以在線看《[ES6入門](http://es6.ruanyifeng.com/)》。