defer 和 async 的區別在于：

defer 要等到整個頁面在內存中正常渲染結束（DOM 結構完全生成，以及其他腳本執行完成），在window.onload 之前執行；

async 一旦下載完，渲染引擎就會中斷渲染，執行這個腳本以后，再繼續渲染。

如果有多個 defer 腳本，會按照它們在頁面出現的順序加載

多個 async 腳本不能保證加載順序

動態創建 script 標簽

動態創建的 script ，設置 src 并不會開始下載，而是要添加到文檔中，JS文件才會開始下載。

let script = document.createElement("script");
script.src = "XXX.js";
// 添加到html文件中才會開始下載
document.body.append(script);

XHR 異步加載JS

let xhr = new XMLHttpRequest();
xhr.open("get", "js/xxx.js",true);
xhr.send();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        eval(xhr.responseText);
    }
}

ES5 有 6 種方式可以實現繼承，分別為：

1. 原型鏈繼承

原型鏈繼承的基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。

function SuperType() {
    this.name = "Yvette";
    this.colors = ["pink", "blue", "green"];
}
SuperType.prototype.getName = function () {
    return this.name;
}
function SubType() {
    this.age = 22;
}
SubType.prototype = new SuperType();
SubType.prototype.getAge = function() {
    return this.age;
}
SubType.prototype.constructor = SubType;
let instance1 = new SubType();
instance1.colors.push("yellow");
console.log(instance1.getName()); //"Yvette"
console.log(instance1.colors);//[ "pink", "blue", "green", "yellow" ]

let instance2 = new SubType();
console.log(instance2.colors);//[ "pink", "blue", "green", "yellow" ]

缺點：

通過原型來實現繼承時，原型會變成另一個類型的實例，原先的實例屬性變成了現在的原型屬性，該原型的引用類型屬性會被所有的實例共享。

在創建子類型的實例時，沒有辦法在不影響所有對象實例的情況下給超類型的構造函數中傳遞參數。

2. 借用構造函數

借用構造函數的技術，其基本思想為:

在子類型的構造函數中調用超類型構造函數。

function SuperType(name) {
    this.name = name;
    this.colors = ["pink", "blue", "green"];
}
function SubType(name) {
    SuperType.call(this, name);
}
let instance1 = new SubType("Yvette");
instance1.colors.push("yellow");
console.log(instance1.colors);//["pink", "blue", "green", yellow]

let instance2 = new SubType("Jack");
console.log(instance2.colors); //["pink", "blue", "green"]

優點:

可以向超類傳遞參數

解決了原型中包含引用類型值被所有實例共享的問題

缺點:

方法都在構造函數中定義，函數復用無從談起，另外超類型原型中定義的方法對于子類型而言都是不可見的。

3. 組合繼承(原型鏈 + 借用構造函數)

組合繼承指的是將原型鏈和借用構造函數技術組合到一塊，從而發揮二者之長的一種繼承模式。基本思路：

使用原型鏈實現對原型屬性和方法的繼承，通過借用構造函數來實現對實例屬性的繼承，既通過在原型上定義方法來實現了函數復用，又保證了每個實例都有自己的屬性。

function SuperType(name) {
    this.name = name;
    this.colors = ["pink", "blue", "green"];
}
SuperType.prototype.sayName = function () {
    console.log(this.name);
}
function SuberType(name, age) {
    SuperType.call(this, name);
    this.age = age;
}
SuberType.prototype = new SuperType();
SuberType.prototype.constructor = SuberType;
SuberType.prototype.sayAge = function () {
    console.log(this.age);
}
let instance1 = new SuberType("Yvette", 20);
instance1.colors.push("yellow");
console.log(instance1.colors); //[ "pink", "blue", "green", "yellow" ]
instance1.sayName(); //Yvette

let instance2 = new SuberType("Jack", 22);
console.log(instance2.colors); //[ "pink", "blue", "green" ]
instance2.sayName();//Jack

缺點:

無論什么情況下，都會調用兩次超類型構造函數：一次是在創建子類型原型的時候，另一次是在子類型構造函數內部。

優點:

可以向超類傳遞參數

每個實例都有自己的屬性

實現了函數復用

4. 原型式繼承

原型繼承的基本思想：

借助原型可以基于已有的對象創建新對象，同時還不必因此創建自定義類型。

function object(o) {
    function F() { }
    F.prototype = o;
    return new F();
}

