JS实现数组去重

        数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码。如果是被提问到,数组去重的方法有哪些?你能答出其中的 10 种,面试官很有可能对你刮目相看。

        在真实的项目中碰到的数组去重,一般都是后台去处理,很少让前端处理数组去重。虽然日常项目用到的概率比较低,但还是需要了解一下,以防面试的时候可能回被问到。

        注:写的匆忙,加上这几天有点忙,还没有非常认真核对过,不过思路是没有问题,可能一些小细节出错而已。

一、利用 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', 'a',{},{}];
console.log(unique(arr))//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

        不考虑兼容性,这种去重的方法代码最少。这种方法还无法去掉 {} 空对象,后面的高阶方法会添加去掉重复 {} 的方法。

二、利用 for 嵌套 for,然后 splice 去重(ES5 中最常用)

function unique(arr){            for(var i=0; i<arr.length; i++){for(var j=i+1; j<arr.length; j++){if(arr[i]==arr[j]){         //第一个等同于第二个,splice方法删除第二个arr.splice(j,1);j--;}}}
return arr;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr))//[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]     //NaN和{}没有去重,两个null直接消失了

        双层循环,外层循环元素,内层循环时比较值。值相同时,则删去这个值。

三、利用 indexOf 去重

function unique(arr) {if (!Array.isArray(arr)) {console.log('type error!')return}var array = [];for (var i = 0; i < arr.length; i++) {if (array .indexOf(arr[i]) === -1) {array .push(arr[i])}}return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))// [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]  //NaN、{}没有去重

        新建一个空的结果数组,for 循环原数组,判断结果数组是否存在当前元素,如果有相同的值则跳过,不相同则 push 进数组。

四、利用 sort()

function unique(arr) {if (!Array.isArray(arr)) {console.log('type error!')return;}arr = arr.sort()var arrry= [arr[0]];for (var i = 1; i < arr.length; i++) {if (arr[i] !== arr[i-1]) {arrry.push(arr[i]);}}return arrry;
}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr))
// [0, 1, 15, "NaN", NaN, NaN, {…}, {…}, "a", false, null, true, "true", undefined]      //NaN、{}没有去重

        利用 sort() 排序方法,然后根据排序后的结果进行遍历及相邻元素比对。

五、利用对象的属性不能相同的特点进行去重(这种数组去重的方法有问题,不建议用,有待改进)

function unique(arr) {if (!Array.isArray(arr)) {console.log('type error!')return}var arrry= [];var  obj = {};for (var i = 0; i < arr.length; i++) {if (!obj[arr[i]]) {arrry.push(arr[i])obj[arr[i]] = 1} else {obj[arr[i]]++}}return arrry;
}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr))
//[1, "true", 15, false, undefined, null, NaN, 0, "a", {…}]    //两个true直接去掉了,NaN和{}去重

六、利用 includes

function unique(arr) {if (!Array.isArray(arr)) {console.log('type error!')return}var array =[];for(var i = 0; i < arr.length; i++) {if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值array.push(arr[i]);}}return array
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr))//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]     //{}没有去重

七、利用 hasOwnProperty

function unique(arr) {var obj = {};return arr.filter(function(item, index, arr){return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)})
}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]   //所有的都去重了

        利用 hasOwnProperty 判断是否存在对象属性

八、利用 filter

