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

目录
  • 数组去重
    • 1 双层for循环（类似冒泡排序的双层循环写法）
    • 2 循环和indexof、循环和includes
    • 3 利用对象属性不能重复去重
    • 4 ES6 Set
    • 5 ES6 Array. prototype.filter()
    • 6 ES6 Array. prototype.reduce()
  • 总结

数组去重

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]

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！

赞 (0)

相关推荐

  • JavaScript数组去重实现方法小结

    本文实例讲述了JavaScript数组去重实现方法.分享给大家供大家参考,具体如下: 一.ES3方法: var arr = ['a', 'a', 'b', 'b', 'b', 'c', 'e', 'f', 1, 2, 2, 3, 3, 3]; 创建一个空数组与原来数组进行比较 //与前面的数组进行比较(不会改变原数组) function deleteRepeat() { var result = []; label: for(var i=0; i<arr.length; i++) { for(v

  • JavaScript数组去重的几种方法

    前言 有时候我们做项目的时候往往会需要把数组里面一些重复的项去掉,但是原生JS有排序,有筛选等等,但是就是没有数组去重怎么办呢? 这能怎么办,自己手动实现嘛. 数组不像对象和hash有唯一的标志特征(key).所以,数组去重的核心就是[1]数组内元素互相比较,然后放入新的数组中.[2]参照对象构建一个唯一的特征标志,然后放入新数组中.以下就是依照这种思路产生的方法.[3]数组中含对象的去重方式我采用使用JSON.stringify()将对象转换成JSON字符串进行比较的方式. 1.最基础的去重:

  • JavaScript中数组去重的5种方法

    正常情况下,数据去重的工作一般都是由后端同事来完成的,但是前端也要掌握好处理数据的能力,万一去重的工作交给我们大前端处理,我们也不能怂呀.现在我总结了一些去重的方法,希望对大家有点帮助. 方法一:new Set()实现数组去重 ES6 提供了新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构.Set函数可以接受一个数组,用于初始化.根据 Set的数据特性,我们可以实现数组去重. let list = [1, 1, '

  • Javascript 数组去重的方法（四种）详解及实例代码

     Javascript 数组去重的四种方法 四种算法来实现这个目的: 第一种方法: Array.prototype.unique1 = function () { var n = []; //一个新的临时数组 for (var i = 0; i < this.length; i++) //遍历当前数组 { //如果当前数组的第i已经保存进了临时数组,那么跳过, //否则把当前项push到临时数组里面 if (n.indexOf(this[i]) == -1) n.push(this[i]); }

  • 详解javascript数组去重问题

    首先,我想到的是另建一个结果数组,用来存储原始数组中不重复的数据.遍历原始数组依次跟结果数组中的元素进行比较,检测是否重复.于是乎,我写出了如下代码A: Array.prototype.clearRepetitionA = function(){ var result = []; var isRepetition; for(var i=0; i<this.length; i++){ isRepetition = false; for(var j=0; j<result.length; j++)

  • JavaScript 数组去重详解

    JavaScript 数组去重详解

    目录 1.数组去重 2.数组去重里面的对象去重 3.根据数组某个字段相同,修改另外字段值 总结 1.数组去重 /********************************************** ╚description: ╚作者: 麒麟社 ╚时间: 2021-09-13 22:26:21 ╚名称: V1.0.5 ***********************************************/ var obj = ['麒麟','社','CC','DD','麒麟','社'

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

    目录 数组去重 1 双层for循环(类似冒泡排序的双层循环写法) 2 循环和indexof.循环和includes 3 利用对象属性不能重复去重 4 ES6 Set 5 ES6 Array. prototype.filter() 6 ES6 Array. prototype.reduce() 总结 数组去重 1 双层for循环(类似冒泡排序的双层循环写法) var arr = [2,3,4,2,34,21,1,12,3,4,1] for(var i =0;i<arr.length;i++){ /

  • JavaScript数组去重的两种方法推荐

    1.数组去重: Array类型并没有提供去重复的方法,如果要把数组的重复元素干掉,那得自己想办法: 方法一:利用indexOf方法: var aa=[1,3,5,4,3,3,1,4] function arr(arr) { var result=[] for(var i=0; i<arr.length; i++){ if(result.indexOf(arr[i])==-1){ result.push(arr[i]) } } console.log(result) } arr(aa) 方法二:

  • JavaScript数组去重的五种方法

    javascript数组去重是一个比较常见的需求,解决方法也有很多种,网上都可以找到答案的,下面小编给大家整理了一份关于同类型的数组去重的方法,先给大家介绍下简单实现思路. 思路: 遍历数组,一一比较,比较到相同的就删除后面的 遍历数组,一一比较,比较到相同的,跳过前面重复的,不相同的放入新数组 任取一个数组元素放入新数组,遍历剩下的数组元素任取一个,与新数组的元素一一比较,如果有不同的,放入新数组. 遍历数组,取一个元素,作为对象的属性,判断属性是否存在 1. 删除后面重复的: functio

  • JavaScript生成UUID的五种方法详解

    目录 简介 1.第一种 2.第二种 3.第三种 4.第四种 5.第五种 简介 UUID(Universally Unique IDentifier) 全局唯一标识符. UUID是一种由算法生成的二进制长度为128位的数字标识符.UUID的格式为“xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”,其中的 x 是 0-9 或 a-f范围内的一个32位十六进制数.在理想情况下,任何计算机和计算机集群都不会生成两个相同的UUID. 1.第一种 function guid() {

  • JS数组降维的几种方法详解

    二维数组降维 使用数组实例方法concat和ES6扩展运算符降维 let arr=[1,2,[3,4],5]; let arr1=[].concat(...arr); //先使用扩展运算符打散最外边的数组,concat自带打散粘合数组的功能 console.log(arr1); // [1, 2, 3, 4, 5] //ES6之前用apply打散数据的兼容性写法 var arr2=[1,2,[3,4],5]; var arr3=[].concat.apply([],arr2); console.

  • JavaScript数组去重的几种方法效率测试

    JavaScript数组去重的几种方法效率测试

    以下是我针对网上三种高效率方法总结与效率测试,如果大家有更好的意见或建议也可以提出,大家共勉学习. 数组去重法1: Array.prototype.unique1 = function(){ console.time("数组去重法1"); //记录开始执行的时间 var arr = []; //创建一个临时数组 var obj = {}; //创建一个空对象 for(var i = 0; i < this.length; i++){ //遍历当前要去重的数组 if(!obj[th

  • JavaScript数组去重的3种方法和代码实例

    数组去重的方法有很多,到底哪种是最理想的,自己不清楚.于是自己测试了下数组去重的效果和性能.测试十万个数据,代码和所耗大概时间如下. 到底采用哪种方法,根据实际情况而定吧. /*方法一: 1,'1' 会被认为是相同的; 所有hash对象,如:{x;1},{y:1}会被认为是相同的 //10ms */ Array.prototype.unique=function(){ var newArr=[],obj={}; for(var i=0,len=this.length;i<len;i++){ if

  • JavaScript数组去重的几种方法详谈

    目录 一.Set去重 二.双重for循环去重 三.利用indexOf去重 四.利用icludes去重 五.filter 六.Map 总结 一.Set去重 function funSet(arr){ return Array.from(new Set(arr)); } 二.双重for循环去重 function funFor(arr){ for(let i=0,len=arr.length;i<len;i++){ for(let j=i+1,len=arr.length;j<len;j++){ i

  • JS数组的常用10种方法详解

    数组在JavaScript中经常使用,如何对数组进行增删改非常重要,下面为数组的常用方法: 在数组末尾插入元素 arr.push(value),在数组的末尾添加一个或多个元素,并返回数组的新长度. 例如: let arr=[1,2,3,4,5] var longth=arr.push(6,7); console.log(arr, longth); 数组的arr的值变为arr[1,2,3,4,5,6,7]; length接收返回的是修改后数组的长度7; 删除数组末尾的元素 arr.pop()删除索

随机推荐