ES6理解進階【大前端高薪訓練營】

學習資料：拉勾課程《大前端高薪訓練營》
閱讀建議：文章較長，搭配文章的側邊欄目錄進行食用，體驗會更佳哦！
內容說明：本文不做知識點的搬運工，文中只記錄個人對該技術點的認識和理解以及該技術在日常開發中的使用場景

一：面向物件：類class

面向物件三大特性之封裝

封裝是面向物件的重要原則，它在代碼中的體現主要是以下兩點：

• 封裝整體：把物件的屬性和行為封裝為一個整體，其中內部成員可以分為靜態成員（也叫類成員）和實體成員，成員之間又可細分為屬性和方法，
• 訪問控制：外部對物件內部屬性和行為的訪問權限，簡單來分時就是私有和公有兩種權限，

以下是基本封裝示例：

class Animal{
    constructor(name) {
        this.name = name;// 實體屬性
    }
    
    cry() {// 實體方法
    	console.log('cry');
    }
    
    static getNum(){// 靜態方法
        return AnimalES6.num
    }
}

Animal.num = 42;// 靜態屬性

面向物件三大特性之繼承

繼承是面向物件最顯著的一個特性，它在代碼中的體現主要是以下兩點：

• 子類物件具有父類物件的屬性和行為
• 子類物件可以有它自己的屬性和行為

以下是定義一個Cat類并對上述Animal類的繼承示例：

class Cat extends Animal{
    constructor(name, type) {
        super(name);// 必須先構造父類空間
        this.type = type;
    }
	
	cry() {
		console.log('miao miao');// 方法重寫
	}
}

面向物件三大特性之多型

多型指允許不同的物件對同一訊息做出不同回應，在Java中，實作多型有以下三個條件：

• 繼承
• 重寫
• 父類參考指向子類物件

由于JavaScript是弱型別語言，所以JavaScript實作多型，不存在父類參考指向子類物件的問題，

以下再定義一個Dog類，實作Animal實體物件、Cat實體物件和Dog實體物件對同樣的cry呼叫做出不同的回應示例：

class Dog extends Animal{
    constructor(name, type) {
        super(name);
        this.type = type;
    }
	
	cry() {
		console.log('wang wang');
	}
}

const ani = new Animal('不知名動物');
const cat = new Cat('小白', '美短');
const dog= new Dog('大黑', '二哈');
ani.cry();// 輸出 cry
cat.cry();// 輸出 miao miao
dog.cry();// 輸出 wang wang

二：資料型別Symbol

Symbol是一種新的原始資料型別，用來表示獨一無二的值，此外，它也是物件屬性名的第二種資料型別（另一種是字串），

接下來列舉幾個在日常開發中可能會用到Symbol資料型別的場景：

1):消除魔法字串

魔術字串指的是，在代碼之中多次出現、與代碼形成強耦合的某一個具體的字串或者數值，風格良好的代碼，應該盡量消除魔術字串，改由含義清晰的變數代替， —阮一峰

如下含有魔法字串的代碼示例：

const obj = {type: 'type2'};
function fn1() {
	if (obj.type === 'type1') {
	    // xxx
	} else if (obj.type ==='type2') {
		// xxx
	}
}
function fn2() {
	if (obj.type === 'type1') {
	    // xxx
	} else if (obj.type ==='type2') {
		// xxx
	}
}
// ...其它對obj.type的判斷

在上述代碼中，大量出現的type1與type2字串就是魔法字串，我們分析這樣大量使用魔法字串可能會出現的問題：

• 在添加邏輯時，我們每次判斷obj的型別都需要輸入該魔法字串，這時不但沒有輸入提示需要一個一個字符輸入，而且一旦字符少輸、多輸或者輸入錯誤，都會導致代碼運行錯誤，
• 在修改邏輯時，如果type1變成了type3，那么就需要把代碼里所有的type1找到并替換成type3，

接下來使用Symbol對上述代碼改造：

const obj = {type: 'type2'};
const objType = {
  type1: Symbol(),
  type2: Symbol(),
}
function fn1() {
	if (obj.type === objType.type1) {
	    // xxx
	} else if (obj.type === objType.type2) {
		// xxx
	}
}
function fn2() {
	if (obj.type === objType.type1) {
	    // xxx
	} else if (obj.type === objType.type2) {
		// xxx
	}
}

2):實作物件的保護成員 / 私有成員

假設我們對一個物件需要做如下的訪問控制：

• attr1和attr2公有成員：外部可以訪問
• attr3和attr4保護成員：外部受限訪問，需要引入鍵attr3和attr4才能訪問
• attr5和attr6私有成員：外部不能訪問，僅支持當前模塊檔案內部訪問

以下是沒有實作訪問控制的代碼：

