es6 数组去重_js数组去重的7种方法

背景

在前端面试中,关于如何实现数组元素去重一直是一个高频考点,我总结整理了几种实现方案,现分享给大家。

注:本文讨论的数组去重,仅仅是针对简单类型元素,而非多维数组和对象数组。

1. 双重for循环法

最容易想到的应该就是通过for循环,遍历数组。如下列代码所示:

var arr = [ 1, 2, 2, 3, 5, 2, 3, 1 ];
var deduplicate = function(arr) {
   for (var i = 0; i 1; i++) {
       for (var j = i + 1; j            if(arr[i] === arr[j]){
               arr.splice(j, 1);
               j--;
           }
       }
   }
   return arr;
}
deduplicate(arr);// [1, 2, 3, 5]

在该代码段中,执行两层循环,以判断是否有重复值,若有,就依次删除掉末尾的值。其思想有点类似于选择排序(Selection Sort),每执行一次外层循环,都可以过滤掉一组相同的值。

2. for + includes法

如下列代码所示:

const arr = [1, 2, 2, 3, 5, 2, 3, 1];
const deduplicate = function(arr) {
   const result = [];
   for (let item of arr) {
       if(!result.includes(item)) {
         result.push(item)
      }
   }
   return result;
}
deduplicate(arr);// [1, 2, 3, 5]

在该代码段中,首先在函数内声明一个临时变量result,然后遍历目标数组,判断result中是否存在当前遍历值,如果不存在,就压入。

3. indexOf 与 lastIndexOf 比较法

代码如下所示:

var arr = [1, 2, 2, 3, 5, 2, 3, 1];
var deduplicate = function(arr) {
   arr.forEach(function(item) {
       if (arr.indexOf(item) !== arr.lastIndexOf(item)) {
           arr.splice(arr.lastIndexOf(item), 1);
       };
   });
   return arr;
}

这个方法的核心点就是判断一个值的正向序和逆向序是否相同,若不同,则说明该值重复,移除掉重复值即可。

4. filter + indexOf

代码如下所示:

const arr = [1, 2, 2, 3, 5, 2, 3, 1];
const deduplicate = arr => 
  arr.filter((it, ix) => arr.indexOf(it) === ix)

filter方法会对源数组进行遍历,筛选出符合指定条件的数组项。

5. for + sort

代码如下所示:

var arr = [1, 2, 2, 3, 5, 2, 3, 1];
var deduplicate = function(arr) {
  var sortedArr = arr.sort();
  var result = [sortedArr[0]];
  for(var i = 1; i     if(sortedArr[i] !== sortedArr[i - 1]) {
      result.push(sortedArr[i]);
    }
  }
  return result;
}

先通过sort方法对数组进行排序,再对数组元素进行两两比较,值不同,则压入即可。

6. 转换成对象

代码如下所示:

var arr = [1, 2, 2, 3, 5, 2, 3, 1];
var deduplicate = function(arr) {
  var result = {};
  arr.forEach(it => result[it] = it);
  return Object.values(result)
}

该方法利用了对象中的键不能重复的特点,将数组值作为对象属性键,再取出对象所有的值即可。

7.转换成集合

该方法是基于ES6(ES2015)提出的集合(Set)的概念。因为集合中没有重复元素,故将元素传入Set中,其会自动去重。如下所示:

const arr = [1, 2, 2, 3, 5, 2, 3, 1];
const deduplicate = arr => [...new Set(arr)];
关于我

如果觉得本文还不错,希望大家分享、点赞,本公众号前端快爆会定期为您推送最新技术文章,全都是硬菜干货~~

本文到此结束,感谢您的阅读,我们下篇文章见。

关注前端快爆

获取更多精彩

前端快爆

a79aeb586a630676ca470a725407d790.png

点下"在看",你最好看

