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
Knockout中ko.utils中處理數組的方法集合