博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Knockout中ko.utils中处理数组的方法集合
阅读量:5840 次
发布时间:2019-06-18

本文共 4450 字,大约阅读时间需要 14 分钟。

每一套框架基本上都会有一个工具类,如:Vue中的Vue.utilKnockout中的ko.utilsjQuery直接将一些工具类放到了$里面,如果你还需要更多的工具类可以试试。本文只介绍一下Knockout中ko.utils中处理数组的一些方法。

ko.utils.arrayForEach(arraycallback)

与作用一致。提供函数(回调函数)对数组的每个元素执行一次。使用方法:

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(arraycallback)

与作用一致。返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。使用方法:

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(arraycallback)

与作用一致。使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组。使用方法:

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(arrayitem)

与作用一致。返回给定元素能找在数组中找到的第一个索引值,否则返回-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(arrayitemToRemove)

从数组中删除一个指定值的元素。使用方法:

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(arraycallback[, 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(arrayvaluesToPush)

将数组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(arrayvalueincluded)

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/duanweishi/p/6942545.html

你可能感兴趣的文章
NGINX + PHP-FPM 502
查看>>
mysql数据备份与恢复
查看>>
Openstack API常用命令
查看>>
OpenSSL漏洞凶猛来袭 慧眼恶意代码监测应对有方
查看>>
C语言 喝汽水问题
查看>>
LINUX中搭建DNS服务器,实现正向、反向以及访问不同DNS解析
查看>>
SCCM2012 R2实战系列之十:解决WDS服务无法启动问题(错误1067:进程意外终止)...
查看>>
怎么防止重复发送Ajax
查看>>
ubuntu 下安装 mysql
查看>>
关于k-means聚类算法的matlab实现
查看>>
Git分支2
查看>>
一键安装Gitlab后的备份、迁移与恢复
查看>>
因为本人工作繁忙,精力有限,本博客停止更新。有兴趣的博友可以关注我在CSDN上的主博客...
查看>>
SQL server查看触发器是否被禁用
查看>>
[C++基础]在构造函数内部调用构造函数
查看>>
跟随我在oracle学习php(8)
查看>>
Spring 3.1.0 Hibernate 3.0 Eclipse Spring WEB例子
查看>>
UVA-10212 The Last Non-zero Digit. 分解质因子+容斥定理
查看>>
求两个集合的交集,并集,差集
查看>>
Kotlin的语法糖(一)基础篇
查看>>