在 object() 函數內部，先穿甲一個臨時性的構造函數，然后將傳入的對象作為這個構造函數的原型，最后返回了這個臨時類型的一個新實例，從本質上講，object() 對傳入的對象執行了一次淺拷貝。

ECMAScript5通過新增 Object.create()方法規范了原型式繼承。這個方法接收兩個參數：一個用作新對象原型的對象和（可選的）一個為新對象定義額外屬性的對象(可以覆蓋原型對象上的同名屬性)，在傳入一個參數的情況下，Object.create() 和 object() 方法的行為相同。

var person = {
    name: "Yvette",
    hobbies: ["reading", "photography"]
}
var person1 = Object.create(person);
person1.name = "Jack";
person1.hobbies.push("coding");
var person2 = Object.create(person);
person2.name = "Echo";
person2.hobbies.push("running");
console.log(person.hobbies);//[ "reading", "photography", "coding", "running" ]
console.log(person1.hobbies);//[ "reading", "photography", "coding", "running" ]

在沒有必要創建構造函數，僅讓一個對象與另一個對象保持相似的情況下，原型式繼承是可以勝任的。

缺點:

同原型鏈實現繼承一樣，包含引用類型值的屬性會被所有實例共享。

5. 寄生式繼承

寄生式繼承是與原型式繼承緊密相關的一種思路。寄生式繼承的思路與寄生構造函數和工廠模式類似，即創建一個僅用于封裝繼承過程的函數，該函數在內部已某種方式來增強對象，最后再像真地是它做了所有工作一樣返回對象。

function createAnother(original) {
    var clone = object(original);//通過調用函數創建一個新對象
    clone.sayHi = function () {//以某種方式增強這個對象
        console.log("hi");
    };
    return clone;//返回這個對象
}
var person = {
    name: "Yvette",
    hobbies: ["reading", "photography"]
};

var person2 = createAnother(person);
person2.sayHi(); //hi

基于 person 返回了一個新對象 -—— person2，新對象不僅具有 person 的所有屬性和方法，而且還有自己的 sayHi() 方法。在考慮對象而不是自定義類型和構造函數的情況下，寄生式繼承也是一種有用的模式。

缺點：

使用寄生式繼承來為對象添加函數，會由于不能做到函數復用而效率低下。

同原型鏈實現繼承一樣，包含引用類型值的屬性會被所有實例共享。

6. 寄生組合式繼承

所謂寄生組合式繼承，即通過借用構造函數來繼承屬性，通過原型鏈的混成形式來繼承方法，基本思路：

不必為了指定子類型的原型而調用超類型的構造函數，我們需要的僅是超類型原型的一個副本，本質上就是使用寄生式繼承來繼承超類型的原型，然后再將結果指定給子類型的原型。寄生組合式繼承的基本模式如下所示：

function inheritPrototype(subType, superType) {
    var prototype = object(superType.prototype); //創建對象
    prototype.constructor = subType;//增強對象
    subType.prototype = prototype;//指定對象
}

第一步：創建超類型原型的一個副本

第二步：為創建的副本添加 constructor 屬性

第三步：將新創建的對象賦值給子類型的原型

至此，我們就可以通過調用 inheritPrototype 來替換為子類型原型賦值的語句：

function SuperType(name) {
    this.name = name;
    this.colors = ["pink", "blue", "green"];
}
//...code
function SuberType(name, age) {
    SuperType.call(this, name);
    this.age = age;
}
SuberType.prototype = new SuperType();
inheritPrototype(SuberType, SuperType);
//...code

優點:

只調用了一次超類構造函數，效率更高。避免在SuberType.prototype上面創建不必要的、多余的屬性，與其同時，原型鏈還能保持不變。

因此寄生組合繼承是引用類型最理性的繼承范式。

隱藏類型

屏幕并不是唯一的輸出機制，比如說屏幕上看不見的元素（隱藏的元素），其中一些依然能夠被讀屏軟件閱讀出來（因為讀屏軟件依賴于可訪問性樹來闡述）。為了消除它們之間的歧義，我們將其歸為三大類：

完全隱藏：元素從渲染樹中消失，不占據空間。

視覺上的隱藏：屏幕中不可見，占據空間。

語義上的隱藏：讀屏軟件不可讀，但正常占據空。

完全隱藏

1.display 屬性

display: none;

