当前位置:首页 » 《关注互联网》 » 正文

JS数组去重的几种方法_,

11 人参与  2022年01月20日 09:44  分类 : 《关注互联网》  评论

点击全文阅读


数组去重

1 双层for循环(类似冒泡排序的双层循环写法)

var arr = [2,3,4,2,34,21,1,12,3,4,1]
for(var i =0;i<arr.length;i++){
    //第一层:每次循环拿到arr中一个元素
	for(var j=i+1;j<arr.length;j++){
        //第二层:每次拿到的元素再和每次拿到的元素后边的元素依次进行比对(因为第一个要从第二个开始比,第二个要从第三个比以此类推,所以这里的j应比i大1为j=i+1)
    	if(arr[i] === arr[j]){
            //如果相同就删除后边的元素
        	arr.splice(j,1)
    	}
    }
}
//arr:[1, 2, 3, 4, 12, 21, 34]

2 循环和indexof、循环和includes

创建新数组,循环旧数组,看每次循环的元素是否存在于新数组中没有就把当前元素添加到新数组中

//indexof
var arr = [2,3,4,2,34,21,1,12,3,4,1]
var arr2 = []
arr.forEach((e)=>{
    if(arr2.indexOf(e)==-1){
        arr2.push(e)
    }
})
console.log(arr2)
//arr2:[1, 2, 3, 4, 12, 21, 34]
//includes
var arr = [2,3,4,2,34,21,1,12,3,4,1]
var arr2 = []
arr.forEach((e)=>{
    if(!arr2.includes(e)){
        arr2.push(e)
    }
})
console.log(arr2)
//arr2:[1, 2, 3, 4, 12, 21, 34]

3 利用对象属性不能重复去重

var arr = [2,3,4,2,34,21,1,12,3,4,1]
var obj = {};
arr.forEach((e,i)=>{
    obj[arr[i]] = "abc";   
});
var arr2=Object.keys(obj)
console.log(arr2)
//arr2:["1", "2", "3", "4", "12", "21", "34"]
var arr3 = arr2.map(e => ~~e )
//arr3:[1, 2, 3, 4, 12, 21, 34]
//注意这种方法不仅给数组重新排列而且还改变了数组中元素的类型

~是js里的按位取反操作符,~~就是执行两次按位取反,其实就是保持原值,但是注意虽然是原值,但是对布尔型变量执行这个操作,会转化成相应的数值型变量,也就是 ~~true === 1,~~false === 0。

4 ES6 Set

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

var arr = [2,3,4,2,34,21,1,12,3,4,1]
var arr1 = [...new Set(arr)]
console.log(arr1)
//arr1:[1, 2, 3, 4, 12, 21, 34]

5 ES6 Array. prototype.filter()

注:indexOf在数组中找元素的时候,碰到符合条件的第一个就会把它的下标返回

var arr = [2,3,4,2,34,21,1,12,3,4,1]
var arr2 = arr.filter((e,i)=>{
    //看每次循环的元素在数组中出现的第一个下标位置(indexOf返回的位置),和每次循环的元素的下标(filter循环每次的i)是否一致,一致就说明他就是第一个符合条件,不会被过滤掉。
    return arr.indexOf(e)==i;
})
console.log(arr2)
//arr2:[1, 2, 3, 4, 12, 21, 34]

6 ES6 Array. prototype.reduce()

var arr = [2,3,4,2,34,21,1,12,3,4,1]
var arr2 = arr.reduce((pre,e)=>{
    //这里当然也可以用indexOf来判断是否存在
    pre.includes(e)?pre:pre.push(e);
    return pre
},[])
console.log(arr2)
//arr2:[1, 2, 3, 4, 12, 21, 34]

点击全文阅读


本文链接:http://zhangshiyu.com/post/33579.html

元素  循环  数组  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • (番外)+(全书)错位时空的恋人+后续+结局(苏璃沈星澜)全书在线_错位时空的恋人+后续+结局免费列表_笔趣阁(苏璃沈星澜)
  • 「被卖十亿后,她的马甲亮啦」章节彩蛋限时释出‌_花落牧轻舟小说章节分享
  • 周语徐西洲(爱已戛然而止全书+后续+结局)全书周语徐西洲读结局_(周语徐西洲爱已戛然而止全书+后续+结局读全书结局)结局列表_笔趣阁(周语徐西洲)
  • 重生妹妹与自闭症哥哥(沈寒舟沈清然)全书沈寒舟沈清然结局_沈寒舟沈清然+结局列表_笔趣阁(重生妹妹与自闭症哥哥全书+后续)
  • 给五十任夫君过喜的任务娘交给我了,许莺莺列表_给五十任夫君过喜的任务娘交给我了,许莺莺
  • [恋爱脑养女被全网网暴]章节世界观揭秘篇‌_[陆琦温言魏敛]章节试读
  • 「外婆葬身火海那夜,失忆男友终于悔悟」后续全文免费阅读_[沈也苏漾温言]角色专属支线试读入口
  • 全书浏览她已走远后续+(苏然霍霆舟)_她已走远后续+(苏然霍霆舟)全书结局
  • 我再一次见到霍霆舟,是在酒吧。医院部门聚会。我们的包房,正好在霍霆舟他们旁边。年轻的罗医生却喝了酒,在走廊看见路过的叶南,要她的微信。
  • 龚亦遥(老公让我为白月光挡灾,我死后他一夜疯魔)_龚亦遥列表_笔趣阁(老公让我为白月光挡灾,我死后他一夜疯魔)
  • 秦彦琛(半生烟雨终不见)结局_(秦彦琛半生烟雨终不见全书结局)结局列表_笔趣阁(秦彦琛)
  • (番外)+(全书)往梦难复温+结局+番外(沈淮霆宋思予)列表_往梦难复温(沈淮霆宋思予)全书+后续+结局在线

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1