【跟着大佬学JavaScript】之数组去重（结果对比）

置顶 于 2022-07-20 23:31:38 发布
阅读量368 收藏 1
点赞数 3
分类专栏： 2022 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43485006/article/details/125902950
版权

前言

数组去重在面试和工作中都是比较容易见到的问题。

这篇文章主要是来测试多个方法，对下面这个数组的去重结果进行分析讨论。如果有不对的地方，还请大家指出。

 const arr = [ 1, 1, "1", "1", 0, 0, "0", "0", true, false, "true", "false", "a", "A", undefined, undefined, "undefined", null, null, 'null', NaN, NaN, +0, -0, new String("1"), new String("1"), Symbol(1), Symbol(1), {}, {}, /a/, /a/, [], [] ];

特殊类型

console.log(1 == "1"); // true
console.log(1 === "1"); // false

console.log(0 == "0"); // true
console.log(0 === "0"); // false

console.log(0 == +0); // true
console.log(0 === +0); // true

console.log(0 == -0); // true
console.log(0 === -0); // true

console.log(+0 == -0); // true
console.log(+0 === -0); // true

console.log(0 == false); // true
console.log(0 === false); // false

console.log(0 == undefined); // false
console.log(0 === undefined); // false

console.log(0 == null); // false
console.log(0 === null); // false

console.log(1 == true); // true
console.log(1 === true); // false

console.log(undefined == null); // true
console.log(undefined === null); // false

console.log(NaN == NaN); // false
console.log(NaN === NaN); // false

console.log(new String("1") == new String("1")); // false
console.log(new String("1") === new String("1")); // false
Object.prototype.toString.call(new String('1')) // '[object String]'


console.log(/a/ == /a/); // false
console.log(/a/ === /a/); // false
Object.prototype.toString.call(/a/); //'[object RegExp]'


console.log(Symbol(1) == Symbol(1)); // false
console.log(Symbol(1) === Symbol(1)); // false

console.log({} == {}); // false
console.log({} === {}); // false

console.log([] == []); // false
console.log([] === []); // false

接下来，我们看看下面多个去重方法，对以上特殊类型的去重效果。

代码一（暴力解法）

// 暴力解法一

function unique(array) {
    if (!Array.isArray(array)) {
      console.log("type error!");
      return;
    }
    const res = [array[0]];
    let arrLen = array.length;
    let resLen = res.length;
    
    for (let i = 0; i < arrLen; i++) {
      let flag = true;
      for (let j = 0; j < resLen; j++) {
        if (array[i] === res[j]) {
          flag = false;
          break;
        }
      }
      if (flag) {
        res.push(array[i]);
        resLen = res.length;
      }
    }
    return res;
}
// [1, '1', 0, '0', true, false, 'true', 'false', 'a', 'A', undefined, 'undefined', null, 'null', NaN, NaN, String {'1'}, String {'1'}, Symbol(1), Symbol(1), {}, {}, /a/, /a/, [], []]

输出：

[1, '1', 0, '0', true, false, 'true', 'false', 'a', 'A', undefined, 'undefined', null, 'null', NaN, NaN, String {'1'}, String {'1'}, Symbol(1), Symbol(1), {}, {}, /a/, /a/, [], []]

输出结果说明：

  1. 去重+0、-0、0
  2. NaN不去重
  3. 对象new String("1")、/a/、{}不去重
  4. 数组[]不去重
  5. Symbol(1)不去重

暴力解法，简单易理解，兼容性好。去重结果如上所示。

代码二（ES6）

// ES6 Array.from + Set 方法一
function unique(array) {
    if (!Array.isArray(array)) {
      console.log('type error!')
      return
    }
    return Array.from(new Set(array))
}

// ES6 点运算 + Set 方法二
function unique1(array) {
    if (!Array.isArray(array)) {
      console.log('type error!')
      return
    }
    return [...new Set(arr)]
}

// ES6 箭头函数 + 点运算 + Set 方法三
const unique2 = (array) => {
    if (!Array.isArray(array)) {
      console.log('type error!')
      return
    }
    return [...new Set(arr)]
}

// ES6 Map + ES5 filter  方法四
function unique3(array) {
    if (!Array.isArray(array)) {
      console.log('type error!')
      return
    }
    const seen = new Map()
    return array.filter((a) => !seen.has(a) && seen.set(a, 1))
}

输出：