// index.js
export const Obj = {
  attr1: 'public Attr1',// 公有
  attr2: 'public Attr2',// 公有
  attr3: 'protect Attr3',// 保護
  attr4: 'protect Attr4',// 保護
  attr5: 'private Attr5',// 私有
  attr6: 'private Attr6',// 私有
}

接下來使用Symbol對上述代碼改造：

// protectKey.js
export const attr3 = Symbol('attr3');
export const attr4 = Symbol('attr4');

// index.js
import { attr3, attr4 } from './protect.js';

const attr5 = Symbol('attr5');
const attr6 = Symbol('attr6');

export const Obj = {
  attr1: 'public Attr1',// 公有
  attr2: 'public Attr2',// 公有
  [attr3]: 'protect Attr3',// 保護
  [attr4]: 'protect Attr4',// 保護
  [attr5]: 'private Attr5',// 私有
  [attr6]: 'private Attr6',// 私有
}

如上代碼就實作了對我們所需要的訪問控制，外部對不能訪問的成員是無法感知的，因為外部對這些不能訪問的成員不但不支持讀寫，甚至也不能遍歷和序列號操作，

在我們以往的日常開發中，我們基本上對物件的訪問控制都是設定為公有的，很少設定為私有，設定為保護的就更是沒見過，但少歸少，至少說明了ES6引入的Symbol能幫助我們實作類似Java中保護和私有成員的訪問控制，

3):實作類的保護成員、私有成員

如下示例，封裝一個集合Collection，它對模塊外部具有私有屬性size與私有方法logAdd：

const size = Symbol('size');
const logAdd = Symbol('logAdd');

export class Collection {
  constructor() {
    this[size] = 0;// 私有屬性
  }

  add(item) {
    this[this[size]] = item;
    this[size]++;
    this[logAdd]();
  }

  [logAdd]() {// 私有方法
	console.log( 'now size' + this[size])
  }
}

三：資料結構Set

Set對于JavaScript而言是一種新的資料結構，相對于陣列用于存盤有序、可重復的元素集合，Set用于存盤有序、不可重復的元素集合，

接下來列舉幾個在日常開發中可能會用到Set資料結構的場景：

1):陣列去重、字串去重等任何可迭代型別的去重

// 陣列去重
let arr = [1,1,2,3];
arr = Array.from(new Set());// 經過性能比較測驗，表現優秀
// arr = [1,2,3]

// 字串去重
let str = 'aaabbsf';
let newStr = '';
new Set(str).forEach(item) => {newStr += item});
// newStr absf

2):集合間操作：交集、并集、差集

下面截取阮一峰ES6對Set的說明案例：

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}

// （a 相對于 b 的）差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

四：資料結構Map

Map對于JavaScript而言也是一種新的資料結構，用于存盤鍵值對形式的字典 / 雙列集合，在Map物件出現之前，我們通常使用Object物件來做鍵值對的存盤，下面對比一下Map物件實作鍵值對存盤與普通物件存盤鍵值對的區別：

• 功能角度：Object物件只能使用字串或者Symbol型別作為鍵，而Map物件可以使用任何資料型別作為鍵，Map物件使用參考型別作為鍵時，以記憶體地址是否一致來作為判斷兩個鍵是否相同的標準，
• 構造與讀寫角度：Object物件字面量構造并存盤鍵值對的方式比Map方便，其讀寫操作也比Map需要呼叫get、set方法而言性能更好（性能分析工具初步對比分析），
• 常用Api角度：Object物件的原型為Object.protoype，而Map物件的原型為Map.prototype，兩者對常用的鍵值對操作都有相應的api可以呼叫，不過Map原型上定義的Api更加純粹一些，
• 序列化角度：Object物件存盤鍵值時支持序列化，而Map物件不支持，

經過上面的對比分析可以得出結論，不到必須使用參考型別作為鍵的情況下，我們都用Object物件字面量的方式來定義并存盤鍵值對會更好一些，

接下來敘述在日常開發中可能會用到Map資料結構的場景：

1)：實作物件之間的一對一、一對多、多對多（橋Map方式）的關系

經驗尚淺，日常開發示例暫時沒想到，有機會補上，但是Map結構的出現告訴了我們這些JavaScript開發者，此后在JavaScript中我們也可以很簡單的實作物件之間的映射關系，

五：迭代器Iterator和for of

遍歷器（Iterator）就是這樣一種機制，它是一種介面，為各種不同的資料結構提供統一的訪問機制，而for…of回圈是ES6 創造出的一種新的遍歷命令，它可以配合迭代器使用，只要實作了Iterator介面的任意物件就可以使用for…of回圈遍歷，

在JavaScript常見的資料結構如Array、Set、Map、偽陣列arguments等等一系列物件的原型上都有Symbol.iterator標識，并且有默認的Iterator實作，普通物件是沒有這個介面標識以及iterator的實作的，但是我們可以手動為普通物件添加這個標識以及對應的iterator實作，示例代碼如下：