2.hidden 屬性

HTML5 新增屬性，相當于 display: none

視覺上的隱藏

1.利用 position 和 盒模型 將元素移出可視區范圍

設置 posoition 為 absolute 或 fixed，通過設置 top、left 等值，將其移出可視區域。

position:absolute;
left: -99999px;

設置 position 為 relative，通過設置 top、left 等值，將其移出可視區域。

position: relative;
left: -99999px;
height: 0

設置 margin 值，將其移出可視區域范圍（可視區域占位）。

margin-left: -99999px;
height: 0;

2.利用 transfrom

縮放

transform: scale(0);
height: 0;

移動 translateX, translateY

transform: translateX(-99999px);
height: 0

旋轉 rotate

transform: rotateY(90deg);

3.設置其大小為0

寬高為0，字體大小為0：

height: 0;
width: 0;
font-size: 0;

寬高為0，超出隱藏:

height: 0;
width: 0;
overflow: hidden;

4.設置透明度為0

opacity: 0;

5.visibility屬性

visibility: hidden;

6.層級覆蓋，z-index 屬性

position: relative;
z-index: -999;

再設置一個層級較高的元素覆蓋在此元素上。

7.clip-path 裁剪

clip-path: polygon(0 0, 0 0, 0 0, 0 0);

語義上的隱藏

aria-hidden 屬性

讀屏軟件不可讀，占據空間，可見。

1.let/const 定義的變量不會出現變量提升，而 var 定義的變量會提升。

2.相同作用域中，let 和 const 不允許重復聲明，var 允許重復聲明。

3.const 聲明變量時必須設置初始值

4.const 聲明一個只讀的常量，這個常量不可改變。

這里有一個非常重要的點即是：在JS中，復雜數據類型，存儲在棧中的是堆內存的地址，存在棧中的這個地址是不變的，但是存在堆中的值是可以變得。有沒有相當常量指針/指針常量~

const a = 20;
const b = {
    age: 18,
    star: 500
}

一圖勝萬言，如下圖所示，不變的是棧內存中 a 存儲的 20，和 b 中存儲的 0x0012ff21（瞎編的一個數字）。而 {age: 18, star: 200} 是可變的。

在開始說明JS上下文棧和作用域之前，我們先說明下JS上下文以及作用域的概念。

執行上下文就是當前 JavaScript 代碼被解析和執行時所在環境的抽象概念， JavaScript 中運行任何的代碼都是在執行上下文中運行。

執行上下文類型分為：

全局執行上下文

函數執行上下文

執行上下文創建過程中，需要做以下幾件事:

創建變量對象：首先初始化函數的參數arguments，提升函數聲明和變量聲明。

創建作用域鏈（Scope Chain）：在執行期上下文的創建階段，作用域鏈是在變量對象之后創建的。

確定this的值，即 ResolveThisBinding

作用域負責收集和維護由所有聲明的標識符（變量）組成的一系列查詢，并實施一套非常嚴格的規則，確定當前執行的代碼對這些標識符的訪問權限。—— 摘錄自《你不知道的JavaScript》(上卷)

作用域有兩種工作模型：詞法作用域和動態作用域，JS采用的是詞法作用域工作模型，詞法作用域意味著作用域是由書寫代碼時變量和函數聲明的位置決定的。(with 和 eval 能夠修改詞法作用域，但是不推薦使用，對此不做特別說明)

作用域分為：

全局作用域

函數作用域

塊級作用域

執行棧，也叫做調用棧，具有 LIFO (后進先出) 結構，用于存儲在代碼執行期間創建的所有執行上下文。

規則如下：

首次運行JavaScript代碼的時候,會創建一個全局執行的上下文并Push到當前的執行棧中，每當發生函數調用，引擎都會為該函數創建一個新的函數執行上下文并Push當前執行棧的棧頂。

當棧頂的函數運行完成后，其對應的函數執行上下文將會從執行棧中Pop出，上下文的控制權將移動到當前執行棧的下一個執行上下文。

以一段代碼具體說明：

function fun3() {
    console.log("fun3")
}

function fun2() {
    fun3();
}

function fun1() {
    fun2();
}

fun1();

Global Execution Context (即全局執行上下文)首先入棧，過程如下：

偽代碼:

//全局執行上下文首先入棧
ECStack.push(globalContext);

//執行fun1();
ECStack.push( functionContext);

