摘要：前集回顧我們在開開心心做幾道機試題中吐了槽，也順勢展開了機試題之旅，本章我們暫時壓抑自己的吐槽之心，繼續就題目前行。其實和都是構造函數，可以直接調用的。請嘗試完成一個解析模塊本題考查對的理解，各部分都是什么意思。

我們在開開心心做幾道JavaScript機試題 - 01中吐了槽，也順勢展開了機試題之旅，本章我們暫時壓抑自己的吐槽之心，繼續就題目前行。仍然希望對各位正確認識JavaScript這門語言，已經在面試過程中遇到這些問題時，如何思考！

項目地址：fe-interview

本題主要考查對數組的工具函數的理解、認識。很多朋友習慣了遇事兒就噴一堆for loop在那惡心人，忽略變量污染、不必要的遍歷操作、含義模糊等問題可能帶來的潛在隱患。對抱有這種錯誤認識的朋友，只要考考這些常見的數組快捷函數的實現原理，原形畢露！^^

答案：

var find = function(array, func) {
    for (var i = 0; i < array.length; i++) {
        if (func(array[i], i)) {
            return array[i];
        }
    }
};

module.exports = find;

關于這一點，可以閱讀：Functional programming in Javascript: map, filter and reduce

本題和上題的唯一區別在于，尋找最后一個符合條件的指定元素

答案：

var findlast = function(array, func) {
    for (var i = array.length - 1; i > -1; i--) {
        if (func(array[i], i)) {
            return array[i];
        }
    }
};

module.exports = findlast;

這個考察的就是對數組和literal object的組合使用

答案：

var findmost = function(array, identity) {
    var occurrence = {};
    var most;
    for (var i = 0; i < array.length; i++) {
        var item = array[i];
        var id = identity ? identity(item) : item;
        if (!occurrence[id]) {
            occurrence[id] = {count: 1, raw: item};
        } else {
            occurrence[id].count++;
        }
        if (!most || (most !== id && occurrence[id].count > occurrence[most].count)) {
            most = id;
        }
    }
    return occurrence[most].raw;
};

module.exports = findmost;

我只用了for loop形式，歡迎更簡潔寫法的PR

本題考查了兩個數組的比較，查找第二數組里沒有出現的第一個數組的元素。其中對isNaN有比較細節的針對

答案：

var isNaN = Number.isNaN;
var difference = function(arr1, arr2) {
    return arr1.reduce(function(previous, i) {
        var found = arr2.findIndex(function(j) {
            return j === i || (isNaN(i) && isNaN(j));
        });
        return (found < 0 && previous.push(i), previous);
    }, []);
};

module.exports = difference;

我的答案用了reduce來獲取最終結果；如果有朋友對found < 0 && previous.push(i)不明白，可以看：短路求值。如果對,的使用不了解，那說明你沒看上一章

本題考查對字符串的各種處理手段

答案：

var camelcase = function(str) {
    return str.toLowerCase()
        .replace(/(s+|-+)(.)/g, function(matched, separator, letter) {
            return letter.toUpperCase();
        });
};

module.exports = camelcase;

我這里用了一套組合技，先toLowerCase，再配合正則表達式，用一個replace結束戰斗

本題考查了對數組便捷函數的理解認識，重點在于第二個參數是callback，很多人都被String和Boolean給嚇到了，想不通為什么結果會是那個樣子。其實String和Boolean都是構造函數，可以直接調用的。

答案：

var times = function(n, func) {
    return Array
        .apply([], new Array(n))
        .map(function(item, index) {
            return func(index);
        });
};

module.exports = times;

不多說了，依舊圍繞數組。雖然數組的題比較多，但在面試過程中可以選擇做答，不必全部都寫

答案：

var filter = function(arr, iteratee) {
    return arr.reduce(function(previous, item) {
        return (iteratee(item) && previous.push(item), previous);
    }, []);
};

module.exports = filter;

我的答案仍然利用了reduce和短路求值

這個題目對部分朋友來說，可能又過分了。但相信我，題目不是為了羞辱誰，而是考察關于JavaScript，你到底知道多少？函數式編程不是寫Javascript的必需條件，但函數式表達的簡潔性，對于代碼更深入的理解還是很有幫助的。

關于什么是thunk？我們先來看看簡單定義：“一個封裝了特定行為使其可以延遲執行的函數，通常我們稱之為thunk”，如果希望了解更多關于thunk的內容，看Thoughts On Thunks

答案：

var thunkify = function(func) {
    return function() {
        var _this = this;
        var args = Array.prototype.slice.call(arguments);
        return function(cb) {
            try {
                func.apply(_this, args.concat([cb]));
            } catch (e) {
                cb(e);
            }
        };
    };
};

module.exports = thunkify;

關于arguments為什么需要Array.prototype.slice.call(arguments)轉換成Array，看arguments

答案：

var zipobject = function(arr1, arr2) {
    return arr1.reduce(function(previous, key, index) {
        return (previous[key] = arr2[index], previous);
    }, {});
};