function unique(arr) {return arr.filter(function(item, index, arr) {//当前元素,在原始数组中的第一个索引==当前索引值,否则返回当前元素return arr.indexOf(item, 0) === index;});
}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]

九、利用递归去重

function unique(arr) {var array= arr;var len = array.length;array.sort(function(a,b){   //排序后更加方便去重return a - b;})function loop(index){if(index >= 1){if(array[index] === array[index-1]){array.splice(index,1);}loop(index - 1);    //递归loop,然后数组去重}}loop(len-1);return array;
}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

十、利用 Map 数据结构去重

function arrayNonRepeatfy(arr) {let map = new Map();let array = new Array();  // 数组用于返回结果for (let i = 0; i < arr.length; i++) {if(map .has(arr[i])) {  // 如果有该key值map .set(arr[i], true); } else { map .set(arr[i], false);   // 如果没有该key值array .push(arr[i]);}} return array ;
}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

        创建一个空 Map 数据结构,遍历需要去重的数组,把数组的每一个元素作为 key 存到 Map 中。由于 Map 中不会出现相同的 key 值,所以最终得到的就是去重后的结果。

十一、利用 reduce+includes

function unique(arr){return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr));
// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

十二、[...new Set(arr)]

[...new Set(arr)] 
//代码就是这么少----(其实,严格来说并不算是一种,相对于第一种方法来说只是简化了代码)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/166777.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构-树

参考&#xff1a;https://www.hello-algo.com/chapter_tree/binary_tree/#711 1. 介绍 树存储不同于数组和链表的地方在于既可以保证数据检索的速度&#xff0c;又可以保证数据插入删除修改的速度&#xff0c;二者兼顾。 二叉树是一种很重要的数据结构&#xff0c;是非线性的…

【学习篇】Linux中grep、sed、awk

Linux 文本处理三剑客 – awk, sed, grep grep过滤文本 https://zhuanlan.zhihu.com/p/561445240 grep 是 Linux/Unix 系统中的一个命令行工具&#xff0c;用于从文件中搜索文本或字符串。grep 代表全局正则表达式打印。当我们使用指定字符串运行 grep 命令时&#xff0c;如…

Mysql并发时常见的死锁及解决方法

使用数据库时&#xff0c;有时会出现死锁。对于实际应用来说&#xff0c;就是出现系统卡顿。 死锁是指两个或两个以上的事务在执行过程中&#xff0c;因争夺资源而造成的一种互相等待的现象。就是所谓的锁资源请求产生了回路现象&#xff0c;即死循环&#xff0c;此时称系统处于…

星河创新,开拓新纪!2023“星河产业应用创新奖”报名全面开启!

科技的浪潮汹涌而至&#xff0c;人工智能正悄无声息地渗透进我们生活的每一个角落&#xff0c;成为推动社会奔腾向前的强大引擎。 随着大模型时代到来&#xff0c;更多的创新者涌现出来&#xff0c;他们正积极探索AI与实体的深度融合&#xff0c;解决行业难题&#xff0c;开拓…

算法的奥秘:种类、特性及应用详解(算法导论笔记1)

算法&#xff0c;是计算机科学领域的灵魂&#xff0c;是解决问题的重要工具。在算法的世界里&#xff0c;有着各种各样的种类和特性。今天&#xff0c;我将带各位踏上一段探索算法种类的旅程&#xff0c;分享一些常见的算法种类&#xff0c;并给出相应的实践和案例分析。希望通…

c# 微信小程序支付,订单录入发货

微信改动&#xff0c;大家一起改&#xff0c;来吧 private string GetAccessToken(string openid){string AppID "";string AppSecret "";string url "https://api.weixin.qq.com/cgi-bin/token?grant_typeclient_credential&appid"AppI…

华纳云:Linux每天自动备份mysql数据库怎么实现

在 Linux 系统中&#xff0c;你可以使用 cron 任务来定期执行 MySQL 数据库备份。以下是一个简单的步骤&#xff0c;演示如何设置每天自动备份 MySQL 数据库&#xff1a; 创建备份脚本&#xff1a; 创建一个 Shell 脚本&#xff0c;其中包含备份 MySQL 数据库的命令。假设脚本名…

【目标检测】保姆级别教程从零开始实现基于Yolov8的一次性筷子计数

前言 一&#xff0c;环境配置 一&#xff0c;虚拟环境创建 二&#xff0c;安装资源包 前言 最近事情比较少&#xff0c;无意间刷到群聊里分享的基于百度飞浆平台的一次性筷子检测&#xff0c;感觉很有意思&#xff0c;恰巧自己最近在学习Yolov8&#xff0c;于是看看能不能复…

前端JS数据时间排序

一、sort()方法 var data [ { name:‘1’, time:‘2019-04-26 10:53:19’ }, { name:‘2’, time:‘2019-04-26 10:51:19’ },{ name:‘3’, time:‘2019-04-26 11:04:32’ },{ name:‘4’, time:‘2019-04-26 11:05:32’ } ] data.sort(function(a,b){ return a.time < b…

js进阶笔记之作用域

目录 全局作用域 局部作用域 函数作用域 块作用域 作用域链 闭包 垃圾回收机制 作用域&#xff08;scope&#xff09;规定了变量能够被访问的“范围”&#xff0c;离开了这个“范围”变量便不能被访问&#xff0c;作用域分为全局作用域和局部作用域。 全局作用域 <…

【Go语言从入门到实战】反射编程、Unsafe篇

反射编程 reflect.TypeOf vs reflect.ValueOf func TestTypeAndValue(t *testing.T) {var a int64 10t.Log(reflect.TypeOf(a), reflect.ValueOf(a))t.Log(reflect.ValueOf(a).Type()) }判断类型 - Kind() 当我们需要对反射回来的类型做判断时&#xff0c;Go 语言内置了一个…

【23真题】最简单的211!均分141分!

今天分享的是23年河海大学863的信号与系统试题及解析。 我猜测是由于23年太简单&#xff0c;均分都141分&#xff0c;导致24考研临时新增一门数字信号处理&#xff01;今年考研的同学赶不上这么简单的专业课啦&#xff01; 本套试卷难度分析&#xff1a;平均分为102和141分&a…

ECharts与DataV:数据可视化的得力助手

文章目录 引言一、ECharts简介优势&#xff1a;劣势&#xff1a; 二、DataV简介优势&#xff1a;劣势&#xff1a; 三、ECharts与DataV的联系四、区别与选择五、如何选择根据需求选择技术栈考虑预算和商业考虑 结论我是将军&#xff0c;我一直都在&#xff0c;。&#xff01; 引…

LeetCode题解:13. 罗马数字转整数,哈希表,JavaScript,详细注释

原题链接&#xff1a;13. 罗马数字转整数 解题思路&#xff1a; 本题涉及到的罗马数字都是唯一的&#xff0c;因此可以创建一个哈希表&#xff0c;存储罗马数字和整数的对应关系。遍历s&#xff0c;分别截取从i开始的2位和1位字符串&#xff0c;查看其在哈希表中的罗马数字对…

pytest调用其他测试用例方法

pytest调用其他测试用例方法 一. 第一种方法&#xff0c;测试用例前置pytest.fixture() def test1():print("我是用例一") pytest.fixture(test1) def test2():print("我是用例二")二.第二种方法,如果不是同一文件中测试用例调用或者同一py文件中 def t…

3.10-容器的操作

这一节讲解一下对于container我们可以进行哪些操作&#xff1f; 可以使用以下命令来停止正在运行的Docker容器&#xff1a; docker container stop <CONTAINER ID> 关于运行中的容器&#xff0c;我们可以进行的操作&#xff1a; 第一个是docker exec命令&#xff0c;这个…

NLP实践——LLM生成过程中防止重复循环

NLP实践——LLM生成过程中防止重复 1. 准备工作2. 问题分析3. 创建processor3.1 防止重复生成的processor3.2 防止数字无规则循环的processor 4. 使用 本文介绍如何使用LogitsProcessor避免大模型在生成过程中出现重复的问题。 1. 准备工作 首先实例化一个大模型&#xff0c;…

实时语音克隆:5 秒内生成任意文本的语音 | 开源日报 No.84

CorentinJ/Real-Time-Voice-Cloning Stars: 43.3k License: NOASSERTION 这个开源项目是一个实时语音克隆工具&#xff0c;可以在5秒内复制一种声音&#xff0c;并生成任意文本的语音。 该项目的主要功能包括&#xff1a; 从几秒钟的录音中创建声纹模型根据给定文本使用参考…

数字化转型没钱?没人?没IT?低代码平台轻松帮你搞定

随着数字技术的不断渗透&#xff0c;数字化已经不仅仅是一个趋势&#xff0c;而是深入人心的日常生活部分。在这样的时代背景下&#xff0c;企业面临的挑战也愈发严峻&#xff1a;如何不断创新&#xff0c;满足用户日益增长的业务需求&#xff1f; 传统的开发方式&#xff0c;随…

基于单片机设计的大气气压检测装置(STC89C52+BMP180实现)

一、前言 本项目设计一个大气气压检测装置&#xff0c;该装置以单片机为基础&#xff0c;采用STC89C52作为核心控制芯片&#xff0c;结合BMP180模块作为气压传感器。大气气压&#xff0c;也就是由气体重力在大气层中产生的压力&#xff0c;其变化与天气预报、气象观测以及高度…