// test1.js：封裝者封裝
const todos = {
  life: ['吃飯', '睡覺', '打豆豆'],
  learn: ['語文', '數學', '外語'],
  work: ['喝茶'],

  // 添加Symbol.iterator標識介面以及iterator實作
  [Symbol.iterator]: function () {
    const all = [...this.life, ...this.learn, ...this.work]
    let index = 0
    return {
      next: function () {
        return {
          value: all[index],
          done: index++ >= all.length
        }
      }
    }
  }
}

// test2.js：呼叫者遍歷
for (const item of todos) {
  console.log(item)
}

上述代碼的優點是封裝者在對外界遍歷沒有影響的情況下，對資料進行了更細粒度的管理，是一種解耦合的代碼優化操作！

六：promise、generator和Async

這三者都與異步編程有關，之后會單獨拎出來寫在另一篇博客當中，在此文中就不做贅述了，

七：模板字串和標簽函式

模板字串就不做介紹了，標簽函式在定義時和普通函式沒什么區別，區別在呼叫上，標簽函式以模板字串作為引數輸入，并且有獨特的規則完成形實參匹配，接下來看一個簡單的例子：

// 標簽函式定義
const fn = (literals, ...values) => {
  console.log('字面量陣列', literals);
  console.log('變數陣列', values);
  console.log('字面量陣列是否比變數陣列多一個元素', literals.length -1 === values.length);// true
  let output = "";
  let index; // 不能放在for里，因為index在塊級作用域之外還有訪問
  for (index = 0; index < values.length; index++) {
    output += literals[index] + values[index];
  }
  output += literals[index]
  return output;
};

// 標簽函式呼叫
const name = '張三';
const age = 18;
const result = fn`姓名：${ name }，年齡：${ age }`;

上述示例運行結果：

經過上述例子我們可以大概得知標簽函式的形實參匹配規則：

• 模板中字面量陣列的形實參匹配：模板字串以類似/${[^}]+}/g 的正則規則進行split 得到其內所有字面量組成的陣列，而后作為實參匹配標簽函式的第一個形參literals
• 模板中所有變數的形實參匹配：模板字串以 /${[^}]+}/g 的正則規則進行match找到所有的JS變數陣列，決議得到其值后，按順序作為實參匹配標簽函式剩下的形參，上例代碼中用rest剩余引數作為形參接收所有實參，

通過上面的例子和決議，我們認識了標簽函式呼叫的執行規則，根據標簽函式和模板字串的配合機制，我們很容易就想到這種機制可以實作模板引擎甚至是定義內部語言的功能，

接下來敘述在日常開發中我們可能會用到標簽函式的場景：

1):把可能作為innerHtml的string中的特殊字符轉義，使它不被決議為HTML標簽

在日常開發中，我們很可能會碰到這么一個需求：

• 一個input輸入框接收用戶的輸入
• 另一個p標簽用來展示這個用戶的輸入

先分析一下這樣做的風險：由于用戶的輸入直接作為了p標簽的內容，當用戶輸入一個<script>標簽等任意HTML標簽時，如果我們直接把它交給p標簽，那么瀏覽器就會把它當成inneHTML進行決議后執行其中的腳本或者渲染HTML，這肯定是不被期望且有風險的，所以我們在把用戶的輸入交給p標簽展示之前，應該對其中的一些特殊字符進行轉義，防止被瀏覽器決議為標簽，接下來示例中我們用標簽函式實作這個轉義程序：

 // 0.標簽函式
 function SaferHTML(templateData) {// 這里使用隱式引數arguments來訪問模板字串中的所有變數
  let s = templateData[0];
  for (let i = 1; i < arguments.length; i++) {
    let arg = String(arguments[i]);

    s += arg.replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");
    s += templateData[i];
  }
  return s;
}

 // 1.用戶輸入
let sender = '<script>alert("abc")</script>';
// 2.轉義后的用戶輸入
const safeSender = SaferHTML`${sender}`;
// 3.把safeSender渲染到標簽元素中
// xxx

2):i18n 國際化

在我們的專案中支持國際化（i18n）的邏輯本身非常簡單，只需要界面中的所有字串變數化，而后這些變數自動根據專案的當前語音渲染出該語言下的字串，使用函式式編程的思想來實作的基本思路如下：

• 輸入：需要翻譯的字串鍵
• 映射關系：根據輸入獲得輸出，具體映射邏輯與當前語言與語言包有關
• 輸出：翻譯后的字串

// 語言包resource
const enUS = {
	'Welcome to': 'Welcome to',
	'you are visitor number': 'you are visitor number'
}
const zhCN = {
	'Welcome to': '你好',
	'you are visitor number': '你的訪問號碼'
}

