摘要：前端面試題精選函數實現應用首先什么是函數，直譯記憶，緩存等意思，到了計算機層面就翻譯為緩存函數，緩存函數就是把計算的結果，存在函數中，當再次調用的時候就可以直接調用。

首先什么是memorize函數，memorize直譯：記憶，緩存等意思，到了計算機層面就翻譯為緩存函數，緩存函數就是把計算的結果，存在函數中，當再次調用的時候就可以直接調用。這種方法就是用空間來換取時間

    const memorize = function(fn) {
        const cache = {}
        return function(...args) { // 參數值，是一個數組，數組的值是需要計算的值
            const _args = JSON.stringify(args)
            return cache[_args] || (cache[_args] = fn.apply(fn, args)) 
            // 緩存函數的核心判斷依據，傳入的鍵名對應的鍵值為null 則調用add方法 反之從cache中拿取
        }
    }
    const add = function(a) {
        return a + 1
    }
    const adder = memorize(add) // memorize只調用一次 后面adder調用的都是return的函數
    adder(1) // 2    cache: { "[1]": 2 }
    adder(1) // 2    cache: { "[1]": 2 }
    adder(2) // 3    cache: { "[1]": 2, "[2]": 3 }

javascript 權威指南上的解釋是： call()、apply()可以看做是某個對象的方法，通過調用方法的形式來間接調用函數。bind()就是將某個函數綁定到某個對象上。

    var obj = {
        x:1
    }
    function foo() {
        console.log(this.x)
    }
    foo.call(obj)  //1

call()和apply()的第一個參數相同，就是指定對象，他們的根本區別就在于傳入的參數。
call傳入參數形式為call(obj, 1, 2, 3)
apply傳入參數形式為apply(obj, [1,2,3])

bind()方法和前兩者不同在于：bind()方法會返回執行上下文被改變的函數，而不會立即執行，而前兩者是直接執行該函數。他的參數和call()相同.

1. 遍歷去重
2. json鍵名不唯一去重
3. new Set()去重

    let arr = [1, 2, 3, 4, 5, 6, 7, 7, 7, 3, 111, 1, 3]

    for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
            if (arr[i] == arr[j]) {
                arr.splice(j, 1)
                i = i - 1
            }
        }
    }

    let arr = [1, 2, 3, 4, 5, 6, 7, 7, 7, 3, 111, 1, 3]
    let obj = {}
    let result = []
    
    for(let i = 0 ; i < arr.length; i++) {
        obj[arr[i]] = null
    }
    
    for(let key in obj) {
        result.push(key)
    }

    let arr = [1, 2, 3, 4, 5, 6, 7, 7, 7, 3, 111, 1, 3]
    let newArr = new Set(arr) // 返回一個set對象
    let result = []
    
    newArr.forEach(val => {
        result.push(val)
    })

數組扁平化簡單來說就是把一個多維數組變為一維數組，核心思想：

1.遞歸
2.數值toString() + split()
3.Array.prototype.flat(depth) // Infinity代表無限扁平

遞歸

function flatten(arr) {
    var res = [];
    arr.map(item => {
        if(Array.isArray(item)) {
            res = res.concat(flatten(item));
        } else {
            res.push(item);
        }
    });
    return res;
}

數值的扁平化toString() + split()

    let arr = [1,2,3,[2,3,4],45,7,[24,[2,3]]]
    function flatten(arr) {
        return arr.toString().split(",").map(val => {
            return Number(val)
        })
    }

flat()

    let arr = [1,2,3,[2,3,4],45,7,[24,[2,3]]]
    arr.flat(infinity)

去抖動和節流，二者都是隨著時間推移控制執行函數的次數來達到較少資源消耗，特別在事件觸發上，尤為重要。

debounce的作用是，當調用動作觸發一段時間后，才會執行該動作，若在這段時間間隔內又調用此動作則將重新計算時間間隔。

簡單來說就是：調用會一直刷新動作，動作是被延遲執行，直到停止調用等待了一段時間后再執行動作。看下面簡單debounce實現節流例子：

    function easyDebounce(method, scope) {
        clearTimeout(method.tId); // onresize會一直被觸發，只要在100毫秒內被連續觸發計時器都會刷新直到時間大于100毫秒
        method.tId= setTimeout(function(){
            method.call(scope);
        }, 100);
    }
    
    function resizeDiv(){
        var div = document.getElementById("myDiv");
        div.style.height = div.offsetWidth + "px";
    }
    
    // 節流在resize事件中最常用
    window.onresize = function(){
        easyDebounce(resizeDiv);
    };

throttle預先設定一個執行周期，當調用動作的時刻大于等于執行周期則執行該動作，然后進入下一個新的時間周期。throttle可以基于debounce實現，只需要加上一個閥值（最小值）如果時間小于定義的閥值 則不觸發動作，大于則觸發并刷新周期，而且第一次必定觸發。節流不實用定時器，debounce使用定時器

    var throttleV2 = function(action, delay){
        var statTime = 0;
    
        return function() { // 每次resize執行的函數 閉包保證statTime可以一直使用
            var currTime = +new Date();
    
            if (currTime - statTime > delay) {
                action.apply(this, arguments);
                statTime = currTime ; // 每次調用完之后刷新時間
            }
        }
    }    
    
    // example
    function resizeHandler() {
        console.log("resize");
    }
    
    window.onresize = throttleV2(resizeHandler, 300);

vue實現數據的雙向綁定根本API是Object.defineProperty(),通過這個方法重寫get,和set屬性來達到數據雙向綁定

詳細解讀一下Object.defineProperty()這個東西到底干了啥

    var Book = {}
    var name = "";
    Object.defineProperty(Book, "name", {
      set: function (value) {
        name = value;
        console.log("書名：" + value);
      },
      get: function () {
        return "《" + name + "》"
      }
    })
     
    Book.name = "前端學習";
    console.log(Book.name); 

雙向綁定是用發布訂閱模式實現，所以涉及到監聽器Observer、訂閱者Watcher、解析器Compile，以及消息訂閱器dep收集watcher。

圖片來自互聯網：

vue scoped的實現是通過在對應的dom節點添加data-v-哈希值，并在style每個屬性后面加上這串data-v-hash來實現樣式的唯一性，起到一個樣式作用域的效果。
但是實際應用中添加scoped也會帶來一些麻煩，比如設置完scoped屬性之后無法修改子組件的樣式。再次有兩點供大家參考：

不用scoped屬性，每個組件使用良好的命名規范，每個組件的根節點取唯一的類名。

使用scoped屬性，在需要操作子組件樣式的時候使用‘>>>’來修改子組件的節點樣式。

持續更新中~~~