前端小技巧: 数组去重的15种方法

已于 2023-11-11 14:44:02 修改
阅读量1.6k 收藏 6
点赞数 1
分类专栏： Javascript Web 文章标签： 前端 小技巧
于 2023-11-11 14:12:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tyro_java/article/details/134345955
版权

考虑计算效率的几种方法

1 ) Array.from + Set 去重

function unique(arr) {
    return Array.from(new Set(arr));
}

const res = unique([30, 10, 20, 30, 40, 10])
console.log(res) // [30, 10, 20, 40]

2 ) Set + rest参数 去重

function unique(arr) {
    return [...new Set(arr)];
}

const res = unique([30, 10, 20, 30, 40, 10])
console.log(res) // [30, 10, 20, 40]

3 ) 传统去重: 循环 + indexOf

function unique(arr) {
   const res = [];
   arr.forEach(item => {
       if (res.indexOf(item) < 0) res.push(item);
   })
  return res;
}
const res = unique([30, 10, 20, 30, 40, 10])
console.log(res) // [30, 10, 20, 40]

3 ) 传统去重: 循环 + indexOf + lastIndexOf

function unique(arr) {
   const res = [];
   arr.forEach(item => {
       if (res.indexOf(item) < 0) res.push(item);
   })
  return res;
}
const res = unique([30, 10, 20, 30, 40, 10])
console.log(res) // [30, 10, 20, 40]

4 ) 传统去重: 循环 + includes

function unique(arr) {
   const res = [];
   arr.forEach(item => {
       if (!res.includes(item)) res.push(item);
   })
  return res;
}
const res = unique([30, 10, 20, 30, 40, 10])
console.log(res) // [30, 10, 20, 40]

5 ) json对象去重

function unique(arr) {
    const json = {};
    const tmp = [];
    arr.forEach(item => {
        if (!json[item]) {
            json[item] = 1; // 1 或 true
            tmp.push(item);
        }
    });
    return tmp;
}
const res = unique([30, 10, 20, 30, 40, 10])
console.log(res) // [30, 10, 20, 40]

6 ) map去重，思路同json对象去重

function unique(arr) {
    const map = new Map();
    const tmp = [];
    arr.forEach(item => {
    	// 判断是否存在该key值, 当前值作为map的key值
    	if (!map.has(item)) {  
            map.set(item, 1); // 1 或 true
            tmp.push(item);
        }
    });
    return tmp;
}
const res = unique([30, 10, 20, 30, 40, 10])
console.log(res) // [30, 10, 20, 40]

7 ) 排序 + 循环 去重 (因为存在排序，结果可能会和其他去重方式得到的结果不一致，但去重效果一致)

function unique(arr) {
	// 1. 先让arr有序
    arr.sort();
    // 2. 循环对比相邻元素，
    const tmp = [];
    arr.forEach((item, index) => {
		// 备注：这里最后一次对比，会存在越界，但是越界不影响结果
		if (item !== arr[index + 1]) tmp.push(item);
	})
    // 3. 返回最终结果
    return tmp;
}
const res = unique([30, 10, 20, 30, 40, 10]);
console.log(res) // [10, 20, 30, 40]

8 ) 排序 + 递归 去重 (因为存在排序，结果可能会和其他去重方式得到的结果不一致，但去重效果一致)

function unique(arr) {
	// 1. 先让arr有序
    arr.sort();
    // 2. 递归移除相邻重复元素
    (function recursionFn(index) {
    	if (index > arr.length - 2) return;
    	if (arr[index] === arr[index + 1]) arr.splice(index, 1);
    	recursionFn(index + 1);
    })(0);
    // 3. 返回最终结果
    return arr;
}
const res = unique([30, 10, 20, 30, 40, 10]);
console.log(res) // [10, 20, 30, 40]

9 ) reduce + includes 归并去重

function unique(arr) {
	// 1. 定义归并方法
	const reduceFn = (prevArr, cur) => {
		if (prevArr.includes(cur)) {
			return prevArr;
		}
		prevArr.push(cur);
		return prevArr;
	}
	// 2. 进行归并处理
	const tmp = [];
	arr.reduce((prevArr, cur) => reduceFn (prevArr, cur), tmp);
	// 3. 返回最终结果
    return tmp;
}
const res = unique([30, 10, 20, 30, 40, 10]);
console.log(res) // [30, 10, 20, 40]

10 ) reduce + indexOf 归并去重

function unique(arr) {
	// 1. 定义归并方法
	const reduceFn = (prevArr, cur) => {
		if (prevArr.indexOf(cur) !== -1) {
			return prevArr;
		}
		prevArr.push(cur);
		return prevArr;
	}
	// 2. 进行归并处理
	const tmp = [];
	arr.reduce((prevArr, cur) => reduceFn (prevArr, cur), tmp);
	// 3. 返回最终结果
    return tmp;
}
const res = unique([30, 10, 20, 30, 40, 10]);
console.log(res) // [30, 10, 20, 40]

