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

上面分别输出:1234

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);elsefor (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及以下)的开发能让你轻松很多。

转自:https://www.xiaoboy.com/topic/ko-utils-array-function.html

转载于:https://www.cnblogs.com/tangge/p/10333161.html

Knockout中ko.utils中处理数组的方法集合相关推荐

  1. JavaScript中十种一步拷贝数组的方法

    JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下. 1.扩展运算符(浅拷贝) 自从ES6出现以来,这已经成为最流行的方法.它是一个很简单的语法,但是 ...

  2. JavaScript中十个一步拷贝数组的方法

    JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下. 1.扩展运算符(浅拷贝) 自从ES6出现以来,这已经成为最流行的方法.它是一个很简单的语法,但是 ...

  3. js中不会影响原数组的方法

    1:concat() 该方法可以连接两个或多个数组,并将新的数组返回.不会对原数组产生影响 2:join() 该方法可以将数组转换为一个字符串 该方法不会对原数组产生影响,而是将转换后的字符串作为结果 ...

  4. JS数组方法-改变原数组与不改变原数组的方法集合

    改变原数组的方法 push() push() 方法向数组的 末尾添加 一个或多个元素,并返回新的长度 var arr = ['a','b','c']; console.log( arr.push('d ...

  5. unityplayerpre存档_Unity3D 中PlayerPrefs保存或读取数组的方法 | 学步园

    Unity本身有PlayerPrefs来做一些数据的保存和读取,也可以通过循环来做批量的读取或者保存,下面这个脚本可以方便的调用用来做上面批量的工作,比如读取一组文本数组数据和保存一组文本数组数据. ...

  6. Unity3D 中PlayerPrefs保存或读取数组的方法

    Unity本身有PlayerPrefs来做一些数据的保存和读取,也可以通过循环来做批量的读取或者保存,下面这个脚本可以方便的调用用来做上面批量的工作,比如读取一组文本数组数据和保存一组文本数组数据. ...

  7. Tensorflow 2.1.0 中 keras.utils.plot_model()出错的解决方法

    小小和蓝胖 2020-02-15 21:31:36  370  收藏 2 展开 最近在学习Tensorflow 2,使用keras模型可视化的plot_model()绘制模型图的时候报错.上网查找解决 ...

  8. 数组使用方法集合(建议收藏)

    数组 建立数组 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...

  9. android 数组排重方法,js数组去重方法集合 - osc_779ncf3o的个人空间 - OSCHINA - 中文开源技术交流社区...

    //第一种方法,新建一个空数组,将原来的数组循环逐个与新数组的成员做比较,如果新数组没有该元素就push进来 var arr = ['a', 1, 1, 1, 2, 4, 4, 'b', 'c', ' ...

最新文章

  1. Java泛型 通配符? extends与super
  2. XV6源代码阅读-中断与系统调用
  3. java 容器 线程_JAVA多线程并发容器
  4. mysql8 修改密码_最新版本mysql8.0.18windows x64部署手册
  5. 一看就懂系列之 如何实现与控制php常驻进程
  6. p1605迷宫(DFS应该注意的问题)
  7. 51nod-正整数分组问题(基础方程DP-01背包)
  8. php redis编程,php + redis 实现关注功能
  9. LeetCode MySQL 180. 连续出现的数字(cast)
  10. chrome 63 android分类,Chrome 63 Beta新特性介绍
  11. Egret之粒子系统
  12. 开始学习C#.Net
  13. 8uftp,8uFTP是什么软件
  14. 一个不错微服务架构图
  15. ubantu 终端屏幕查找字符串
  16. win7 uefi 无法对计算机,U盘UEFI模式无法启动WIN7安装解决教程
  17. 目前流行的装修风格_目前什么装修风格最流行?
  18. 大厂面试预备篇——《两万字MySql基础总结》❤️建议收藏
  19. YARN中的任务队列调度器-容量调度器(Capacity Scheduler)
  20. XMPP增加删除好友

热门文章

  1. 航海学校高级课程任务讲义
  2. Lua中的模块和使用
  3. 超参数优化 贝叶斯优化框架_mlmachine-使用贝叶斯优化进行超参数调整
  4. graph-easy 纯文本图绘制工具(表格或流程图)
  5. 《环形女人》:“穿透”与“征兆”(全文)
  6. ARM Neon 列子 - Vector Add
  7. Xilinx_ISE和ModelSim的联合使用方法 / 从Xilinx ISE 14.7启动ModelSim时遇到的问题
  8. html修改图片宽度高度,HTML基础 img width height 设置显示图片的高度和宽度
  9. jmeter跨线程组传多个值_Jmeter 跨线程组传递参数 之两种方法(转)
  10. gc java root_聊聊Java的GC机制