ES6彙總（附加面試考點，冷知識點）————關於簡潔性彙總（共2200+字）

前言

文章爲個人原創手寫，內容參考部分書籍(《深入理解ES6》)與博客（阮一峯），個人的彙總與總結。
如有不對，希望指出。

話題	鏈接
es6嚴謹性	https://juejin.im/post/5eea3020f265da02ab172265
es6簡潔性	https://juejin.im/post/5ef0116df265da02ba14e261
es6原對象方法的擴展	https://juejin.im/editor/drafts/5ef0d2626fb9a058ad35cfb8
es6新概念的引入	正在更新中

ES6的重點

本人把ES6的改革從性質上分成四個部分，包括嚴謹性，簡潔性，原對象方法的擴展，以及新概念的引入

本文重點___簡潔性

ES6的引入，使前端的越來越簡潔性，可能我們過去100行的代碼，今日通過es6只需要30~40行就搞定。當然這中間需要我們不斷的積累相關的語法，已經相關語法帶來的優勢與意義。下邊將解釋一下哪些語法會帶來簡潔性。

字符串模版

說到es6帶來的簡潔性，我第一個想起的就是字符串模版。
在es6之前，我們只能用字符串拼接的功能則儘可能簡單。而且他擁有弊端，如下：

多行字符串：針對多行字符串的形式概念；
基本的字符串格式化：將字符串部分替換爲已存在的變量值的能力；
HTML 轉義：能轉換字符串以便將其安全插入到 HTML 中的能力。

而es6字符串模版,解決了上述問題。
此外，他還支持"製造替換位", “標籤化模板”

面試考點

es6字符串模版解決了什麼問題？

參考答案：

模板字面量是 ES6 的一項重要補充，允許你創建領域專用語言（ DSL ）讓字符串的創建更容
易。能將變量直接嵌入到模板字面量中，意味着開發者在組合長字符串與變量時，有了一種
比字符串拼接更爲安全的工具。
內置的多行字符串支持，是普通 JS 字符串絕對無法做到的，這使得模板字面量成爲凌駕於前
者之上的有用升級。儘管在模板字面量中允許直接使用換行，你依然可以使用 \n 或其它字
符轉義序列。

---

箭頭函數

在單頁面架構時代，萬物皆爲對象。而對象的this指向問題已經是一個棘手的問題。 箭頭函數就是爲解決函數this指向的問題而產生，且十分簡潔。當然他還有一些其他的特點。可參考下述面試題

var sum = (num1, num2) => num1 + num2;
 // 有效等價於：
var sum = function(num1, num2) {
return num1 + num2;
};

冷知識點：

箭頭函數不能修改它們的 this 綁定，因此不能被用作構造器。

面試考點：

this指向有幾種情況？

參考答案：

1.綁定事件指向事件本身
2.普通函數的，指向方法體。
3.new函數的指向當前類
4.箭頭函數，指向上級上下文
5.call/apply/bind 

---

箭頭函數跟普通函數有什麼區別

參考答案：

1. 沒有 this 、 super 、 arguments ，也沒有 new.target 綁定： this 、 super 、
arguments 、以及函數內部的 new.target 的值由所在的、最靠近的非箭頭函數來決定
（ super 詳見第四章）。
2.不能被使用 new 調用： 箭頭函數沒有 [[Construct]] 方法，因此不能被用爲構造函
數，使用 new 調用箭頭函數會拋出錯誤。
沒有原型： 既然不能對箭頭函數使用 new ，那麼它也不需要原型，也就是沒有
prototype 屬性。
3.不能更改 this ： this 的值在函數內部不能被修改，在函數的整個生命週期內其值會
保持不變。
4.沒有 arguments 對象： 既然箭頭函數沒有 arguments 綁定，你必須依賴於具名參數或
剩餘參數來訪問函數的參數。
5.不允許重複的具名參數： 箭頭函數不允許擁有重複的具名參數，無論是否在嚴格模式
下；而相對來說，傳統函數只有在嚴格模式下才禁止這種重複。

class寫法

JS在都不存在類的概念，但是可以通過構造器，然後將方法指派到該構造器的原型上。這是一種仿類結構。而es6新引入了class寫法，更是一種糖語法。

function PersonClass(name){
  this.name = name;
}

PersonClass.prototype.sayName(){
     console.log(this.name);
}

等價於

class PersonClass {
    // 等價於 PersonType 構造器
    constructor(name) {
        this.name = name;
    }
        
    sayName() {
        console.log(this.name);
    }
}

此外，class寫法，還自帶訪問器屬性。

class CustomHTMLElement {
    constructor(element) {
        this.element = element;
    }
    get html() {
        return this.element.innerHTML;
    }
    set html(value) {
        this.element.innerHTML = value;
    }
}

