您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

Javascript数组去重的几种方法详解

51自学网 2022-02-21 13:40:54
  javascript

数组去重

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

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

//indexofvar 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]
//includesvar 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]

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注51zixue.net的更多内容!


下载地址:
Element中select多数据加载优化的实现
一起来了解JavaScript面向对象
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。