ES6 数组方法 无论是使用 Set 数据结构、Array.prototype.filter() 函数,还是结合使用 Array.from() 和 Set 数据结构,都可以轻松地数组中的复元素。在处理数组时,有时候我们需要除其中的复元素,以便得到唯一的值。ES6 提供了几种方法来实现数组,下面我们将详细介绍这些方法,并提供相应的源代码。通过将数组转换为 Set,然后再将 Set 转换回数组,就可以实现数组。然后,我们使用 Set 对象数组转换为 Set。函数创建一个新数组,其中只包含原数组中的唯一元素。 阅读详情

相关推荐

【异常】解决 Claude Code 及第三方插件提示 “API Error: 404“ 的配置修复指南

在使用 Claude 相关的 CLI 工具(如)或 IDE 插件进行开发辅助时,配置错误的模型参数是导致连接失败的常见原因。本文将针对这一典型报错进行复盘与解决。

奶爸的编程之路,也就一周冷个三天 7652

js es6数组

方法一 … new Set let test=[1,2,1,2,3,5,4,8,6,1]; [...new Set(test)] //[1, 2, 3, 5, 4, 8, 6] 方法二 Array.from +new Set let test=[1,2,1,2,3,5,4,8,6,1]; Array.from(new Set(test)) //(7) [1, 2, 3, 5, 4, 8, 6] 方法三 Map.has 存在true let test=[1,2,1,2,3,5,4,8,6,1]; fun

qq_45576618的博客 444

软件设计师高频考点—套路题

学习交流的总结

秩沅 2504

vue js ES6 数组常用的几种方法

vue js ES6 数组常用的几种方法

DarlingYL的博客 2168

JavaScript数组ES6的两种方式