//fun1中又調用了fun2;
ECStack.push( functionContext);

//fun2中又調用了fun3;
ECStack.push( functionContext);

//fun3執行完畢
ECStack.pop();

//fun2執行完畢
ECStack.pop();

//fun1執行完畢
ECStack.pop();

//javascript繼續順序執行下面的代碼，但ECStack底部始終有一個 全局上下文（globalContext）;

作用域鏈就是從當前作用域開始一層一層向上尋找某個變量，直到找到全局作用域還是沒找到，就宣布放棄。這種一層一層的關系，就是作用域鏈。

如：

var a = 10;
function fn1() {
    var b = 20;
    console.log(fn2)
    function fn2() {
        a = 20
    }
    return fn2;
}
fn1()();

fn2作用域鏈 = [fn2作用域, fn1作用域，全局作用域]

防抖函數的作用

防抖函數的作用就是控制函數在一定時間內的執行次數。防抖意味著N秒內函數只會被執行一次，如果N秒內再次被觸發，則重新計算延遲時間。

舉例說明： 小思最近在減肥，但是她非常吃吃零食。為此，與其男朋友約定好，如果10天不吃零食，就可以購買一個包(不要問為什么是包，因為包治百病)。但是如果中間吃了一次零食，那么就要重新計算時間，直到小思堅持10天沒有吃零食，才能購買一個包。所以，管不住嘴的小思，沒有機會買包(悲傷的故事)... 這就是 防抖。

防抖函數實現

事件第一次觸發時，timer 是 null，調用 later()，若 immediate 為true，那么立即調用 func.apply(this, params)；如果 immediate 為 false，那么過 wait 之后，調用 func.apply(this, params)

事件第二次觸發時，如果 timer 已經重置為 null(即 setTimeout 的倒計時結束)，那么流程與第一次觸發時一樣，若 timer 不為 null(即 setTimeout 的倒計時未結束)，那么清空定時器，重新開始計時。

function debounce(func, wait, immediate = true) {
    let timeout, result;
    // 延遲執行函數
    const later = (context, args) => setTimeout(() => {
        timeout = null;// 倒計時結束
        if (!immediate) {
            //執行回調
            result = func.apply(context, args);
            context = args = null;
        }
    }, wait);
    let debounced = function (...params) {
        if (!timeout) {
            timeout = later(this, params);
            if (immediate) {
                //立即執行
                result = func.apply(this, params);
            }
        } else {
            clearTimeout(timeout);
            //函數在每個等待時延的結束被調用
            timeout = later(this, params);
        }
        return result;
    }
    //提供在外部清空定時器的方法
    debounced.cancel = function () {
        clearTimeout(timer);
        timer = null;
    };
    return debounced;
};

immediate 為 true 時，表示函數在每個等待時延的開始被調用。immediate 為 false 時，表示函數在每個等待時延的結束被調用。

防抖的應用場景

搜索框輸入查詢，如果用戶一直在輸入中，沒有必要不停地調用去請求服務端接口，等用戶停止輸入的時候，再調用，設置一個合適的時間間隔，有效減輕服務端壓力。

表單驗證

按鈕提交事件。

瀏覽器窗口縮放，resize事件(如窗口停止改變大小之后重新計算布局)等。

節流函數的作用

節流函數的作用是規定一個單位時間，在這個單位時間內最多只能觸發一次函數執行，如果這個單位時間內多次觸發函數，只能有一次生效。

節流函數實現

function throttle(func, wait, options = {}) {
    var timeout, context, args, result;
    var previous = 0;
    var later = function () {
        previous = options.leading === false ? 0 : (Date.now() || new Date().getTime());
        timeout = null;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
    };

    var throttled = function () {
        var now = Date.now() || new Date().getTime();
        if (!previous && options.leading === false) previous = now;
        //remaining 為距離下次執行 func 的時間
        //remaining > wait，表示客戶端系統時間被調整過
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
        //remaining 小于等于0，表示事件觸發的間隔時間大于設置的 wait
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                //清空定時器
                clearTimeout(timeout);
                timeout = null;
            }
            //重置 previous
            previous = now;
            //執行函數
            result = func.apply(context, args); 
            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            timeout = setTimeout(later, remaining);
        }
        return result;
    };

    throttled.cancel = function () {
        clearTimeout(timeout);
        previous = 0;
        timeout = context = args = null;
    };

    return throttled;
}

