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

每一套框架基本上都会有一个工具类,如:Vue中的Vue.utilKnockout中的ko.utilsjQuery直接将一些工具类放到了$里面,如果你还需要更多的工具类可以试试lodash。本文只介绍一下Knockoutko.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)

includedtrue,则array中含有value不处理,没有则添加; includedfalse,则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及以下)的开发能让你轻松很多。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值