// 根據當前語言和語言包得到i18n標簽函式
function i18nInit(language, zhCNResource, enUSResource) {
  return (literals, ...values) => {
    let output = "";
    let index;
    let resource;
    switch (language) {    // 根據當前語言獲得語言包
      case 'zh-CN':
        resource = zhCNResource;
        break;
      case 'en-US':
        resource = enUSResource;
        break;
    }
    for (index = 0; index < values.length; index++) {
      output += resource[literals[index]] + values[index]; // 把字面量作為鍵得到語言包中對應的翻譯
    }
    output += resource[literals[index]]
    return output;
  }
}

// 翻譯語言
let currentLanguage = 'zh-CN';
const i18n = i18nInit(currentLanguage, zhCN, enUS );
i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`

3):定義語言，如 jsx

jsx標簽函式，實作了將一個含有html、css、js的模板字串決議為一個React 物件的功能，它的模板決議功能很強大，以至于我們把它稱之為一門語言，思想和原理大概如此，由于博主暫未看過jsx原始碼，下文對此不再贅述，

八：內置物件Refelect

Refelect是JavaScript的一個新內置物件（非函式型別物件），與Math物件上掛載了很多用于數學處理方面的方法一樣，Refelect物件身上掛在了一套用于操作物件的方法，

下表總結列舉了Refelect物件上的13個操作物件的靜態方法的作用，以及在Reflect出現之前的實作方案：

由上面剛剛總結出的表格內容可以得知，Reflect在物件層面以及屬性層面的Api都有相應的實作，并且比單獨的Object原型更加全面，那么我們在日常開發中如何選擇呢，出于代碼的運行性能、可讀性以及統一操作思想考慮，個人是這么選擇的，，日常簡潔的屬性讀寫、函式物件呼叫操作不用Reflect，其它都統一使用Reflect物件操作（也就是不用運算子delete、in以及重疊的Object原型上的方法），

九：內置物件Proxy

Proxy是JavaScript的一個新內置物件（函式型別物件），它的實體物件用于定義物件基本操作的自定義行為（如屬性查找、賦值、列舉、函式呼叫等），

在上述Reflect的介紹中，我們發現在日常開發中，我們可以也經常對物件進行物件層面和屬性層面的很多操作，既然是操作，那么我們就希望能夠具備對這些操作進行AOP處理的能力，也即實作代理操作，那么應該怎么做呢？ES5提供了存取器屬性get、set，這讓我們具備了代理一個物件的屬性讀寫操作以進行AOP處理的能力，但是這時候對于其它對物件操作行為的代理方案仍然沒有官方的實作方案，直到ES6的Proxy出現，這才讓我們具備了對這些各種型別的物件操作進行代理以進行AOP處理的能力（上述Reflect的13個靜態方法對應的物件操作全部都可以AOP處理），

既然Object.defineProperty和Reflect都可以代理物件操作，那么我們對比一下兩者的代理原理和優缺點以備往后甄選方案：

• 代理原理：Object.defineProperty的原理是通過將資料屬性轉變為存取器屬性的方式實作的屬性讀寫代理，而Proxy方式的原理則是這個內置Proxy物件內部有一套監聽機制，在傳入handler物件作為引數構造代理物件后，一旦代理物件的操作觸發后，就會進入handler中對應注冊的處理函式 而后可以 有選擇的使用Reflect將操作轉發被代理物件上，
• 代理局限性：Object.defineProperty始侄訓是局限于屬性層面的讀寫代理，對于物件層面以及屬性的其它操作代理它都無法實作，鑒于此，由于陣列物件push、pop等方法的存在，它對于陣列元素的讀寫代理并不方便，而使用Proxy則可以很方便的監視陣列操作，
• 自我代理：Object.defineProperty方式可以代理到自身（代理之后使用物件本身即可），也可以代理到別的物件身上（代理之后需要使用代理物件），Proxy方式只能代理到Proxy實體物件上，這一點在其它說法中是Proxy物件不需要侵入物件就可以實作代理，實際上Object.defineProperty方式也可以不侵入，

接下來敘述在日常開發中我們可能會見到 / 用到Proxy代理的場景：

1):實作屬性讀寫AOP

const person = {
  name: 'zce',
  age: 20
}

const personProxy = new Proxy(person, {
  get (target, property) {
    return property in target ? target[property] : 'default'
  },

  set (target, property, value) {
    if (property === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError(`${value} is not an int`)
      }
    }
    target[property] = value
  }
})

personProxy.age = 100
personProxy.gender = true
console.log(personProxy.name)
console.log(personProxy.xxx)

2):實作陣列操作的監視

const list = []

const listProxy = new Proxy(list, {
  set (target, property, value) {
    console.log('set', property, value)
    target[property] = value
    return true // 表示設定成功
  }
})

listProxy.push(100)
listProxy.push(100)

本文結束，謝謝觀看，
如若認可，一鍵三連，