underscore 系列以內部函數 restArgs

時間 2019-11-24

標籤 underscore 系列內部函數 restargs 简体版

原文原文鏈接

partial

在《 JavaScript 專題之偏函數》中，咱們寫了一個 partial 函數，用來固定函數的部分參數，實現代碼以下：git

// 這是文章中的初版
function partial(fn) {
    var args = [].slice.call(arguments, 1);
    return function() {
        var newArgs = args.concat([].slice.call(arguments));
        return fn.apply(this, newArgs);
    };
};
複製代碼

rest parameter

ES6 爲咱們提供了剩餘參數（rest parameter）語法，容許咱們將一個不定數量的參數表示爲一個數組。github

function fn(a, b, ...args) {
   console.log(args); // [3, 4, 5]
}

fn(1, 2, 3, 4, 5)
複製代碼

咱們能夠利用這一特性簡化 partial 實現的代碼：數組

function partial(fn, ...args) {
    return function(...partialArgs) {
        var newArgs = args.concat(partialArgs);
        return fn.apply(this, newArgs);
    };
};
複製代碼

寫個 demo，測試一下：性能優化

function add(a, b) {
    return a + b;
}

var addOne = partial(add, 1);

console.log(addOne(2)); // 3
複製代碼

restArgs

若是不使用 ... 拓展操做符，僅用 ES5 的內容，該怎麼實現呢？架構

咱們能夠寫一個 restArgs 函數，傳入一個函數，使用函數的最後一個參數儲存剩下的函數參數，使用效果以下：app

var func = restArgs(function(a, b, c){
    console.log(c); // [3, 4, 5]
})

func(1, 2, 3, 4, 5)
複製代碼

咱們來寫一版：函數

// 初版
function restArgs(func) {
    return function(){
        // startIndex 表示使用哪一個位置的參數用於儲存剩餘的參數
        var startIndex = func.length - 1;
        var length = arguments.length - startIndex;

        var rest = Array(length)
        var index = 0;

        // 使用一個數組儲存剩餘的參數
        // 以上面的例子爲例，結果爲：
        // rest [3, 4, 5]
        for (; index < length; index++) {
            rest[index] = arguments[index + startIndex]
        }

        // args [1, 2, undefined]
        var args = Array(startIndex + 1);
        for (index = 0; index < startIndex; index++) {
            args[index] = arguments[index]
        }

        // args [1, 2, [3, 4, 5]]
        args[startIndex] = rest;

        return func.apply(this, args)
    }
}
複製代碼

優化

咱們默認使用傳入的函數的最後一個參數儲存剩餘的參數，爲了更加靈活，咱們能夠再增長一個參數，用來指定 startIndex，若是沒有指定，就默認使用最後一個參數。性能

此外，注意，咱們使用 Array(length) 建立數組，而 length 的計算方式是 arguments.length - startIndex，這個值有多是負數！好比：測試

var func = restArgs(function(a, b, c, d){
    console.log(c) // 報錯
})

func(1, 2)
複製代碼

因此咱們再寫一版：優化

// 第二版
function restArgs(func, startIndex) {
    startIndex = startIndex == null ? func.length - 1 : +startIndex;
    return function(){
        var length = Math.max(arguments.length - startIndex, 0);
        var rest = Array(length)
        var index = 0;
        for (; index < length; index++) {
            rest[index] = arguments[index + startIndex]
        }

        var args = Array(startIndex + 1);
        for (index = 0; index < startIndex; index++) {
            args[index] = arguments[index]
        }

        args[startIndex] = rest;
        return func.apply(this, args)
    }
}
複製代碼

性能優化

若是是正常寫業務，可能寫到這裏就結束了，然而 underscore 考慮的更多，鑑於 call 的性能要高於 apply，因此 underscore 作了一個優化：

// 第三版
var restArgs = function(func, startIndex) {
    startIndex = startIndex == null ? func.length - 1 : +startIndex;
    return function() {
        var length = Math.max(arguments.length - startIndex, 0),
            rest = Array(length),
            index = 0;

        for (; index < length; index++) {
            rest[index] = arguments[index + startIndex];
        }

        // 增長的部分
        switch (startIndex) {
            case 0:
                return func.call(this, rest);
            case 1:
                return func.call(this, arguments[0], rest);
            case 2:
                return func.call(this, arguments[0], arguments[1], rest);
        }

        var args = Array(startIndex + 1);
        for (index = 0; index < startIndex; index++) {
            args[index] = arguments[index];
        }

        args[startIndex] = rest;
        return func.apply(this, args);
    };
};
複製代碼

至此，restArgs 函數就完成了，underscore 不少函數好比 invoke、without、union、difference、bind、partial、bindAll、delay 都用到了 restArgs 函數。

當使用 underscore 的時候，咱們能夠以 _.restArgs 的形式調用該函數。

restArgs 與 partial

最後，使用咱們的寫的 restArgs 函數重寫下 partial 函數：

var partial = restArgs(function(fn, args){
    return restArgs(function(partialArgs) {
        var newArgs = args.concat(partialArgs);
        return fn.apply(this, newArgs);
    })
})

function add(a, b, c) {
    return a + b + c;
}

var addOne = partial(add, 1);
console.log(addOne(2, 3)); // 6
複製代碼