从零开始构建自己的js库工具库(二)——10个js处理数组的方法

《从零开始构建自己的js库工具库(二)——10个js处理数组的方法》 javascript

javascript对于数组对象有很多函数,熟练的运用这些函数,对于我们日常的工作有很大的帮助。

下面简单的分享一下10个简单的js对于处理数组的方法,希望能抛砖引玉。

1,数组去重复,这个的实现原理和过程就是遍历原来的数组arrOld,判断arr有没有当前遍历到的数组元素,没有加添加进去
function removeReapt(arrOld){
 var arr=[];
 for(var i=0,len=arrOld.length;i<len;i++){
 if(arr.indexOf(arrOld[i])==-1){
 arr.push(arrOld[i]);
 }
 }
 return arr;
}
​
removeReapt([1,2,3,6,5,2,2,5,6,2,1]) // [1, 2, 3, 6, 5]
2,数组最大值最小值,这一块的封装,主要是针对数字类型的数组,是通过js的Math 对象来实现的,我们还可以通过遍历数组,比较每一个值的大小来封装
function maxArr(arr){
 return Math.max.apply(null,arr);
}
function minArr(arr){
 return Math.min.apply(null,arr);
}
​
maxArr([1,4,65,843,2,1,4]) // 843
minArr([1,4,65,843,2,10,4]) // 1
3,数组求和,平均值,这一块的封装,主要也是是针对数字类型的数组。其中对于平均值小数点可能会有很多位,这里没有做处理。如果要处理,我们可以用js的向下取整Math.floor或者向上取整Math.ceil等函数来实现
//求和
function sumArr(arr){
 var sumText=0;
 for(var i=0,len=arr.length;i<len;i++){
 sumText+=arr[i];
 }
 return sumText
}
// 平均值
​
function covArr(arr){
 var sumText=sumArr(arr);
 var covText=sumText/arr.length;
 return covText
}
​
sumArr([1,4,65,843,2,1,4]) // 920
covArr([1,4,65,843,2,1,4]) // 131.42857142857142

4,从数组中随机获取元素
function randomOne(arr) {
 return arr[Math.floor(Math.random() * arr.length)];
}
​
randomOne([1,2,3,6,8,5,4,2,6]) // 1
5,返回对应元素在数组中的下标
function isHasElementOne(arr,value){ 
 for(var i = 0,vlen = arr.length; i < vlen; i++){ 
 if(arr[i] == value){ 
 return i; 
 } 
 } 
 return -1; 
}
isHasElementOne([1,2,3,4,5],3) // 2
6,返回数组(字符串)一个元素出现的次数
function getEleCount (obj, ele) {
 var num = 0;
 for (var i = 0, len = obj.length; i < len; i++) {
 if (ele == obj[i]) {
 num++;
 }
 }
 return num;
}
​
getEleCount('asd56+asdasdwqe','a') // 3
getEleCount([1,2,3,4,5,66,77,22,55,22],22) // 2
7,得到n1-n2下标的数组,即返回数组下标arr[n1]到数组arr[n2]的值
function getArrayNum(arr,n1,n2){
 var arr1=[],len=n2||arr.length-1;
 for(var i=n1;i<=len;i++){
 arr1.push(arr[i])
 }
 return arr1;
}
​
getArrayNum([0,1,2,3,4,5,6,7,8,9],5,9) // [5, 6, 7, 8, 9]
8,筛选数组,这里所做的就只是删除相应的数组,大家可以按需要扩展
/* arr:要进行操作的数组
 val:要删除的值
 type: 如果有值,则删除数组中所有含有val值的元素,如果没值或者不指定,则删除必须完全匹配val的值
*/
function removeArrayForValue(arr,val,type){
 return arr.filter(function (item) {
 return type? item.indexOf(val) === -1 : item !== val
 })
}
​
removeArrayForValue(['test','test1','test2','test','aaa'],'test','%')  // ["aaa"]
removeArrayForValue(['test','test1','test2','test','aaa'],'test') 
// ["test1", "test2", "aaa"]
9,根据id的值获取相应的item值,并存入相应的目标数组,如果数组里面的对象里面还有children的item的时候,我们可以使用递归
function findItemByOrgModuleId(arr, id, resArr) {
 arr.forEach(function(item){
 if (item.id === id) {
 resArr.push(item);
 }
 });
 return resArr;
}
​
var resArr = []; // 存放结果的目标数组
var arr = [
 {id:1,name:'aaa'},
 {id:2,name:'bbb'},
 {id:3,name:'ccc'},
 {id:4,name:'ddd'},
 {id:4,name:'555'},
]; // 要操作的数组
findItemByOrgModuleId(arr,4,resArr) // [{id:4,name:'ddd'},{id:4,name:'555'}]
10,根据id来删除数组中相应id的对象,这里默认所有的id都是唯一的
function deleteById(arr, id) {
 arr.forEach(function(item, i){
 if (item.id === id) {
 arr.splice(i, 1);
 }
 });
 return arr;
}
​
var arr = [
 {id:1,name:'aaa'},
 {id:2,name:'bbb'},
 {id:3,name:'ccc'},
 {id:4,name:'ddd'},
 {id:5,name:'555'},
]; // 要操作的数组
​
deleteById(arr,5) 
// [{id:1,name:'aaa'},{id:2,name:'bbb'},{id:3,name:'ccc'},{id:4,name:'ddd'}];

如果arr中的item值有子元素话,我们需要遍历,如下

// 如果arr对象如下所示
var arr = [
 {id:1,name:'aaa'},
 {id:2,name:'bbb'},
 {id:3,name:'ccc'},
 {id:4,name:'555'},
 {id:5,name:'555',children: [
 {id: 6,name:'666'},
 {id: 7,name:'777'},
 {id: 8,name:'888'},
 ]},
]
​
function deleteById(arr, id) {
 arr.forEach(function(item, i){
 if (item.id === id) {
 arr.splice(i, 1);
 }
 if (item.children && item.children.length) {
 deleteById(item.children, id);
 }
 });
​
 return arr;
}
​
deleteById(arr,6)

结果返回了将id等于6的值删除之后的新的数组。如下图所示

《从零开始构建自己的js库工具库(二)——10个js处理数组的方法》 image

附加:下面是js的数组常用的常用api,具体的使用方法大家可以参考相应的w3cschool相应的api的demo。
  • concat():连接两个或更多的数组,并返回结果

  • join():把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔

  • pop():删除并返回数组的最后一个元素

  • push():向数组的末尾添加一个或更多元素,并返回新的长度

  • reverse():颠倒数组中元素的顺序

  • shift():删除并返回数组的第一个元素

  • slice():从某个已有的数组返回选定的元素

  • sort():对数组的元素进行排序

  • splice():删除元素,并向数组添加新元素

  • toString():把数组转换为字符串,并返回结果

  • unshift():向数组的开头添加一个或更多元素,并返回新的长度

  • valueOf():返回数组对象的原始值

结语:此篇文章是受了 编写自己的代码库(javascript常用实例的实现与封装 作者的启发。

文章中加了自己的一些测试数据和自己工作用到的几个库,希望能给大家带来一点启发。

来自一个奔跑在前端路上的前端小白。

    原文作者:darrell
    原文地址: https://www.jianshu.com/p/5dc83169ee4f
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