[1, '1', 0, '0', true, false, 'true', 'false', 'a', 'A', undefined, 'undefined', null, 'null', NaN, String {'1'}, String {'1'}, Symbol(1), Symbol(1), {}, {}, /a/, /a/, [], []]

输出结果说明：

  1. 去重+0、-0、0
  2. 去重NaN
  3. 对象new String("1")、/a/、{}不去重
  4. 数组[]不去重
  5. Symbol(1)不去重

代码三（indexOf + forEach）

利用indexOf检测元素在新数组是否存在

// indexOf + forEach 利用indexOf检测元素在新数组是否存在
function unique(array) {
    if (!Array.isArray(array)) {
        console.log('type error!')
        return
    }
    const newArr = [];
    array.forEach((el) => {
      if (newArr.indexOf(el) === -1) {
        newArr.push(el);
      }
    });
    return newArr;
}

输出：

[1, '1', 0, '0', true, false, 'true', 'false', 'a', 'A', undefined, 'undefined', null, 'null', NaN, NaN, String {'1'}, String {'1'}, Symbol(1), Symbol(1), {}, {}, /a/, /a/, [], []]

输出结果说明：

  1. 去重+0、-0、0
  2. NaN不去重
  3. 对象new String("1")、/a/、{}不去重
  4. 数组[]不去重
  5. Symbol(1)不去重

代码四（indexOf + filter）

利用indexOf检测元素在数组中第一次出现的位置是否和元素现在的位置相等

// indexOf + forEach 利用indexOf检测元素在新数组是否存在
function unique(array) {
    if (!Array.isArray(array)) {
        console.log('type error!')
        return
    }
    return array.filter((item, index) => {
        return array.indexOf(item) === index;
    });
}

console.log([NaN].indexOf(NaN)); // -1

输出：

[1, '1', 0, '0', true, false, 'true', 'false', 'a', 'A', undefined, 'undefined', null, 'null', String {'1'}, String {'1'}, Symbol(1), Symbol(1), {}, {}, /a/, /a/, [], []]

输出结果说明：

  1. 去重+0、-0、0
  2. 两个NaN都会被删除
  3. 对象new String("1")、/a/、{}不去重
  4. 数组[]不去重
  5. Symbol(1)不去重

重点：

console.log([NaN].indexOf(NaN)); // -1

代码五（sort排序，不支持Symbol）

sort()方法主要是用于对数组进行排序，默认情况下该方法是将数组元素转换成字符串，然后按照ASC码进行排序

// sort()方法不支持Symbol，Symbol不支持转换成字符串
function unique(array) {
    if (!Array.isArray(array)) {
      console.log("type error!");
      return;
    }
    const sortArr = array.sort();
    const newArr = [];
    sortArr.forEach((el, i) => {
      if (sortArr[i] !== sortArr[i - 1]) {
        newArr.push(el);
      }
    });
    return newArr;
}

输出：

[[], [], /a/, /a/, 0, "0", 0, 1, "1", String {'1'}, String {'1'}, "A", NaN, NaN, {}, {}, "a", false, "false", null, "null", true, "true", "undefined", undefined]

输出结果说明：

  1. +0、-0、0、"0"位置不同会导致去重不了
  2. NaN不去重
  3. 对象new String("1")、/a/、{}不去重
  4. 数组[]不去重
  5. sort()方法不支持处理含有Symbol的数组

代码六（includes）

利用includes()方法检查新数组是否包含原数组的每一项

// 利用includes()方法检查新数组是否包含原数组的每一项
function unique(array) {
    if (!Array.isArray(array)) {
      console.log("type error!");
      return;
    }
    
    const newArr = [];
    array.forEach((el) => {
      newArr.includes(el) ? newArr : newArr.push(el);
    });
    return newArr;
}

输出：

[1, '1', 0, '0', true, false, 'true', 'false', 'a', 'A', undefined, 'undefined', null, 'null', NaN, String {'1'}, String {'1'}, Symbol(1), Symbol(1), {}, {}, /a/, /a/, [], []]

输出结果说明：

  1. 去重+0、-0、0
  2. 去重NaN
  3. 对象new String("1")、/a/、{}不去重
  4. 数组[]不去重
  5. Symbol不去重

代码七（includes+reduce）

利用includes()方法检查新数组是否包含原数组的每一项

// 利用includes()方法检查新数组是否包含原数组的每一项
function unique(array) {
    if (!Array.isArray(array)) {
      console.log("type error!");
      return;
    }
    
    return array.reduce((pre, cur) => {
      !pre.includes(cur) && pre.push(cur);
      return pre;
    }, []);
}