11 ) filter + includes 去重

function unique(arr) {
	let tmp = [];
    return arr.filter(function(item, index) {
    	const isIn = tmp.includes(item);
    	if (!isIn) tmp.push(item);
        return !isIn;
    });
    tmp = null; // 释放
}

const res = unique([30, 10, 20, 30, 40, 10]);
console.log(res) // [30, 10, 20, 40];
  • filter 过滤符合某一规则的集合

12 ) 循环 + indexOf + lastIndexOf 去重

function unique(arr) {
    for(let i = 0; i < arr.length; i++) {
	   const current = arr[i];
	   const lastIndex = arr.lastIndexOf(current);
	   // 不管从前向后亦或是从后向前，索引一样才是唯一，不一样，则有重复，去除后面一项, i自减防止塌陷
	   if(i !== lastIndex) {
	       arr.splice(lastIndex, 1);
	       i --;
	   }
	}
	return arr;
}

const res = unique([30, 10, 20, 30, 40, 10]);
console.log(res) // [30, 10, 20, 40];

13 ) filter + indexOf 去重 (循环 + indexOf，循环 + indexOf + lastIndexOf 和 filter + includes 的优化版)

function unique(arr) {
    return arr.filter((item, index) => {
        return arr.indexOf(item, 0) === index;
    });
}

const res = unique([30, 10, 20, 30, 40, 10]);
console.log(res) // [30, 10, 20, 40];
  • 这种方式会跳过重复的元素
  • 备注: indexOf 第二个参数默认为 0 (可选)，范围在 0 ~ arr.length -1 之间

14 ) filter + hasOwnProperty 去重 (json对象去重的优化版)

function unique(arr) {
    const obj = {};
    return arr.filter(function(item, index) {
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    });
}

const res = unique([30, 10, 20, 30, 40, 10]);
console.log(res) // [30, 10, 20, 40];
  • 上述表达式: obj[typeof item + item] = true 结果为 true
    • 如果这样写 obj[typeof item + item] = 1 结果为1
    • 在 filter 中两者均可
  • typeof 1 + 1 值为: number1，通过数据类型和值来作为key
  • 注意，这里 直接调用对象的hasOwnProperty 这样用，可能在一些规范下报错，参考如下改写
    const aa = {a: 222}
Object.hasOwnProperty.call(aa, 'a') // true

效率较低的方法

1 ）嵌套for循环

function unique(arr) {
	for(let i=0; i<arr.length; i++) {
		for(let j=i+1; j<arr.length; j++) {
			if (arr[i] === arr[j]) {
				arr.splice(j, 1); // 如果有重复，移除后面的一项
				j --; // 防止 arr 错位坍塌
			}
		}
	}
	return arr;
}

const res = unique([30, 10, 20, 30, 40, 10]);
console.log(res) // [30, 10, 20, 40];
  • 这种嵌套循环的方式，每一轮循环找到唯一项，并删除可能的重复项

总结

  • 去重，就是去除重复的选项，得到一组唯一的选项集合的过程
  • 上述整理了15种去重方式，大同小异，只是实现方式上的区别
  • 注意: 在前端或者说javascript中的集合，是可以使用不同的数据类型的
    • 所以，需要注意上述方法中的一些适用场景
