JS数组去重详情

目录
  • 1 测试用例
  • 2 JS 数组去重4大类型
    • 2.1 元素比较型
      • 2.1.1 双层 for 循环逐一比较(es5常用)
      • 2.1.2 排序相邻比较
    • 2.2 查找元素位置型
    • 2.2.1 indexOf
      • 2.2.2 findIndex
    • 2.3 元素是否存在型
      • 2.3.1 includes
      • 2.3.2 some
    • 2.4 依托数据结构特性
      • 2.4.1 Map
      • 2.4.2 Set(ES6 最常用)
  • 3 补充

1 测试用例

// 测试用例
const a = {};
const b = { c: 1 };
const array = [
  1, 1, "1", "1",
  {}, {}, { c: 1 }, { c: 1},
  a, a, b, b,
  [], [], [1], [1],
  undefined, undefined,
  null, null,
  NaN, NaN,
];

2 JS 数组去重4大类型

2.1 元素比较型

此类型通过数组元素之间进行比较来去重

2.1.1 双层 for 循环逐一比较(es5常用)

使用双层for循环逐一比较数组元素,用splice方法去除重复的元素

// 双层for循环
function uniq1(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--
            }
        }
    }
    return arr
}

// 去重结果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN,NaN]

通过对比去重前后结果,重复的NaN没有去掉,因为NaN === NaNfalse

2.1.2 排序相邻比较

使用sort()方法对数组元素进行排序,然后比较相邻元素,用splice方法去除重复的元素。

function uni2(arr) {
    arr.sort();
    for (let i = 0; i < arr.length - 1; i++) {
        arr[i] === arr[i + 1] && arr.splice(i + 1, 1) && i--;
    }
    return arr;
}

也可以创建新数组,将不重复的元素放入新数组中

function uniq3(arr) {
    arr = arr.sort()
    const newArr = [arr[0]]
    for (let i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i - 1]) {
            newArr.push(arr[i])
        }
    }
    return newArr
}

// 去重结果
// [[],[],1,'1',[1],[1],NaN,NaN,{},{},{c:1},{c:1},{},{c:1},null,undefined]

重复的NaN没有去掉,因为NaN === NaN为false
sort
默认排序顺序是将元素转换为字符串,对象转换为字符串都是[object Object] ,所以sort方法不能对数组中的对象进行排序,也就有可能无法去除重复的对象,除非重复的对象本就相邻

2.2 查找元素位置型

此类型通过查找元素第一次出现的位置来去重

2.2.1 indexOf

通过indexOf查找当前元素第一次出现的位置是否为当前位置,若是,则放入新数组

function uniq4(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (arr.indexOf(arr[i]) === i) {
            res.push(arr[i])
        }
    }
    return res
}

// 去重结果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null]

同样,因为NaN === NaNfalse,所以用indexOf查找NaN结果总是-1,从而在新数组中不会有NaN

2.2.2 findIndex

通过findIndex查找当前元素第一次出现的位置是否为当前位置,若是,则放入新数组

function uniq5(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (arr.findIndex(item => item === arr[i]) === i) {
            res.push(arr[i])
        }
    }
    return res
}
// 去重结果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null]

同样,因为NaN === NaNfalse,所以用findIndex查找NaN结果总是-1,从而在新数组中不会有NaN

2.3 元素是否存在型

此类型通过判断在新数组中是否存在当前元素来去重

2.3.1 includes

includes方法用来判断一个数组是否包含一个指定的值

function uniq6(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (!res.includes(arr[i])) {
            res.push(arr[i])
        }
    }
    return res
}
// 去重结果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN]

includes使用零值相等算法来确定是否找到给定的元素,所以可以判断NaN是否在新数组中存在

2.3.2 some

some方法用来测试数组中是否至少有1个元素通过了被提供的函数测试

function uniq7(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (!res.some(item => item === arr[i])) {
            res.push(arr[i])
        }
    }
    return res
}
// 去重结果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN,NaN]

同样,这里仍旧使用了===来比较元素,因为NaN === NaNfalse,所以新数组中会有多个NaN

2.4 依托数据结构特性

此类型通过ES6提供的数据结构MapSet本身不可重复特性来去重

2.4.1 Map

ES6提供的Map结构可以用各种类型的值(包括对象)当作键,且键是唯一的

function uniq8(arr) {
    const map = new Map()
    for (let i = 0; i < arr.length; i++) {
        !map.has(arr[i]) && map.set(arr[i], true)
    }
    return [...map.keys()]
}
// 去重结果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN]

map.has方法对NaN也有效

2.4.2 Set(ES6 最常用)

Set结构的成员的值都是唯一的,没有重复的值。

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

// 去重结果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN]

3 补充