禁用第一次首先執行，傳遞 {leading: false} ；想禁用最后一次執行，傳遞 {trailing: false}

節流的應用場景

按鈕點擊事件

拖拽事件

onScoll

計算鼠標移動的距離(mousemove)

閉包的定義

《JavaScript高級程序設計》:

閉包是指有權訪問另一個函數作用域中的變量的函數

《JavaScript權威指南》：

從技術的角度講，所有的JavaScript函數都是閉包：它們都是對象，它們都關聯到作用域鏈。

《你不知道的JavaScript》

當函數可以記住并訪問所在的詞法作用域時，就產生了閉包，即使函數是在當前詞法作用域之外執行。

創建一個閉包

function foo() {
    var a = 2;
    return function fn() {
        console.log(a);
    }
}
let func = foo();
func(); //輸出2

閉包使得函數可以繼續訪問定義時的詞法作用域。拜 fn 所賜，在 foo() 執行后，foo 內部作用域不會被銷毀。

閉包的作用

能夠訪問函數定義時所在的詞法作用域(阻止其被回收)。

私有化變量

function base() {
    let x = 10; //私有變量
    return {
        getX: function() {
            return x;
        }
    }
}
let obj = base();
console.log(obj.getX()); //10

模擬塊級作用域

var a = [];
for (var i = 0; i < 10; i++) {
    a[i] = (function(j){
        return function () {
            console.log(j);
        }
    })(i);
}
a[6](); // 6

創建模塊

function coolModule() {
    let name = "Yvette";
    let age = 20;
    function sayName() {
        console.log(name);
    }
    function sayAge() {
        console.log(age);
    }
    return {
        sayName,
        sayAge
    }
}
let info = coolModule();
info.sayName(); //"Yvette"

模塊模式具有兩個必備的條件(來自《你不知道的JavaScript》)

必須有外部的封閉函數，該函數必須至少被調用一次(每次調用都會創建一個新的模塊實例)

封閉函數必須返回至少一個內部函數，這樣內部函數才能在私有作用域中形成閉包，并且可以訪問或者修改私有的狀態。

在實現 Promise.all 方法之前，我們首先要知道 Promise.all 的功能和特點，因為在清楚了 Promise.all 功能和特點的情況下，我們才能進一步去寫實現。

Promise.all 功能

Promise.all(iterable) 返回一個新的 Promise 實例。此實例在 iterable 參數內所有的 promise 都 fulfilled 或者參數中不包含 promise 時，狀態變成 fulfilled；如果參數中 promise 有一個失敗rejected，此實例回調失敗，失敗原因的是第一個失敗 promise 的返回結果。

let p = Promise.all([p1, p2, p3]);

p的狀態由 p1,p2,p3決定，分成以下；兩種情況：

（1）只有p1、p2、p3的狀態都變成 fulfilled，p的狀態才會變成 fulfilled，此時p1、p2、p3的返回值組成一個數組，傳遞給p的回調函數。

（2）只要p1、p2、p3之中有一個被 rejected，p的狀態就變成 rejected，此時第一個被reject的實例的返回值，會傳遞給p的回調函數。

Promise.all 的特點

Promise.all 的返回值是一個 promise 實例

如果傳入的參數為空的可迭代對象，Promise.all 會 同步 返回一個已完成狀態的 promise

如果傳入的參數中不包含任何 promise,Promise.all 會 異步 返回一個已完成狀態的 promise

其它情況下，Promise.all 返回一個 處理中（pending） 狀態的 promise.

Promise.all 返回的 promise 的狀態

如果傳入的參數中的 promise 都變成完成狀態，Promise.all 返回的 promise 異步地變為完成。

如果傳入的參數中，有一個 promise 失敗，Promise.all 異步地將失敗的那個結果給失敗狀態的回調函數，而不管其它 promise 是否完成

在任何情況下，Promise.all 返回的 promise 的完成狀態的結果都是一個數組

Promise.all 實現

Promise.all = function (promises) {
    //promises 是可迭代對象，省略參數合法性檢查
    return new Promise((resolve, reject) => {
        //Array.from 將可迭代對象轉換成數組
        promises = Array.from(promises);
        if (promises.length === 0) {
            resolve([]);
        } else {
            let result = [];
            let index = 0;
            for (let i = 0;  i < promises.length; i++ ) {
                //考慮到 i 可能是 thenable 對象也可能是普通值
                Promise.resolve(promises[i]).then(data => {
                    result[i] = data;
                    if (++index === promises.length) {
                        //所有的 promises 狀態都是 fulfilled，promise.all返回的實例才變成 fulfilled 態
                        resolve(result);
                    }
                }, err => {
                    reject(err);
                    return;
                });
            }
        }
    });
}