面試考點

class寫法與常規寫法有什麼區別呢？

參考答案：

1. 類聲明不會被提升，這與函數定義不同。類聲明的行爲與 let 相似，因此在程序的執行
到達聲明處之前，類會存在於暫時性死區內。
2. 類聲明中的所有代碼會自動運行在嚴格模式下，並且也無法退出嚴格模式。
第九章 JS的類
172
3. 類的所有方法都是不可枚舉的，這是對於自定義類型的顯著變化，後者必須用
Object.defineProperty() 才能將方法改變爲不可枚舉。
4. 類的所有方法內部都沒有 [[Construct]] ，因此使用 new 來調用它們會拋出錯誤。
5. 調用類構造器時不使用 new ，會拋出錯誤。
6. 試圖在類的方法內部重寫類名，會拋出錯誤

解構

爲了簡化提取信息的任務， ES6 新增瞭解構（destructuring ），這是將一個數據結構分解爲更小的部分的過程。
解構可以分爲下邊幾種

對象解構

用簡單的案例來說明：

let node = {
    number_0: "小明",
    number_1: "小紅",
    number_2: "小張",
    .
    .
    .
    number_9: "小甲"
};

如我們需要分別獲取前10名的參數。在es6之前只能通過：
var number_0 = node.number_0;
var number_1 = node.number_1;
var number_2 = node.number_2;
.
.
.
var number_9 = node.number_9;

而有了我們的解構函數之後，一句話搞定：
const {number_0, number_1, ...., number_9 } = node;

數組解構

let colors = [ "red", "green", "blue" ];
let [ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

我們可以通過數組解構，快速拿到數組對應的值。如上案例。

此外，我們還可以利用數組的解構，建立新數組。
let [ firstColor, ...restColors ] = colors;
此時restColors將等於 [  "green", "blue" ];
這在我們的函數接受未知數量參數時，將大大的方便。

冷知識：

1.解構賦值，如果該對象（或其他）沒有對應的值，會默認給與underfined。
但是我們可以在解構的同時給於賦值。以上述爲例：let { number_0, number_1, number_9999 = '小陳' } = node;

2.解構賦值，我們可以賦予非對象名稱。以上述爲例：let { number_0: num0, number_1: num1 } = node;這樣，我們的num0就可以直接拿到number_0的值。

3.解構取值，還支持有多次層次關係。例如：
    let person = {
        attr: {
            sex: '男'
        },
    }
   let { attr: { sex } } = person;
   這樣sex會直接指向person.attr.sex。
   同理，支持數組嵌套。

方法簡寫

var person = {
    name: "Nicholas",
    sayName: function() {
        console.log(this.name);
    }
};

而es6引入的方法簡寫，使語法變得更簡潔：
var person = {
    name: "Nicholas",
    sayName() {
        console.log(this.name);
    }
};

冪運算符

ES2016 對 JS 語法引入的唯一改進就是冪運算符（ exponentiation operator ），此數學運
算能將指數運用到底數上。 雖然已經有 Math.pow() 方法可用於冪運算，然而 JS 也是在此
方面只能調用方法而不能使用運算符的少數語言之一（並且一些開發者認爲運算符可讀性更
強、更易於檢查）。
冪運算符是兩個星號（ ** ），其左側是底數，右側則是指數，例如：

let result = 5 ** 4;
等價與
let result = 5 * 5 * 5 * 5;

---

思考題：    
let result = 2 * 5 ** 2;
console.log(result);
冪運算符的優先級在 JS 的二元運算符中是最高的：所以答案爲50

js原型簡潔寫法（setPrototypeOf/super）

我們談談ES6 就給原型引入了一些改進。

儘管ES5 添加了 Object.getPrototypeOf() 方法來從任意指定對象中獲取其原型，但仍然缺少在初始化之後更改對象原型的標準方法。ES6 通過添加 Object.setPrototypeOf()方法而改變了這種假定，此方法允許你修改任意指定對象的原型。

Object.setPrototypeOf(對象, 新原型)可以直接改變原型。

此外，我們還可以使用 super 引用的簡單原型訪問。當使用多級繼承時， super 引用就是非常強大的。

友情提示

es6嚴謹性 ： https://juejin.im/post/5eea3020f265da02ab172265

es6簡潔性 ： https://juejin.im/post/5ef0116df265da02ba14e261

es6原對象方法的擴展： https://juejin.im/post/5ef0116df265da02ba14e261

es6新概念的引入： 正在更新中

---

該文章已結束，下一篇文章，將談一下es6原對象方法的擴展，包括編碼的變化，字符串模版的擴展，函數的擴展，對象的擴展等知識點。