说明JavaScript数组这个问题,经常出现在面试题中,以前也写过一篇数组的文章,(JavaScript 数组的多种方法原理详解)但感觉代码还是有点不够简单,今天和大家再说两种方法,代码可是足够的少了。 解释方法一:function unique(arr) { const res = new Map(); return arr.filter((a) => !res(

FEWY的博客 3万+

js 数组的处理

js 数组的处理方法

qq_41979331的博客 349

日常工作中常用的一些数组方法

1.Es6 新增的 set 类似数组,但是它有一大特性就是所有元素都是唯一的,没有复。因此,我们可以利用这一唯一特性进行数组工作,这种方式代码是最少的,在不考虑性能的情况下,这是最方便的 function wipeRepeat(arr) { let set = new Set(arr); //此时的set是一个对象 arr1 = [...set]; //利用扩展运算符展开...

weixin_45356397的博客 253

数组方法大全

原文链接:再见,复的你(数组)思路一:双层循环,外层循环元素,内层循环时比较值 如果有相同的值则跳过,不相同则push进数组Array.prototype.distinct = function(){ var arr = this, result = [], i, j, len = arr.length; for(

PkJY 5697

数组方法小结

1.最基本的方法 思路:定义一个新数组,并存放原数组的第一个元素,然后将元素组一一和新数组的元素对比,若不同则存放在新数组中。 function unique(arr){  var res = [arr[0]];   for(var i=1;i<arr.length;i++){     var repeat = false;  ...

weixin_33896726的博客 134

JS数组操作:,交集,并集,差集

原文:JS数组操作:,交集,并集,差集 1. 数组 方法一: function unique(arr) { //定义常量 res,值为一个Map对象实例 const res = new Map(); //返回arr数组过滤后的结果,结果为一个数组 //过滤条件是,如果res中没有某个键,就设置这个键的值为...

weixin_34192993的博客 111

js 数组的差集_JS数组差集、并集、交集方法记录

这边记录一下自己遇到的数组的办法。本文章希望能帮助到有需要的小伙伴。我还是相信-好记性不如烂笔头~需求:有2个数组 let a =[1,2,3,4]; let b = [3,4,5,6] 分别求出a b 2个数组的差集 并集 交集;方法一:ES7 Array.prototype.includesincludes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true...

weixin_42395245的博客 403

7个实用案例掌握ES6数组reduce方法:从基础到高级的完整指南

ES6(ECMAScript 2015)引入的数组reduce方法JavaScript中功能最强大的数组方法之一,它提供了一种高效的方式来处理数组数据。本文将通过7个实用案例,详细介绍reduce方法的基础用法和高级应用技巧,帮助你轻松掌握这个强大的工具。 ## 一、reduce方法基础:理解累加器模式 reduce方法的核心思想是将数组中的每个元素通过一个累加器函数进行处理,最终将数组缩减

gitblog_01022的博客 1083

前端js语法摘录--笔记

Object.entries():返回一个给定对象自身可遍历属性[key,value]的数组,方便map()方法遍历。3.1二维数组转一维数组(利用concat方法可以将传入的数组参数与当前数组拼接)Object.values():返回一个给定对象所有可枚举属性值的数组。1.includes:检测数组中是否包含某个元素,返回值是布尔值。指数(乘方)exponentiation运算符。5.取0.0 – 1.0之间的随机数。1.转换所有值的绝对值。2.指数操作符:**3.2多维数组转一维。

H_zhiyi的博客 574

JavaScript基础

class b { constructor(ecutor){ ecutor(this) } } let a = new b(()=>{ console.log(this) // window }) 数组和字符方法 parseInt(5.11) // 取整 Math.floor(5.92) // 5 向下取整 Math.ceil(5.0244) // 6 向上取整 ...

weixin_52026514的博客 889

前端实现数组,如何高效快捷?

数组 1、双循环 双重for(或while)循环是比较笨拙的方法,它实现的原理很简单:先定义一个包含原始数组第一个元素的数组,然后遍历原始数组,将原始数组中的每个元素与新数组中的每个元素进行比对,如果不复则添加到新数组中,最后返回新数组;因为它的时间复杂度是O(n^2),如果数组长度很大,那么将会非常耗费内存. function unique(arr) { ...

denggen20020210的博客 769

JavaScript数组(12种方法,史上最全)

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

java面试笔试 440

es6两个数组包含对象对比

对于两个数组之间 一个数组很容易 let arr = [12,45,97,9797,564,134,45642] let set = new Set(arr) console.log(Array.from(set, item => item + 1)) // [ 13, 46, 98, 9798, 565, 135, 45643 ] 数组包含对象该如何,过滤呢? 如图: 第一个数组,是对比的数组,第二个数组与第一个进行对比过滤 上代码: console.log('第一个数组'

qq_45018844的博客 2270

Javascript数组方法汇总

前言 关于数组,也算是一个比较常见的面试题了。但是有点开发经验的同学又会发现,前端数组的操作很少见(也可能是我个人经验不足遇到的比较少)。这是为什么呢?。我感觉可能是大部分的操作被后端处理了。个人见解! 虽然,前端很少用到。本着爱(kuai)与(su)和(zhang)平(xin)的精神,我们也来学习一波! 方法汇总 一、IndexOf IndexOf是数组的一个原生方法,当你传入一个参...

szy1000的专栏 516

es6数组_JavaScript 数组

JavaScript 数组数组, 一般都是在面试的时候才会碰到, 一般是要求手写数组方法的代码. 如果是被提问到, 数组方法有哪些? 你能答出其中的 10 种, 面试官很有可能对你刮目相看.在真实的项目中碰到的数组, 一般都是后台处理, 很少让前端处理数组. 虽然日常项目用到的概率比较低, 但还是需要了解一下, 以防面试的时候可能回被问到.本文是基于 JavaScrip...

weixin_39913141的博客 289

javascript/ES6实现数组的常用方法

1.利用双层for循环 let arr = [1,2,3,4,4,'hello',4,5,5,6,8,9,'hello'] let unique = (arr) => { // 前面一项 for(i=0;i<arr.length;i++){ // 后面一项 for(j=i+1;j<arr.length;j++){ if(arr[i]===arr[j]){ arr.splice(j,1)

m0_48622990的博客 2143

SMT工程师面试试题.pdf

SMT工程师面试试题.pdf

上一篇: java zip压缩_震惊!我居然写出了java提取zip文件的算法!
下一篇: python查看函数消耗的内存_如何查看内存占用和运行速度
weixin_39874366
博客等级 码龄9年 32粉丝 133原创
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值