精华内容
下载资源
问答
  • 本文实例讲述了JS实现字符串去重及数组去重方法。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net js数组、...
  • 下面小编就为大家分享一篇JavaScript 数组去重并统计重复元素出现的次数实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • JS数组去重 ES6 方法

    千次阅读 2018-08-02 17:13:00
    let arr = [0, 0, 0, 0, 1, 2, 3, 4, 4, 5, 2, 3, 3, 3, 9, 8,...//数组去重法1 console.log(Array.from(new Set(arr))); //数组去重法2 console.log(...new Set(arr)); //数组去重法3 let newarr = []; ...
    let arr = [0, 0, 0, 0, 1, 2, 3, 4, 4, 5, 2, 3, 3, 3, 9, 8, 9];
    //数组去重法1
    console.log(Array.from(new Set(arr)));
    //数组去重法2
    console.log(...new Set(arr));

    //数组去重法3
    let newarr = [];
    for (var i = 0; i < arr.length; i++) {
    if (newarr.indexOf(arr[i]) == -1) {
    newarr.push(arr[i]);
    };
    };
    console.log(newarr);
    //数组去重法4
    let newarr2 = [];
    arr.sort(); //先将数组排序
    // newarr2.push(arr[0]);
    for (var i = 0; i < arr.length; i++) {
    if (arr[i] !== arr[i + 1]) { //判断后一项 是否跟前一项一样 将后一项放入新数组
    newarr2.push(arr[i]);
    };
    };
    console.log(newarr2);

    //数组去重 法5
    var res = [arr[0]];
    for (var i = 0; i < arr.length; i++) {
    var repeat = false;
    // console.log(res);
    for (var j = 0; j < res.length; j++) {
    if (arr[i] == res[j]) {
    repeat = true;
    break;
    }
    }
    if (!repeat) {
    res.push(arr[i]);
    }
    }
    console.log(res);

    //数组去重 法6
    var res = [];
    var json = {};
    for (var i = 0; i < arr.length; i++) {
    if (!json[arr[i]]) {
    res.push(arr[i]);
    json[arr[i]] = 1;
    }
    }
    console.log(res);

    转载于:https://www.cnblogs.com/shenbo666/p/9408369.html

    展开全文
  • 主要介绍了JS实现的字符串数组去重功能,结合实例形式分析了javascript基于ES6、ES5、ES3及正则实现数组去重的相关操作技巧,需要的朋友可以参考下
  • 其实网上已经有很多js数组去重方法,但是我看了很多篇并自己通过代码验证,发现都有一些缺陷,于是在研究多篇代码之后,自己总结了9种方法,如果有哪里不对请及时纠正我哈~测试代码let arr1 = [3, 1, [1], 1, [1],...

    其实网上已经有很多js数组的去重方法,但是我看了很多篇并自己通过代码验证,发现都有一些缺陷,于是在研究多篇代码之后,自己总结了9种方法,如果有哪里不对请及时纠正我哈~

    9bda96fa79048cf46d8422c639861b75.png

    测试代码

    let arr1 = [3, 1, [1], 1, [1], true, true, {}, '1', NaN, undefined, NaN, undefined, {}, null, null];let arr2 = [];for (let i = 0; i < 100000; i++) {    arr2.push(0 + Math.floor((100000 - 0 + 1) * Math.random()));}// 封装在Array的原型对象会更好,this就是指向调用该方法的数组Array.prototype.unique = function () {    //...}console.log(arr1.unique());// 测试去重效果console.time('test');console.log(arr2.unique());// 测试去重时间console.timeEnd('test');

    备注:

    • arr1包含了两个相同的数组[1]、并且数组[1]和1的顺序打乱(这是为了突出sort的弊端)有两个NaN、两个undefined、两个null等等,把平时会用到的数据类型都写上来了有两个相同的空对象{}
    • arr2放入10万个随机纯数字,大的数据量才能看出时间的差别对于纯number的数组,以下所有方法(包括网上的各种方法)都是可行的
    • 正确去重的arr1:[3, 1, [1], true, {}, '1', NaN, undefined, null],length = 9。

    一、不能正确去重NaN和Object的方法

    1. 两种for循环 + splice(耗时最长)

    Array.prototype.unique = function () {    for (let i = 0; i < this.length; i++) {        for (let j = i + 1; j < this.length; j++) {            if (this[i] === this[j]) {                this.splice(j, 1);                j--;            }        }    }    return this;}
    fdc8bcdc4e98e99904b7714d5fd5a7e1.png

    test: 21208.31396484375 ms(花了21s....)

    不能去重NaN和复杂数组类型(比如 Object 和 Array )

    2. forEach + indexOf

    Array.prototype.unique = function () {    let newArr = [];    this.forEach((item) => {        if (newArr.indexOf(item) === -1) {            newArr.push(item);        }    })    return newArr;}

    结果同上,建议大家自己运行一下(就是懒得截图

    • test: 4104.52294921875 ms

    不能去除重复的NaN和复杂数据类型

    原因:indexOf 认为 NaN 不等于 NaN

    3. filter + indexOf

    Array.prototype.unique = function () {    return this.filter((item, index) => {        // 利用indexOf检测元素在数组中第一次出现的位置是否和元素现在的位置相等,如果不等则说明该元素是重复元素        return this.indexOf(item) === index;    })}
    ad56989d1e4c86a8d3904cdb23c23271.png

    test: 5682.358154296875 ms

    不能去掉重复的复杂数据类型,同时还会去掉所有的NaN

    原因:indexOf 认为 NaN 不等于 NaN ,所以也就不认为他们是重复元素。

    4. for + sort(sort有问题)

    Array.prototype.unique = function () {    let newArr = [];    this.sort();    for (let i = 0; i < this.length; i++) {        if (this[i] !== this[i + 1]) {            newArr.push(this[i]);        }    }    return newArr;}
    ffdfa14e006cda9b8766669a6e7e754c.png
    • test: 61.96484375 ms

    带 sort 方法的只对纯number或者纯string类型有效,它无法区分1和'1',因为它是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的。

    这时候如果有一段这样的排序[1, '1', 1],再用前后比较的方法去重就会出现问题

    在这里他还会把undefined也全都去掉,原因是sort()方法排序后,undefined排在最后,而最后一个undefined要和this[length]进行比较,而这个值并不存在,而也是undefined,就会认为他们是同一个值。

    同样它不能去重NaN和复杂数据类型,但是耗时是在方法里面是最少之一了(都之一了用别的不香吗)

    5. sort + reduce(sort有问题)

    Array.prototype.unique = function () {    return this.sort().reduce((init, cur) => {        if (init.length === 0 || init[init.length - 1] !== cur) {            init.push(cur);        }        return init;    }, []);}
    45f5b8c6f186a3b7db7e224f7f9e86fe.png
    • test: 66.679931640625 ms

    同样他也是用sort排序再前后比较

    比上面那个方法好一点点,还能正确去重undefined(我觉得前后比较这种方法着实不靠谱)

    同样也不能去重NaN和复杂数组类型,耗时也是在方法里面是最少之一。

    二、能正确去重NaN,不能去重复杂数据类型

    1. forEach + includes

    Array.prototype.unique = function () {    let newArr = [];    this.forEach((item) => {        if (!newArr.includes(item)) {            newArr.push(item);        }    })    return newArr;}
    1cebc3146345d05ac12b7a7e9c19ea5a.png
    • 4181.393798828125 ms

    可以去掉重复的NaN,但是不能去掉重复的复杂数据类型

    includes 认为 NaN === NaN 为 true

    2. forEach + map

    Array.prototype.unique = function () {    let map = new Map();    let newArr = new Array();    this.forEach((item) => {        if (!map.has(item)) {            map.set(item, 1);            newArr.push(item);        }    });    return newArr;}

    同上,不截图了,自行运行一哈~

    • test: 27.030029296875 ms

    可以去NaN,不能去重复杂数组类型,运行速度快,耗时最少的方法之一

    3. Set

    Array.prototype.unique = function () {    return [...new Set(this)];}

    同上,不截图了

    • test: 31.197021484375 ms

    可以去掉重复的NaN,但是不能去掉重复的复杂数据类型,运行速度快,耗时最少的方法之一,代码最短!

    三、可以去掉NaN和复杂数据类型的!

    1. filter + hasOwnProperty + JSON.stringify

    Array.prototype.unique = function () {    let obj = {};    return this.filter(function (item, index, arr) {        return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true);    });}
    33e2e9d73ef2d02a052d7248359a2db6.png
    • test: 126.3359375 ms

    可以去掉重复的NaN和重复的复杂数据类型

    在object中,key如果是number类型,它会自动转换成string类型,所以{1:1}和{"1":1}是相等的,这不是这个方法的缺陷,这是Oject的缺陷

    而{1: 1}和{1: "1"}这种value值不同的可以正确区分开。

    • 该方法的核心:以typeof item元素类型+item的字符串作为key
    • 有些文章写的方法是直接使用item,让obj自行隐式转换成字符串
    • 考虑到obj的字符串都为'[object Object]',这里使用JSON.stringify(item),就可以保存不同的obj字符串

    后记

    其实上面的方法不外乎三种:

    1. 利用for、forEach、filter遍历,再利用indexOf、includes等方法判断是否重复;
    2. 利用Set数据结构的特性;
    3. 利用obj或者map的key不能重复的特性。

    实际开发应该更多的是纯数字的去重(吧?),而且也用不上这么多方法。能记住两三种根据实际情况的需求来选择就行了(吧?)
    但作为一个正在找工作的应届生,不得不总结多几种方法,这样面试官问起来的时候才不至于口哑无言嘿嘿嘿
    (完)

    展开全文
  • ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。 Set本身是一个构造函数,用来生成 Set 数据结构。 const set = new Set([1, 2, 3, 4, 4]); [...set] console.log(set) // [1, 2...

    ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

    Set本身是一个构造函数,用来生成 Set 数据结构。

    const set = new Set([1, 2, 3, 4, 4]);
    [...set]
    console.log(set)
    // [1, 2, 3, 4]
    
    所以我们可以使用set去重
    function duplicateRemoval(array) {
      return Array.from(new Set(array));
    }
    
    duplicateRemoval([1, 1, 2, 3]) // [1, 2, 3]
    
    展开全文
  • 数组去重ES6数组去重 new Set()

    千次阅读 2020-07-08 12:30:18
    普通数组去重 varb=[...newSet([1,2,3,4,5,5,5,5])] console.log(b); 输出结果: 包含对象的数组去重 var o ={a:1} var b = [...new Set([o, o, 3, 4, 5, 5, 5, 5])] console.log(b); 输出结果: ...

    普通数组去重

        var b = [...new Set([1,2, 3, 4, 5, 5, 5, 5])]
    
        console.log(b);

    输出结果:

     

    包含对象的数组去重

        var o ={a:1}
        var b = [...new Set([o, o, 3, 4, 5, 5, 5, 5])]
        console.log(b);

    输出结果:

     

    包含对象的数组去重有一个坑

        var b = [...new Set([{'a':1}, {'a':1}, 3, 4, 5, 5, 5, 5])]
        console.log(b);

    因为每个对象都是唯一的,所以这个数组里面的两个对象没办法去重

     

    去除字符串里面的重复字符

    [...new Set('ababbc')].join('')
    // "abc"
    展开全文
  • Set是es6新增的数据结构 Set类似于数组,区别在于存储的值总是唯一的,不能有重复的值 new Set(),Set本身是一个构造函数,用来生成 Set 数据结构,用来去重数组 Map与 Set 都是es6新增的,其实功能都差不多
  • ES6新增的数组方法 1.forEach forEach()会遍历数组, 循环体内没有返回值,forEach()循环不会改变原来数组的内容, forEach()有三个参数, 第一个参数是当前元素, 第二个参数是当前元素的索引, 第三个参数是当前元素所属...
  • 1.ES5常用方法 let arr =[1,2,2,3,4,4,4,4,7] for(let i =0;i<arr.length;i++){ //对数组进行遍历,用第一个依次和后面的进行比较 for(let j=i+1;j<arr.length;j++){ //如果相等就将后面相等的删除,并且...
  • 本文实例讲述了JS学习笔记之数组去重实现方法。分享给大家供大家参考,具体如下: 操作的数组 let arr=[0,1,23,'1',4,2,8,5,5,6,9,'asdasd','5'] 1、 利用ES6 的set 来进行数组去重 console.time("set") let...
  • 本文实例总结了JavaScript数组去重方法。分享给大家供大家参考,具体如下: 数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码。如果是被提问到,数组去重的方法有哪些?你能答出其中的...
  • let arr = [1, 2, 3, 4, 2, 1]; var b = [...new Set(arr)]; console.log(b); 结果:
  • 根据我自己的总结归纳,数组去重分为两种类型的方法,一种是在原来的的数据里面删除重复的元素,另一种是把原数组里面相同的元素添加到一个新数组里面。不管是什么方法都是利用这种解决思路去设计的。 一 .删除原...
  • JavaScript数组去重ES6的两种方式

    万次阅读 2017-09-27 10:31:54
    说明JavaScript数组去重这个问题,经常出现在面试题中,以前也写过一篇数组去重的文章,(JavaScript 数组去重的多种方法原理详解)但感觉代码还是有点不够简单,今天和大家再说两种方法,代码可是足够的少了。...
  • findIndex() 查找元素,返回值是该元素的数组下标 ...// 数组对象去重 var arr = [{ id: 1, name: 'ceshi', type: '01', price: '33', }, { id: 2, name: 'ceshi', type: '02', price: '33'
  • js数组去重ES6 篇)

    千次阅读 2018-03-14 18:35:31
    js数组去重方法有很多,但是今天我们来使用es6的最新的函数来实现更简洁的解决方案。现在要介绍的两种方法都是与es6的新的数据结构Set有关,先简单介绍下Set。ES6 提供了新的数据结构 Set。它类似于数组,但是...
  • 思路:定义一个新数组,并存放原数组的第一个元素,然后将元素组一一和新数组的元素对比,若不同则存放在新数组中。 function unique(arr) { let newArr = [arr[0]]; for (let i = 1; i < arr.length; i++) { ...
  • js数组去重(利用ES6的Set对象)

    千次阅读 2020-08-07 13:56:23
    原文 let arr2 = new Set([1,1,2,3,4]) let arr3 = [...arr2] console.log(arr2, arr3) // {1,2,3,4} [1,2,3,4] 1、Js es6中扩展运算符(...)
  • 引言在实际开发中,偶尔会遇到数组去重的需求,本文介绍几个去重方法。filter 去重最简单的去重方式是利用 filter 和 indexOf 方法。const arr = ['hello', 'world', 'hello', 100, 100, '100'];const rmDup = (elem...
  • //ES6里新添加了两个方法,set(set是一种新的数据结构,它可以接收一个数组或者是类数组对象,自动去重其中的重复项目) //Array.from(类数组对象、可迭代对象转化为数组)。 var arr = [1, 2, 3, 2, 4, 5, 5, ...
  • 1. 最简单数组去重法,新建一新数组,遍历传入数组,值不在新数组就push进该新数组中,IE8以下不支持数组的indexOf方法 function uniq(arr){ var tem=[]; for(var i=0;i&amp;amp;amp;lt;arr.length;i++){ if...
  • 对象数组去重方法 // arr传数组名,attr传属性名 const uniqueArr=(arr,attr)=> { const res = new Map(); return arr.filter((arr) => !res.has(arr[attr]) && res.set(arr[attr], 1)) } ...
  • 普通数组去重 数据源 const test = ['q', 'w', 'e', 'q', 'u', 'p'] 方法一 [...newSet(test)]; 方法二 Array.from(new Set(test)) 方法三 function unique(arr) { const res = new Map(); return arr.filter(...
  • javascript数组去重(ES6版) 之前讲了如何利用循环和json对象去重,但是有BUG,如果是一个是字符串一个是数字就没办法区分了。 今天就利用 Set 来去重。 var arr = [1,2,3,4,5,'1','2',3,3,'1']; arr = Array.from...
  • js实现数组去重-ES6实现

    千次阅读 2018-10-25 09:47:13
    方法一: function unique(arr) { const res = new Map(); return arr.filter((a) =&amp;amp;gt; !res.has(a) &amp;amp;amp;&amp;amp;amp; res.set(a, 1)) } 就这么短,就可以了,我们来解释一下为...
  • JS数组去重方法Array

    2020-09-21 19:42:24
    数组去重方法 方法一:对象的属性不能重复 function unique1(arr) { var newArr = [] var obj = {} for (var key of arr) { //for of的key获取属性值 if (obj[key] === undefined) { //如果对象没有该属性值 ...
  • js中的数组去重是面试必考点,这里来 浅谈下ES6中的新增方法 1.利用Map对象和数组filter方法 let arr = [1,2,2,1,3,6,5,3,6,12,89] function unique(arr1){ const a = new Map(); return arr1.filter((b)=>!a...
  • 2019.08.02补:对象数组建议直接循环然后使用工具库(lodash)的深比较,评论里也有指出,文章的方法有些取巧了 生产环境不要这么玩~。方法一:利用ES6的Array.from()/扩展运算符 以及 SetArray.from(): The Array....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,766
精华内容 4,306
关键字:

js数组去重es6方法