从零开始构建自己的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的值删除之后的新的数组。如下图所示

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,384评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,845评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,148评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,640评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,731评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,712评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,703评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,473评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,915评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,063评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,706评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2 352