楽しくいくつかのJavaScriptマシンの試験問題-02をします.


前回の回顧
私達は楽しくいくつかのJavaScript機の試験問題-01の中で溝を吐いて、成り行きに従って試験問題の旅を展開して、この章は私達はしばらく自分のツッコミの心を抑えて、引き続きテーマについて前進します.まだ皆さんに正確にJavaScriptという言語を認識していただきたいです.すでに面接の過程でこれらの問題が発生した時、どう考えますか?
プロジェクト住所:fe-innterview
答えの道
11-類似の'u.フィールドのモジュール
この問題は主に配列のツール関数に対する理解、認識を調べます.多くの友達が何かに慣れたら、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;
この点については、Funtional programming in Javascript:map、filter and reduceを読むことができます.
12-類似の'u.findlastのモジュール
本題と上の問題の唯一の違いは、最後の条件に合う指定要素を探すことです.
答え:
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;
13-頻度の高い要素を検索するモジュールを完成してみてください.
この考察は配列と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を歓迎します.
14-類似の'u.ディfferenceのモジュール
この問題は2つの配列の比較を調べています.2番目のグループには最初の配列の要素が現れていません.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)に対して分からないなら、見てもいいです.もし,の使用について知らないなら、あなたが第一章を見ていないということです.
15-類似の'u.camelCaseのモジュール
本題は文字列に対する各種の処理手段を調べます.
答え:
var camelcase = function(str) {
    return str.toLowerCase()
        .replace(/(\s+|-+)(.)/g, function(matched, separator, letter) {
            return letter.toUpperCase();
        });
};

module.exports = camelcase;
私はセットの組み合わせ技を使いました.まずtoLowerCase、正規表現に合わせて、一つのreplaceを使って戦いを終わります.
16-類似の'u.timesのモジュール
この問題では、配列の便利な関数に対する理解を調べました.第二のパラメータはcallbackで、多くの人がStringBooleanに驚きました.実はStringとBooleanは構造関数です.直接に呼び出すことができます.
答え:
var times = function(n, func) {
    return Array
        .apply([], new Array(n))
        .map(function(item, index) {
            return func(index);
        });
};

module.exports = times;
17-類似の'u.を完成させてみてください.filterのモジュール
多くは言いません.相変わらず行列を巡っています.配列の問題が多いですが、面接の過程で答えを選ぶことができます.全部書く必要はありません.
答え:
var filter = function(arr, iteratee) {
    return arr.reduce(function(previous, item) {
        return (iteratee(item) && previous.push(item), previous);
    }, []);
};

module.exports = filter;
私の答えは相変わらずreduceと短絡を利用しました.
18-簡単なthunkify関数を完成させてみてください.
このテーマは一部の友達にとって、また行き過ぎたかもしれません.しかし、私を信じて、問題は誰かを恥辱するためではなく、JavaScriptについて考察してみます.いったいどれぐらい知っていますか?関数式プログラミングはJavascriptを書く必要条件ではないが、関数式表現の簡潔さは、コードのより深い理解に役立つ.thunkとは何ですか?まず簡単な定義を見てみましょう.「特定の行動をカプセル化して実行を遅延させる関数は、一般的にthunkと呼ばれています.」
答え:
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;
thunkについては、なぜargumentsArray.prototype.slice.call(arguments)に変換する必要がありますか?
19-類似の'u.を完成させてみてください.zipObjectのモジュール
答え:
var zipobject = function(arr1, arr2) {
    return arr1.reduce(function(previous, key, index) {
        return (previous[key] = arr2[index], previous);
    }, {});
};

module.exports = zipobject;
この問題は配列の合併/圧縮を試験して、私はArrayを使って処理にきました.最近のこれらの問題を通して、reduceは本当に多くのことができます.
20-類似の'u.ワンスのモジュール
本題は「キャッシュ」に対する理解を考査して、多くの人はこの概念に脅かされて、また何のブラウザキャッシュかと思って、サーバーキャッシュとか、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のフラグを設定することにより、この関数が実行されたかどうかを判断する.
21-類似の'u.flatMapのモジュール
本題の調査はmapの理解に対して.
答え:
var flatmap = function(array, iteratee) {
    return Array.prototype.concat.apply([], array.map(iteratee));
};

module.exports = flatmap;
二次元配列については、concat関数を用いて処理し、コードはより簡潔である.
22-シンプルなmiddlewareモジュールを完成させてみてください.
何人かの人が長い間書いたので、結果はexpressが何なのか分かりません.どうやって仕事をしているのか、middlewareをどうやって書いたらいいですか?これらはすべて「中間部品」という概念のあいまいさと、middlewareの中の「中間部品」の実現原理に対する不可解さからきている.
答え:
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の詳細については、ガイドを見ることができます.
23-URL解析モジュールを完成させてみてください.
本題の調査はexpressの理解に対して、各部分はすべてどんな意味ですか?私達の過去の経歴の中で、いつも候補者がいくつか概念を間違えていることを発見して、例えば:何がmiddlewareで、URlはどの段を指していますか?各部分は何ですか?この問題を分解しやすいです.query parameterについては、次のような図解が見られます.
答え:
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;
この答えは正則とprotocoldomainを使っています.ちょっと太っています.もっと優れた解法を歓迎します.
24-似たような'uを完成させてみてください.throttleのモジュール
これはまた話のある問題です.「節流弁」については、計算頻度を下げる処理です.最も一般的な使用シーン:ページがスクロールする時、ある値を計算します.もしあなたがまっすぐに分かるのがhash/fragmentに計算行動を書いたら、ピクセルを移動するごとに計算がトリガされます.計算量が少し大きいなら、カードはあなたに死なれません.そこでURLのテクニックを使いました.「スロットルバルブ」の詳細については、スロットルをご覧ください.
答え:
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;
25-アングラルjsのような依存注入モジュールを完成させてみてください.mapを使ったことがある友達はきっとすべて“注入に依存します”の威力を見ました(もちろんあなたがjavaモデルチェンジのプログラマーなら、更に体得があるべきです)、注ぎ込むことに依存するのは1種の解レンコンの手段で、javaの中で普通は紹介します:“依存注入はreduce(制御反転)の1種の方式を実現するのです”.注ぎ込み依存については、手書き依存注入も見られます.
答え:
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;
onScroll実装における は、登録された構造関数であれば、その都度、新しいインスタンスを注入するようにしています.これはAngularJSでの単一の例を使用するポリシーとは異なり、ここで問題を残しています.もし、単一のポリシーを使用したいなら、答えはどのように修正されますか?
これは残りの15のテーマです.いつでもPRを歓迎します.ご指摘を歓迎します.最適化を歓迎します.