Wang's Blog
关注
专栏目录
js：数组去重
weixin_44384273的博客
08-16 299
数组去重
[前端攻坚]：数组去重的几种方法
最新发布
小陈的博客
12-20 4744
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
JavaScript数组去重（12种方法）
你好瘦
03-05 448
一、利用ES6 Set去重（ES6中最常用） function unique (arr) { return Array.from(new Set(arr)) } var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a'...
前端数组去重
weixin_30555753的博客
03-21 302
数组去重1 （利用对象） Array.prototype.unique1 = function(){ var arr = [], obj = {}, len = this.length; for(var i = 0; i < len;i++ ){ if(!obj[this[i]]){ //true obj[this[i]] = 1; arr.push(this[i]);...
前端数组去重方法
weixin_37150764的博客
10-21 348
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script ty
web前端数组处理之数组去重
xiaoxijinger的博客
04-07 2401
在web前端开发过程中避免会遇到很多数组需要处理，经常出现的问题就是数组去重，今天小千就来给大家介绍一下几种常见的数组去重的方式，大家可以学习一下以备不时之需。 数组去重概念：去除数组中重复重新的值 方法一：循环遍历截取 原理:通过每次循环遍历比较当前值在不在数组中，在就删除当前值并且索引减一，弊端，会改变原数组 方法二：借助indexOf()方法 原理：判断此元素在该数组中首次出现的位置下标与循环的下标是否相等 与方法一类似 方法三：借助新数组和indexOf()方法 原理：通过indexOf方判断当
JavaScript数组去重算法实例小结
10-18
JavaScript数组去重是前端开发中常见的问题之一，尤其是在处理数据时，为了保证数据的唯一性，常常需要去除数组中的重复元素。本文将针对JavaScript数组去重算法进行详细讲解，并通过实例分析去重操作涉及的读写、...
JavaScript基础入门-数组去重的深入应用
最简单的数组去重方法是利用双重循环进行遍历比较，然后将重复的元素去除。另外，还可以利用对象属性的唯一性来进行去重，以及利用Array的indexOf方法和includes方法等来判断元素是否已经存在于新数组中。 ```...
javascript 数组精简技巧小结
10-15
8. **求两个数组的交集**：通过先去重，然后使用`.filter()`和`.includes()`方法，可以找出两个数组的交集。例如： ```javascript let arr1 = [1, 2, 3], arr2 = [2, 3, 4]; let intersection = arr1.filter...
详解JS去重及字符串奇数位小写转大写
10-20
在前端开发中，对数组进行去重以及对字符串进行特定处理是非常常见且实用的需求。...通过上述方法，我们不仅能够实现数组去重，还能实现字符串中特定位置字符的转换，这些技巧在JavaScript前端开发中非常实用。
JavaScript前端开发时数值运算的小技巧
10-15
在JavaScript前端开发中，数值运算是一个非常基础且重要的部分。本文将详细介绍一些在数值运算中...以上就是JavaScript前端开发时在数值运算中可以使用的一些小技巧。掌握了这些技巧，可以更高效地编写JavaScript代码。
前端js对数组去重
weixin_50756063的博客
08-21 128
unique(arr) { // let arr = []; // let obj = {}; // obj.text = ""; // obj.value = ""; // arr.push(obj); let unique = {}; arr.forEach(function (item) { unique[JSON.stringify(item, ["text", "value"])] = item; //键名顺序问题
前端开发：JavaScript中数组去重的方法汇总
软贱开发攻城狮
11-12 1668
前言 在前端开发的时候，对于数据处理是很重要的一块，尤其是要根据实际的业务需求来处理数据，有很强的兼容性要求。而且有些时候后端提供的数据和实际的业务需求数据是有偏差的，所以前端在拿到后台返回的数据之后，需要对数据进行“二次加工”处理，从而来满足业务需求。那么本篇文章就来分享一下在处理数据时候比较重要的一种方式：JavaScript中对数组进行合并之后的去重操作，这是一个比较常见的操作，分享出来，提供查阅使用。 JavaScript中数组去重 在JavaScript中对数组进行去...
前端必会的数组去重的四大实现方案
沛沛呀、
05-07 553
ES6 : Set let ary = [12, 23, 12, 15, 25, 23, 25, 14, 16]; let arr = [...new Set(ary)] //使用展开运算符 let arr = Array.from(new Set(ary)) //使用Array.from 拿所有项和其后面的每一项进行对比，如果有重复的话就删除（最后一项不拿，因为其后面没有东西进行比较了） let ary = [12, 23, 12, 15, 25, 23, 25, 14, 16]; f.
前端手写(五)——数组去重
weixin_47450807的博客
03-27 1636
一、数组去重 今天我们总结一下，数组中如果存在一些重复的元素，我们该如何去解决。 二、实现方法 2.1、set方法实现数组去重 let arr = [2, 3, 4, 5, 4, 3, 3, 2] let newArr = [...new Set(arr)] console.log(newArr) //[2,3,4,5] 2.2、使用indexOf实现数组去重 let arr = [2, 3, 4, 5, 4, 3, 3, 2] let newArr = arr.filter((value, index)
前端-数组去重
m0_46258749的博客
07-13 2130
前端-数组去重1.利用es6 Set去重2.indexOf()去重3.双层嵌套循环，splice删除值4.利用对象的属性不能相同来去重5.es6数组新增includes方法 HAC无聊刷刷，兜兜转转大学三年过去了，之前也是一直有想写博客的想法，不过却是由于技术的不到位和对知识的认知不全（该死的拖延症），经过这个一个月的沉淀，终于是写了第一篇博客，对于前端数组去重方法的一些总结。（备注：新手写博客，可能车祸现场！！！） 1.利用es6 Set去重 利用set来进行去重是es6里最常用的，这种形式的去重很是快速
JavaScript数组去重：12种方法解析
"这篇文章汇总了JavaScript中12种数组去重的方法，涵盖了从基础到进阶的各种技巧，包括ES6的Set、for循环嵌套、splice等。文章旨在帮助开发者在面试时能全面回答数组去重的问题，同时也适用于理论学习。尽管在实际...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wang's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值