module.exports = zipobject;

本題考查數組合并/壓縮，我用了reduce來處理。通過最近這幾題可以看出來，reduce真的能做很多事情哦！

本題考查對“緩存”的理解，很多人會被這個概念唬住，以為又是什么瀏覽器緩存啦，服務器緩存啦，甚至有人想到了redis、memcached等工具，然后被嚇得半死。其實沒那么牛逼，你就是寫一個變量，只要不銷毀，都可以叫緩存。

答案：

var once = function(func) {
    var value,
        executed;
    return function() {
        var args = Array.prototype.slice.call(arguments);
        if (!executed) {
            executed = true;
            value = func.apply(this, args);
            return value;
        }
        return value;
    };
};

module.exports = once;

通過設置一個executed的標記來判斷該函數是否已經執行過了

本題考查對map的理解。

答案：

var flatmap = function(array, iteratee) {
    return Array.prototype.concat.apply([], array.map(iteratee));
};

module.exports = flatmap;

一個小技巧，對于二維數組，利用concat函數處理，代碼更簡潔

多少人寫了很久的express，結果搞不清middleware是什么，怎么工作的，如何書寫middleware，怎么使用middleware。這一切都源于對“中間件”這個概念的模糊，以及對express中“中間件”的實現原理的不解

答案：

var Middleware = function() {
    this.pool = [];
};

Middleware.prototype.use = function(cb) {
    this.pool.push(cb.bind(this));
};

Middleware.prototype.start = function(cb) {
    var _this = this;

    var pullOut = function() {
        if (_this.pool.length === 0) {
            return cb.call(_this);
        }
        _this.pool.shift()(pullOut);
    };

    pullOut();
};

module.exports = Middleware;

關于middleware的詳細介紹，可以看guide。

本題考查對URl的理解，各部分都是什么意思。在我們過往的經歷中，經常發現候選人搞錯一些概念，譬如：什么是query parameter，protocol指的是哪一段，domain又是哪一段，我們常說的hash/fragment是什么？分清楚各部分是什么，方便分解這道題

關于URL，你可能想看到如下圖解：

答案：

var urlparser = function(url) {
    var result = /^(?:(https?):)//([.-w]+)(?:([/w]+))?(?:?([w=&]+))?$/.exec(url);

    var parsed = {protocol: result[1], host: result[2]};

    if (result[3]) {
        parsed.path = result[3];
    }

    if (result[4]) {
        parsed.query = result[4].split("&")
            .map((query) => query.split("="))
            .reduce((params, pairs) => (params[pairs[0]] = pairs[1], params), {});
    }

    return parsed;
};

module.exports = urlparser;

這個答案我用了正則和map、reduce，略顯臃腫。強烈歡迎更優解法

這又是個有故事的題，關于“節流閥”，是一種降低計算頻率的處理。最常見的使用場景：當頁面滾動時計算某一個值，相信如果你直白的在onScroll里寫了計算行為后會發現，每移動一個像素都會觸發一次計算，如果計算量還有一點大的話，卡不死你。這時候就用到了節流閥的技巧。關于“節流閥”更多詳情，請看throttle

答案：

var throttle = function(func, wait) {
    var last,
        timer;
    return function() {
        var args = Array.prototype.slice.call(arguments);
        var _this = this,
            now = new Date().getTime();
        if (typeof last === "undefined") {
            last = now;
            return func.apply(_this, args);
        }
        clearTimeout(timer);
        if (now - last > wait) {
            last = new Date().getTime();
            return func.apply(_this, args);
        }
        timer = setTimeout(function() {
            last = new Date().getTime();
            func.apply(_this, args);
        }, wait + last - now);
    };
};

module.exports = throttle;

用過AngularJS的朋友肯定都見識到了“依賴注入”的威力(當然如果你是java轉型的程序員，更應該有體會)，依賴注入是一種解藕手段，我們在java中通常如是介紹：“依賴注入是實現IoC(控制反轉)一種方式”。關于依賴注入，你也可以看手寫依賴注入

答案：

var Di = function() {
    this.instanceStore = {};
};

Di.prototype.register = function(name, inst) {
    this.instanceStore[name] = inst;
};

Di.prototype.run = function(arr) {
    var _this = this,
        lastIndex = arr.length - 1;

    arr[lastIndex].apply(null,
        arr.slice(0, lastIndex)
            .map(function(name) {
                var Inst = _this.instanceStore[name];
                if (!Inst) {
                    throw new Error("You are expecting a non-exist instance");
                }
                return typeof Inst === "function" ? new Inst() : Inst;
            }));
};

module.exports = Di;

注意我在run實現里的typeof Inst === "function" ? new Inst() : Inst;使得如果注冊的是一個構造函數，那么每次使用都會注入一個新的實例，這和AngularJS里使用單例的策略不同，這里留下一個問題，如果我希望使用單例策略，答案要做如何修改？

這是余下的15個題目，隨時歡迎PR，歡迎指正，歡迎優化。