上面所说的方法可以使用不同的Api进行改动,比如使用splice方法去除数组元素的地方,我们可以通过filter方法来过滤数组得到新数组;

再比如includes的方法中不用for循环遍历数组,通过reduce方法来代替等等。

总之,方法有很多,但是万变不离其宗

有些去重方法对NaN无效,因为NaN === NaNfalse,如果有需求,可以使用Object.is(NaN, NaN)true来进行修改

实际应用中,最常用的方法就是使用Set,也可以使用第三方库lodash来处理

到此这篇关于JS数组去重详情的文章就介绍到这了,更多相关JS数组去重内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JS数组中对象去重操作示例

    本文实例讲述了JS数组中对象去重操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net js数组中对象去重</title> </head> <body> <script> var tmp = [ { "

  • JS数组去重的6种方法完整实例

    本文实例讲述了JS数组去重的6种方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net 数组去重</title> </head> <body> <script> //1.filter:(indexOf)方法创建一个新的数组,新数组中的元素是通过检查指定

  • 高性能js数组去重(12种方法,史上最全)

    数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码.如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试官很有可能对你刮目相看. 在真实的项目中碰到的数组去重,一般都是后台去处理,很少让前端处理数组去重.虽然日常项目用到的概率比较低,但还是需要了解一下,以防面试的时候可能回被问到. 注:写的匆忙,加上这几天有点忙,还没有非常认真核对过,不过思路是没有问题,可能一些小细节出错而已. 数组去重的方法 一.利用ES6 Set去重(ES6中最常用) function u

  • js数组去重的方法总结

    一.普通的方法去重 1.简单的去重方法 // 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 */ function uniq(array){ var temp = []; //一个新的临时数组 for(var i = 0; i < array.length; i++){ if(temp.indexOf(array[i]) == -1){ temp.push(array[i]); } } return te

  • JS数组去重常用方法实例小结【4种方法】

    本文实例讲述了JS数组去重常用方法.分享给大家供大家参考,具体如下: js数组去重,老生长谈,今天对其进行一番归纳,总结出来4种方法 贴入代码前 ,先对浏览器Array对象进行支持indexOf和forEach的polyfill Array.prototype.indexOf = Array.prototype.indexOf || function(item) { for (var i = 0, j = this.length; i < j; i++) { if (this[i] === it

  • js数组去重的11种方法

    在实际工作或面试中,我们经常会遇到"数组去重"问题,接下来就是使用js实现的数组去重的多种方法: 1.将数组的每一个元素依次与其他元素做比较,发现重复元素,删除 var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5,5]; console.log(arr); //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5, 5] function noRepeat1(arr) { for(var i = 0;

  • JS数组属性去重并校验重复数据

    这篇文章主要介绍了JS数组属性去重并校验重复数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 新任务: 下拉框出去重复数据 //前端对象数组 按某个属性去重 其中jsonArray 是你要去重的对象数组 示例中 按name属性去重 //前端对象数组 按某个属性去重 var obj = {}; jsonArray = jsonArray.reduce(function(item,next){ obj[next.name]?'':obj[next

  • JS数组扁平化、去重、排序操作实例详解

    本文实例讲述了JS数组扁平化.去重.排序操作.分享给大家供大家参考,具体如下: 在网上看到一个校招题目,已知一个数组var arr = [[1, 3, 2, 1],[5, 3, 4, 8, 5, 6, 5],[6, 2, 8, 9, [4, 11, 15, 8, 9, 12, [12, 13, [10], 14]]], 16],用js编写一个程序将这个数组扁平化,并得到一个升序且无重复值的数组.得到最终结果为:[1,2,3,4,5,6,8,9,10,11,12,13,14,15,16].下面对数

  • js数组去重的N种方法(小结)

    对于数组去重我们有n种方法可以实现. es5实现方法 for循环+indexOf function unique(arr) { var uniqueArr = [], len = arr.length for (var i = 0; i < len; i++) { if (uniqueArr.indexOf(arr[i]) == -1) { uniqueArr.push(arr[i]) } } return uniqueArr } var arr = [1, 2, 3, 1, 5, "1&

  • JS数组去重的九种高阶方法(亲测有效)

    前言 一般的方法此处也不列举了,还是有很多的,如双层循环判断是否相等,或新建数组比较再push等等,需要注意的是,使用splice方法移除元素时,有可能会导致数组塌陷问题,需要处理一下 本文中介绍了多种数组去重的方法,使用了较多的高阶方法及API,并给出相应解释及语法,还有其他多种组合调用方式,原理逻辑其实都差不多,其中for循环可以与forEach方法相互转换,因此此处便不再一一列举,大家如果有更好的算法,可以留言给我,虚心请教!! 给定一个数组 [1,2,2,4,null,null,'3',

随机推荐