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