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