输出：

[1, '1', 0, '0', true, false, 'true', 'false', 'a', 'A', undefined, 'undefined', null, 'null', NaN, String {'1'}, String {'1'}, Symbol(1), Symbol(1), {}, {}, /a/, /a/, [], []]

输出结果说明：

  1. 去重+0、-0、0
  2. 去重NaN
  3. 对象new String("1")、/a/、{}不去重
  4. 数组[]不去重
  5. Symbol不去重

代码八（对象key）

利用了对象的key不可以重复的特性来进行去重

// 利用了对象的key不可以重复的特性来进行去重
function unique(array) {
    if (!Array.isArray(array)) {
      console.log("type error!");
      return;
    }
    
    const obj = {};
    const newArr = [];
    array.forEach((val) => {
      if (!obj[typeof val + JSON.stringify(val)]) {
        // 将对象序列化之后作为key来使用
        obj[typeof val + JSON.stringify(val)] = 1;
        newArr.push(val);
      }
    });
    return newArr;
}

输出：

[1, '1', 0, '0', true, false, 'true', 'false', 'a', 'A', undefined, 'undefined', null, 'null', NaN, String {'1'}, Symbol(1), {}, []]

输出结果说明：

  1. 去重+0、-0、0
  2. 去重NaN
  3. 去重对象new String("1")、{};两个/a/全部被删除了
  4. 去重数组[]
  5. 去重Symbol

将不该去重的Symbol去重了;将两个/a/全部删除了

总结

