摘要：前端面試題精選函數(shù)實現(xiàn)應(yīng)用首先什么是函數(shù)，直譯記憶，緩存等意思，到了計算機(jī)層面就翻譯為緩存函數(shù)，緩存函數(shù)就是把計算的結(jié)果，存在函數(shù)中，當(dāng)再次調(diào)用的時候就可以直接調(diào)用。

首先什么是memorize函數(shù)，memorize直譯：記憶，緩存等意思，到了計算機(jī)層面就翻譯為緩存函數(shù)，緩存函數(shù)就是把計算的結(jié)果，存在函數(shù)中，當(dāng)再次調(diào)用的時候就可以直接調(diào)用。這種方法就是用空間來換取時間

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

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

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

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

bind()方法和前兩者不同在于：bind()方法會返回執(zhí)行上下文被改變的函數(shù)，而不會立即執(zhí)行，而前兩者是直接執(zhí)行該函數(shù)。他的參數(shù)和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)
    })

數(shù)組扁平化簡單來說就是把一個多維數(shù)組變?yōu)橐痪S數(shù)組，核心思想：

1.遞歸
2.數(shù)值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;
}

數(shù)值的扁平化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)

去抖動和節(jié)流，二者都是隨著時間推移控制執(zhí)行函數(shù)的次數(shù)來達(dá)到較少資源消耗，特別在事件觸發(fā)上，尤為重要。

debounce的作用是，當(dāng)調(diào)用動作觸發(fā)一段時間后，才會執(zhí)行該動作，若在這段時間間隔內(nèi)又調(diào)用此動作則將重新計算時間間隔。

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

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

throttle預(yù)先設(shè)定一個執(zhí)行周期，當(dāng)調(diào)用動作的時刻大于等于執(zhí)行周期則執(zhí)行該動作，然后進(jìn)入下一個新的時間周期。throttle可以基于debounce實現(xiàn)，只需要加上一個閥值（最小值）如果時間小于定義的閥值 則不觸發(fā)動作，大于則觸發(fā)并刷新周期，而且第一次必定觸發(fā)。節(jié)流不實用定時器，debounce使用定時器

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

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

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

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

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

圖片來自互聯(lián)網(wǎng)：

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

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

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

持續(xù)更新中~~~