Knockout中ko.utils中处理数组的方法集合

Posted 2021-02-06 tangge

每一套框架基本上都会有一个工具类，如：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