方法结果说明
for循环暴力解法[1, '1', 0, '0', true, false, 'true', 'false', 'a', 'A', undefined, 'undefined', null, 'null', NaN, NaN, String {'1'}, String {'1'}, Symbol(1), Symbol(1), {}, {}, /a/, /a/, [], []]1.去重+0、-0、0； 2.NaN不去重；3.对象new String(“1”)、/a/、{}不去重；4.数组[]不去重；5.Symbol(1)不去重；
ES6解法[1, '1', 0, '0', true, false, 'true', 'false', 'a', 'A', undefined, 'undefined', null, 'null', NaN, String {'1'}, String {'1'}, Symbol(1), Symbol(1), {}, {}, /a/, /a/, [], []1.去重+0、-0、0； 2.去重NaN；3.对象new String(“1”)、/a/、{}不去重；4.数组[]不去重；5.Symbol(1)不去重；
indexOf + forEach[1, '1', 0, '0', true, false, 'true', 'false', 'a', 'A', undefined, 'undefined', null, 'null', NaN, NaN, String {'1'}, String {'1'}, Symbol(1), Symbol(1), {}, {}, /a/, /a/, [], []]1.去重+0、-0、0； 2.NaN不去重；3.对象new String(“1”)、/a/、{}不去重；4.数组[]不去重；5.Symbol(1)不去重；
indexOf + filter[1, '1', 0, '0', true, false, 'true', 'false', 'a', 'A', undefined, 'undefined', null, 'null', String {'1'}, String {'1'}, Symbol(1), Symbol(1), {}, {}, /a/, /a/, [], []]1.去重+0、-0、0； 2.两个NaN都会被删除；3.对象new String(“1”)、/a/、{}不去重；4.数组[]不去重；5.Symbol(1)不去重；
sort排序，不支持Symbol[[], [], /a/, /a/, 0, "0", 0, 1, "1", String {'1'}, String {'1'}, "A", NaN, NaN, {}, {}, "a", false, "false", null, "null", true, "true", "undefined", undefined]1.+0、-0、0、"0"位置不同会导致去重不了 2.NaN不去重；3.对象new String(“1”)、/a/、{}不去重；4.数组[]不去重；5.sort()方法不支持处理含有Symbol的数组；
includes[1, '1', 0, '0', true, false, 'true', 'false', 'a', 'A', undefined, 'undefined', null, 'null', NaN, String {'1'}, String {'1'}, Symbol(1), Symbol(1), {}, {}, /a/, /a/, [], []]1.去重+0、-0、0； 2.去重NaN；3.对象new String(“1”)、/a/、{}不去重；4.数组[]不去重；5.Symbol(1)不去重；
includes+reduce[1, '1', 0, '0', true, false, 'true', 'false', 'a', 'A', undefined, 'undefined', null, 'null', NaN, String {'1'}, String {'1'}, Symbol(1), Symbol(1), {}, {}, /a/, /a/, [], []]1.去重+0、-0、0； 2.去重NaN；3.对象new String(“1”)、/a/、{}不去重；4.数组[]不去重；5.Symbol(1)不去重；
对象key[1, '1', 0, '0', true, false, 'true', 'false', 'a', 'A', undefined, 'undefined', null, 'null', NaN, String {'1'}, Symbol(1), {}, []]1.去重+0、-0、0； 2.去重NaN；3.去重对象new String(“1”)、{};两个/a/全部被删除了；4.去重数组[]；5.去重Symbol

上面只是简单结果的去重总结，具体的去重选择还需要根据我们业务场景来选择去重方法。

演示地址

可以去Github仓库查看演示代码

跟着大佬学系列

主要是日常对每个进阶知识点的摸透，跟着大佬一起去深入了解JavaScript的语言艺术。

后续会一直更新，希望各位看官不要吝啬手中的赞。

❤️ 感谢各位的支持！！！

❤️ 如果有错误或者不严谨的地方，请务必给予指正，十分感谢！！！

❤️ 喜欢或者有所启发，欢迎 star！！！

参考

原文地址

【跟着大佬学JavaScript】之数组去重（结果对比）

易函123
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
数组的扩展方法，symbol数据类型与具体属性方法，对象的所有方法与拓展
weixin_48315912的博客
02-18 190
40 40.1 数组的扩展方法 Array.from() 先看.length方法，再看自然数。要是无len，会返回[] array.from(arr,x=>x*x); Array.of() 老模式兼容,传数组项目 相当于Array copyWithin() copy在内部 修改当前数组，覆盖原有成员 [].copyWithin(target,start,end) //target 该位置开始替换数据 //start x 该位置开始读取数据 //end x 该位置结束读取数据 find()
Symbol()数据类型深入理解
weixin_47450807的博客
01-02 2011
Symbol数据类型深入理解 之前学习过Symbol数据类型，但是仅仅是了解一些，没有过多深入了解。今天写这篇博客就是对这个数据类型的一些用法，以及内置属性的理解。 Symbol是一种原始数据类型，其创建之后会在栈内存中存在，并不会向引用值数据类型在堆内存中存在。其存在就是为了确保对象属性唯一，不会存在属性冲突。 一、基本用法 ①Symbol() <script> let s1 = Symbol(); let s2 = Symbol(); console.log(s1===s2); //fa
JS对象、数组 及 数据类型 Symbol
weixin_34246551的博客
12-27 295
一、js 判断对象是否为空 1、将 json 对象转化为 json 字符串，再判断该字符串是否为 "{}" var data = {}; var b = (JSON.stringify(data) == "{}"); alert(b); // true 复制代码 注意： 忽略转换 undefined、function、Symbol 属性 JSON.stringify({[Symbol("key")...
ES6新特性之Symbol类型用法分析
12-11
本文实例讲述了ES6新特性之Symbol类型用法。分享给大家供大家参考，具体如下： Symbol类型 1. 为了避免属性名的冲突，ES6新增了Symbol类型。Symbol可以产生一个独一无二的值。 let s1 = Symbol('a'); let s2 = Symbol('a'); console.log(s1); //Symbol(a) console.log(typeof s1); //symbol console.log(s1 == s2); //false 2.Symbol用于属性名。 var s1 = Symbol(); var s2 = Symbol(); var s3
ES6中Symbol类型用法实例详解
11-26
本文实例讲述了ES6中的Symbol类型。分享给大家供大家参考，具体如下： Symbol是在ES6中新加入的类型。 正如我们所知，JavaScript中有以下几种类型： Undefined ,Null ,Boolean ,Number ,String, Object。 但是上述类型在处理某些情况的时候是远远不够的。下面我们来举一个例子： 假设我们要移动div，也需要在某些情况下判断该div是否处于移动状态，所以我们会想到给div这类的对象设置一个属性。 if (element.isMoving) { smoothAnimations(element); } element.isMoving
前端开发-vue-vu2,javascript,router-助你成为vue大佬
08-11
总的来说，通过深入理解Vue.js的原理和实践，结合JavaScript基础，以及利用如`vue-router`、`vuex`等周边工具，开发者可以成为Vue.js的大佬，构建出高性能、易于维护的前端应用。持续学习和实践是提升技能的关键，与...
详解es6新增数组方法简便了哪些操作
01-19
在这里不过多阐述，我也是跟着阮一峰大佬的《es6入门 》来学习的，es6新增了很多的方法、属性，让我们在编码中得到了很高的提升，在这里只对array这块进行阐述，其他的就过不多介绍了。 言归正传，在项目中，经常会...
k8s学习之路-入门级
04-05
本人自学k8s的理解，和吸取业界大佬的思想体会，整理出k8s初学之路材料供参考
C语言学习之共用体union
01-06
这是实际工作中接触到的一种共用体的用法，晓得的大佬就别看了，有点丑，感兴趣的可以先看看代码再看下文： #include #include char flash[200]; typedef struct str_test { int len; int size; int width; int...
图灵奖大佬 Lecun 发表对比学习新作，比 SimCLR 更好用！ .rar
最新发布
10-18
标题中的“图灵奖大佬 Lecun 发表对比学习新作，比 SimCLR 更好用！”指的是Yann LeCun，一位著名的计算机科学家，2018年图灵奖得主，他在人工智能、计算机视觉（CV）、深度学习领域有着深远的影响。他的新作可能...
Symbol 类型 的简单理解和应用
qq_34703156的博客
05-12 4683
Symbol 的应用 symbol是一种基本数据类型 （primitive data type）。Symbol()函数会返回symbol类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的symbol注册，且类似于内建对象类，但作为构造函数来说它并不完整，因为它不支持语法："new Symbol()"。 1 每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符；这是该数据类型仅有的目的 也就是说每一...
ES6-Symbol(ECMAScript 6 入门笔记)
One By One
12-05 315
1.概述： ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新 的方法，新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从 根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。 ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaS
ES6——Symbol（理解和使用）
Y1_1Y1_1y1_1y的博客
01-11 1218
1. 概念： symbol 是一种基本数据类型 （primitive data type）。Symbol()函数会返回symbol类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的symbol注册，且类似于内建对象类，但作为构造函数来说它并不完整，因为它不支持语法：“new Symbol()”。 2. 使用 2.1 你可以在调用Symbol()函数时传入一个可选的字符串参数，相当于给你创建的Symbol实例一个描述信息：(仅仅是对于这个Symbol的描述，
Symbol的用法
weixin_30352191的博客
12-15 2862
let symbol = (data) => { 　　return Symbol(data) } console.log(symbol(1)==symbol(1)) 转载于:https://www.cnblogs.com/cs122/p/10123716.html
Symbol？面试题中提问的关于Symbol的一些概念？
canoe777的博客
08-03 1310
1.JS的基本数据类型有哪些？（7种） Number String Boolean Null Object Undefined Symbol 2. Symbol的特点是什么？ 表示独一无二的值，Symbol最大的用途是用来定义对象的唯一属性名 比如我们要给一个已有属性的对象添加一个新的属性，新的属性可能和旧的属性名称冲突，这个时候采用Symbol是最好的。 3.如何定义一个Symbol？ 通过Symbol()方法可以生成一个symbol，里面可以带参数，也可以不带参数 const symbol1 = Sym
es6数据类型Symbol以及es6操作数组常用的方法
frontend_frank的博客
09-18 654
Symbol在js中，常见的数据类型有undefined null string number boolean object，而es6中，则新增了第七种数据类型symbo...
详解Symbol（自定义值，内置值）-------小小的Symbol，大大的学问
codingWeb的博客
09-02 6990
ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型 Symbol 特点： 1. Symbol 的值是唯一的，用来解决命名冲突的问题，即使参数相同 // 没有参数的情况 let name1 = Symbol(); let name2 = Symbol(); name1 === name2 // false name1 === name2 // false // 有参数的情况 let name1 = Symbol('flag'); let .
Symbol
weixin_41040445的博客
04-10 311
1、概述 ES5的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是ES6引入Symbol的原因。 symbol是一种新的数据类型 数据类型 基本类型：Number、String、Boolean、undefined、null 引用类型：Object、Array、Function、Date等
JavaScript有了一种全新的数据类型：Symbol
weixin_33709219的博客
08-04 247
数据类型 在介绍Symbol之前，我们简单介绍一下JavaScript的数据类型： JavaScript有6中数据类型，分别是： String字符串类型 Number数字类型 Object对象类型 Boolean布尔值类型 Null空值 Undefined未定义 这6种类型写过代码的同学都不会陌生，它...
list数组对象去重
08-25
最后，通过清空原始list数组，然后将去重后的结果重新添加到list数组中，实现了list数组的去重。 另一种方法是使用嵌套循环遍历，并使用条件判断来去重元素。在这个方法中，你需要使用两个嵌套的for循环来遍历list...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值