例如:

flattenDeep([1, [2, [3, [4]], 5]]); //[1, 2, 3, 4, 5]

利用 Array.prototype.flat

ES6 為數組實例新增了 flat 方法，用于將嵌套的數組“拉平”，變成一維的數組。該方法返回一個新數組，對原數組沒有影響。

flat 默認只會 “拉平” 一層，如果想要 “拉平” 多層的嵌套數組，需要給 flat 傳遞一個整數，表示想要拉平的層數。

function flattenDeep(arr, deepLength) {
    return arr.flat(deepLength);
}
console.log(flattenDeep([1, [2, [3, [4]], 5]], 3));

當傳遞的整數大于數組嵌套的層數時，會將數組拉平為一維數組，JS能表示的最大數字為 Math.pow(2, 53) - 1，因此我們可以這樣定義 flattenDeep 函數

function flattenDeep(arr) {
    //當然，大多時候我們并不會有這么多層級的嵌套
    return arr.flat(Math.pow(2,53) - 1); 
}
console.log(flattenDeep([1, [2, [3, [4]], 5]]));

利用 reduce 和 concat

function flattenDeep(arr){
    return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
}
console.log(flattenDeep([1, [2, [3, [4]], 5]]));

使用 stack 無限反嵌套多層嵌套數組

function flattenDeep(input) {
    const stack = [...input];
    const res = [];
    while (stack.length) {
        // 使用 pop 從 stack 中取出并移除值
        const next = stack.pop();
        if (Array.isArray(next)) {
            // 使用 push 送回內層數組中的元素，不會改動原始輸入 original input
            stack.push(...next);
        } else {
            res.push(next);
        }
    }
    // 使用 reverse 恢復原數組的順序
    return res.reverse();
}
console.log(flattenDeep([1, [2, [3, [4]], 5]]));

例如:

uniq([1, 2, 3, 5, 3, 2]);//[1, 2, 3, 5]

法1: 利用ES6新增數據類型 Set

Set類似于數組，但是成員的值都是唯一的，沒有重復的值。

function uniq(arry) {
    return [...new Set(arry)];
}

法2: 利用 indexOf

function uniq(arry) {
    var result = [];
    for (var i = 0; i < arry.length; i++) {
        if (result.indexOf(arry[i]) === -1) {
            //如 result 中沒有 arry[i],則添加到數組中
            result.push(arry[i])
        }
    }
    return result;
}

法3: 利用 includes

function uniq(arry) {
    var result = [];
    for (var i = 0; i < arry.length; i++) {
        if (!result.includes(arry[i])) {
            //如 result 中沒有 arry[i],則添加到數組中
            result.push(arry[i])
        }
    }
    return result;
}

法4：利用 reduce

function uniq(arry) {
    return arry.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []);
}

法5：利用 Map

function uniq(arry) {
    let map = new Map();
    let result = new Array();
    for (let i = 0; i < arry.length; i++) {
        if (map.has(arry[i])) {
            map.set(arry[i], true);
        } else {
            map.set(arry[i], false);
            result.push(arry[i]);
        }
    }
    return result;
}

ES6 規定，默認的 Iterator 接口部署在數據結構的 Symbol.iterator 屬性，換個角度，也可以認為，一個數據結構只要具有 Symbol.iterator 屬性(Symbol.iterator 方法對應的是遍歷器生成函數，返回的是一個遍歷器對象)，那么就可以其認為是可迭代的。

具有 Symbol.iterator 屬性，Symbol.iterator() 返回的是一個遍歷器對象

可以使用 for ... of 進行循環

通過被 Array.from 轉換為數組

let arry = [1, 2, 3, 4];
let iter = arry[Symbol.iterator]();
console.log(iter.next()); //{ value: 1, done: false }
console.log(iter.next()); //{ value: 2, done: false }
console.log(iter.next()); //{ value: 3, done: false }

Array

Map

Set

String

TypedArray

函數的 arguments 對象

NodeList 對象

盡管瀏覽器有同源策略，但是