数组去重的JavaScript实现

Imfan 发布于2019-08-20 15:23 / 3017人阅读

摘要：主要用到数组的方法。第一种方式是判断数组中的第一索引号等于参数索引号，一般来说，如果数组元素重复，除第一个元素外，所有重复元素的索引和该元素对应的第一索引是不同的。

1.最简方法

创建一个空的新数组，依次检查旧数组的值是否存在于新数组中，如果不存在就push进去。主要用到数组的indexOf方法。

            function arrUnique(arr){
                var newArr = [];
                for (i = 0; i < arr.length; i++){
                    if (newArr.indexOf(arr[i]) == -1){
                        newArr.push(arr[i]);
                    }
                }
                return newArr;
            }
            var arr = [1,2,3,4,5,3,2];
            console.log(arrUnique(arr));

2.对象属性赋值1

通过将旧数组的值分别赋值给对象的属性，由于对象属性赋值时旧属性会被新的同名属性覆盖，所以保证了数组（属性）的单一性，最后通过for in将这些属性push到新数组中。

        function arrUnique(arr){
            var obj = {};
            var newArr = [];
            arr.map(function(item){
                obj[item] = null;
            })
            for (var key in obj){
                newArr.push(Number(key));
            }
            return newArr;
        }
        var arr = [1,2,3,4,5,3,2];
        console.log(arrUnique(arr));

3 对象属性赋值2

创建一个空数组和空对象，检查旧数组的值是否作为对象的属性存在，如果不存在就给这个对象添加数组值属性，属性值为1，并且把这个数组的值赋值给新数组。利用的原理还是对象属性值会被覆盖，也就是说是唯一的。下标的引用要比用indexOf搜索数组快的多，所以该方法方法2快。此处的对象其实是一个哈希表，虽然速度快很多，但是内存占用较大，也就是以空间换时间。

        function arrUnique(arr){
            var newArr = [];
            var obj = {};
            for (var i = 0; i < arr.length; i++){
                if (!obj[arr[i]]){
                    newArr.push(arr[i]);
                    obj[arr[i]]=1;
                }
            }
            return newArr;
        }
        var arr = [1,2,3,4,5,3,2];
        console.log(arrUnique(arr));

4 先使用数组的sort方法排序，节省空间且速度较快

先对原数组排序，然后判断数组元素是否在新数组的最后一位，如果不是就push进去。这种方法比单纯循环要快很多，虽然没有哈希表方式快，但是不占用较大空间。

            function arrUnique(arr){
                arr.sort();//快排
                var newArr = [];
                for(var i = 0; i < arr.length; i++){
                    if (arr[i] !== newArr[newArr.length - 1]){
                        newArr.push(arr[i]);
                    }
                }
                return newArr;
            }
            var arr = [1,2,3,4,5,3,2];
            console.log(arrUnique(arr));

5 来自评论区的善意

昨天发布该文之后，今天收到评论区亦秋的反馈，给出了两种很简洁的ES6去重方式。
1）第一种方式是判断数组中的第一索引号等于参数索引号，一般来说，如果数组元素重复，除第一个元素外，所有重复元素的索引和该元素对应的第一索引是不同的。该处第一索引是指自左向右搜索到的第一个元素的索引号。

[1,2,3,4,5,3,2].filter((value, index, array) => array.indexOf(value) === index)

2）通过ES6的Set数据结构，该结构类似于数组，但是不会出现重复元素，因此，只要基于原始数组创建Set结构，然后在数组内部展开就成了单一元素数组。

[...new Set([1,2,3,4,5,3,2])]

云服务器 GPU云服务器数组去重数组去重二维数组去重 php数组去重

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82200.html

JavaScript专题之数组去重

摘要：专题系列第三篇，讲解各种数组去重方法，并且跟着写一个前言数组去重方法老生常谈，既然是常谈，我也来谈谈。它类似于数组，但是成员的值都是唯一的，没有重复的值。 JavaScript 专题系列第三篇，讲解各种数组去重方法，并且跟着 underscore 写一个 unique API 前言数组去重方法老生常谈，既然是常谈，我也来谈谈。双层循环也许我们首先想到的是使用 indexOf 来循...

fsmStudy 2019-08-21 15:55 评论0 收藏0
javascript 数组去重的6种思路

摘要：但是这并不妨碍我们从思维拓展的角度出发，看看去重可以用几种思路去实现。首先是常规的双层循环比对的思路实现定义一个变量表示当前元素在中是否存在。依次对中的元素和原数组元素进行比对。重点是保证碰撞的几率小到比中大奖还小就可以了。前端在日常开发中或多或少都会碰到有对数据去重的需求，实际上，像是lodash这些工具库已经有成熟完备的实现，并且可以成熟地运用于生产环境。但是这并不妨碍我们从思维...

AlphaWallet 2019-08-26 11:39 评论0 收藏0
[Javascript]数组去重的三种实现方式

摘要：方式使用获取并删除删除数组的第一个元素，判断这个元素是否还存在于数组中，如果存在则说明这个元素的是重复的如果不存在，进行操作方式建立一个哈希表，通过对象属性查询去除重复元素方式思路和方式类似，但是简洁很多来源个人博客方式1：使用shift()获取并删除删除数组的第一个元素，判断这个元素是否还存在于数组中，如果存在则说明这个元素的是重复的；如果不存在，进行push()操作 functi...

TZLLOG 2019-08-22 10:45 评论0 收藏0
JavaScript数组去重的总结

摘要：数组去重方法的总结前言在中数组是比较常用的，本文中总结了下数组去重的几种常用方法，如有问题，请指正。 JavaScript数组去重方法的总结前言在JavaScript中数组是比较常用的，本文中总结了下数组去重的几种常用方法，如有问题，请指正。简单粗暴的一种，ES6中set方法： var arr = [1,2,2,3,3,4,5,5]; console.log([...new Se...

Tonny 2019-08-26 11:40 评论0 收藏0
JavaScript数组去重的6种算法

摘要：否则存入结果数组。否则存入结果数组排序后相邻去除法虽然原生数组的方法排序结果不怎么靠谱，但在不注重顺序的去重里该缺点毫无影响。实现思路给传入数组排序，排序后相同值相邻，然后遍历时新数组只加入不与前一值重复的值。 1.遍历数组法实现思路：新建一新数组，遍历传入数组，值不在新数组就加入该新数组中；注意点：判断值是否在数组的方法indexOf是ECMAScript5 方法，IE8以下不支持...

Panda 2019-08-22 13:48 评论0 收藏0