Knockout中ko.utils中處理數組的方法集合

每一套框架基本上都會有一個工具類，如：Vue中的Vue.util、Knockout中的ko.utils、jQuery直接將一些工具類放到了$裏面，若是你還須要更多的工具類能夠試試lodash。本文只介紹一下Knockout中ko.utils中處理數組的一些方法。

ko.utils.arrayForEach(array, callback)

與Array.prototype.forEach做用一致。提供函數(回調函數)對數組的每一個元素執行一次。使用方法：

var arr = [1, 2, 3, 4];
ko.utils.arrayForEach(arr, function(el, index) {
    console.log(el)
});

上面分別輸出：1、2、3、4

ko.utils.arrayForEach源碼：

ko.utils.arrayForEach = function (array, action) {
    for (var i = 0, j = array.length; i < j; i++)
        action(array[i], i);
}

ko.utils.arrayMap(array, callback)

與Array.prototype.map做用一致。返回一個由原數組中的每一個元素調用一個指定方法後的返回值組成的新數組。使用方法：

var arr = [1, 2, 3, 4];
var newArr = ko.utils.arrayMap(arr, function(el, index) {
    return el + 1;
});

上面獲得的newArr爲：[2, 3, 4, 5]

ko.utils.arrayMap源碼：

ko.utils.arrayMap = function (array, mapping) {
    array = array || [];
    var result = [];
    for (var i = 0, j = array.length; i < j; i++)
        result.push(mapping(array[i], i));
    return result;
}

ko.utils.arrayFilter(array, callback)

與Array.prototype.filter做用一致。使用指定的函數測試全部元素，並建立一個包含全部經過測試的元素的新數組。使用方法：

var arr = [1, 2, 3, 4];
var newArr = ko.utils.arrayFilter(arr, function(el, index) {
    return el > 2;
});

上面獲得的newArr爲：[3, 4]

ko.utils.arrayFilter源碼：

ko.utils.arrayFilter = function (array, predicate) {
    array = array || [];
    var result = [];
    for (var i = 0, j = array.length; i < j; i++)
        if (predicate(array[i], i))
            result.push(array[i]);
    return result;
}

ko.utils.arrayIndexOf(array, item)

與Array.prototype.indexOf做用一致。返回給定元素能找在數組中找到的第一個索引值，不然返回-1。使用方法：

var arr = [1, 2, 3, 4];
var index = ko.utils.arrayIndexOf(arr, 2);

上面獲得的index值爲1

ko.utils.arrayIndexOf源碼：

ko.utils.arrayIndexOf = function (array, item) {
    if (typeof Array.prototype.indexOf == "function")
        return Array.prototype.indexOf.call(array, item);
    for (var i = 0, j = array.length; i < j; i++)
        if (array[i] === item)
            return i;
    return -1;
}

ko.utils.arrayRemoveItem(array, itemToRemove)

從數組中刪除一個指定值的元素。使用方法：

var arr = [1, 2, 3, 4, 2];
ko.utils.arrayRemoveItem(arr, 2);

上面arr如今爲[1, 3, 4, 2]

ko.utils.arrayRemoveItem源碼：

ko.utils.arrayRemoveItem = function (array, itemToRemove) {
    var index = ko.utils.arrayIndexOf(array, itemToRemove);
    if (index > 0) {
        array.splice(index, 1);
    }
    else if (index === 0) {
        array.shift();
    }
}

ko.utils.arrayGetDistinctValues(array)

對數組進行去重（若是數組長度很大效率會很低），返回去重以後的新數組。使用方法：

var arr = [1, 2, 3, 4, 2, 4, '1'];
var newArr = ko.utils.arrayGetDistinctValues(arr);

獲得的newArr值爲[1, 2, 3, 4, '1']

ko.utils.arrayGetDistinctValues源碼：

ko.utils.arrayGetDistinctValues = function (array) {
    array = array || [];
    var result = [];
    for (var i = 0, j = array.length; i < j; i++) {
        if (ko.utils.arrayIndexOf(result, array[i]) < 0)
            result.push(array[i]);
    }
    return result;
}

ko.utils.arrayFirst(array, callback[, thisArg])

與Array.prototype.find方法相似（命名與find誤差太大了）。返回第一個知足條件的元素。使用方法：

var arr = [
    {name: "apple"},
    {name: "banana"},
    {name: "cherries"}
];
var item = ko.utils.arrayFirst(arr, function(el, index){
    return el.name === "banana";
})

ko.utils.arrayFirst源碼：

ko.utils.arrayFirst = function (array, predicate, predicateOwner) {
    for (var i = 0, j = array.length; i < j; i++)
        if (predicate.call(predicateOwner, array[i], i))
            return array[i];
    return null;
}

ko.utils.arrayPushAll(array, valuesToPush)

將數組valuesToPush合併到數組array中。使用方法：

var arr = [1, 2, 3];
ko.utils.arrayPushAll(arr, [4, 5]);

最後arr的值爲[1, 2, 3, 4, 5]

ko.utils.arrayPushAll源碼：

ko.utils.arrayPushAll = function (array, valuesToPush) {
    if (valuesToPush instanceof Array)
        array.push.apply(array, valuesToPush);
    else
        for (var i = 0, j = valuesToPush.length; i < j; i++)
            array.push(valuesToPush[i]);
    return array;
}

ko.utils.addOrRemoveItem(array, value, included)

included爲true，則array中含有value不處理，沒有則添加； included爲false，則array中含有value刪除，沒有則不處理。 使用方法：

var arr = [1, 2, 3];

ko.utils.addOrRemoveItem(arr, 4, true); /// arr爲[1, 2, 3, 4]

// 或者
ko.utils.addOrRemoveItem(arr, 4, false); /// arr爲[1, 2, 3]

// 或者
ko.utils.addOrRemoveItem(arr, 2, true); /// arr爲[1, 2, 3]

// 或者
ko.utils.addOrRemoveItem(arr, 2, false); /// arr爲[1, 3]

ko.utils.addOrRemoveItem源碼：

addOrRemoveItem: function(array, value, included) {
    var existingEntryIndex = ko.utils.arrayIndexOf(ko.utils.peekObservable(array), value);
    if (existingEntryIndex < 0) {
        if (included)
            array.push(value);
    } else {
        if (!included)
            array.splice(existingEntryIndex, 1);
    }
}

ko中基本上就這些處理數組的方法了，若是你知道ko中有這些方法，那麼在作兼容比較舊的瀏覽器（IE8及如下）的開發能讓你輕鬆不少。

轉自：https://www.xiaoboy.com/topic/ko-utils-array-function.html