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

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

    const memorize = function(fn) {
        const cache = {}
        return function(...args) { // 參數(shù)值，是一個(gè)數(shù)組，數(shù)組的值是需要計(jì)算的值
            const _args = JSON.stringify(args)
            return cache[_args] || (cache[_args] = fn.apply(fn, args)) 
            // 緩存函數(shù)的核心判斷依據(jù)，傳入的鍵名對(duì)應(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()可以看做是某個(gè)對(duì)象的方法，通過(guò)調(diào)用方法的形式來(lái)間接調(diào)用函數(shù)。bind()就是將某個(gè)函數(shù)綁定到某個(gè)對(duì)象上。

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

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

bind()方法和前兩者不同在于：bind()方法會(huì)返回執(zhí)行上下文被改變的函數(shù)，而不會(huì)立即執(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) // 返回一個(gè)set對(duì)象
    let result = []
    
    newArr.forEach(val => {
        result.push(val)
    })

數(shù)組扁平化簡(jiǎn)單來(lái)說(shuō)就是把一個(gè)多維數(shù)組變?yōu)橐痪S數(shù)組，核心思想：

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

遞歸

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)

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

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

簡(jiǎn)單來(lái)說(shuō)就是：調(diào)用會(huì)一直刷新動(dòng)作，動(dòng)作是被延遲執(zhí)行，直到停止調(diào)用等待了一段時(shí)間后再執(zhí)行動(dòng)作?？聪旅婧?jiǎn)單debounce實(shí)現(xiàn)節(jié)流例子：

    function easyDebounce(method, scope) {
        clearTimeout(method.tId); // onresize會(huì)一直被觸發(fā)，只要在100毫秒內(nèi)被連續(xù)觸發(fā)計(jì)時(shí)器都會(huì)刷新直到時(shí)間大于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è)定一個(gè)執(zhí)行周期，當(dāng)調(diào)用動(dòng)作的時(shí)刻大于等于執(zhí)行周期則執(zhí)行該動(dòng)作，然后進(jìn)入下一個(gè)新的時(shí)間周期。throttle可以基于debounce實(shí)現(xiàn)，只需要加上一個(gè)閥值（最小值）如果時(shí)間小于定義的閥值 則不觸發(fā)動(dòng)作，大于則觸發(fā)并刷新周期，而且第一次必定觸發(fā)。節(jié)流不實(shí)用定時(shí)器，debounce使用定時(shí)器

    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)用完之后刷新時(shí)間
            }
        }
    }    
    
    // example
    function resizeHandler() {
        console.log("resize");
    }
    
    window.onresize = throttleV2(resizeHandler, 300);

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

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

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

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

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

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

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

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

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