数组去重的正确编写姿势

G9YH 发布于2019-08-21 10:47 / 1769人阅读

摘要：引言数组去重是前端面试的一个必备题目，其具体表现内容为怎样去掉的的重复项。一般姿势使用数组的方法可以很简单的达到目的。所以这算是委曲求全的一种中庸姿势。改编自刘春龙博客中的文章中数组去重问题

引言

数组去重是前端面试的一个必备题目，其具体表现内容为：怎样去掉Javascript的Array的重复项。问题简单直接，咱们也废话不多说，直入主题吧。

一般姿势

使用数组的indexOf()方法可以很简单的达到目的。

Array.prototype.unique = function() {
    // 创建一个新的临时数组，用于保存输出结果
    var n = []; 
    // 遍历当前数组
    for (var i = 0; i < this.length; i++) {
        // 如果当前数组的第i个元素已经保存进了临时数组，那么跳过，否则把当前项push到临时数组里面
        if (n.indexOf(this[i]) == -1) n.push(this[i]);
    }
    return n;
}

再列出一个变换一点的方式。

Array.prototype.unique = function() {
    // 创建一个新的临时数组，并且把当前数组的第一元素存入到数组中
    var n = [this[0]]; 
    // 从第二项开始遍历
    for (var i = 1; i < this.length; i++) 
    {
        // 如果当前数组的第i项在当前数组中第一次出现的位置不是i，那么表示第i项是重复的，忽略掉，否则存入结果数组
        if (this.indexOf(this[i]) == i) n.push(this[i]);
    }
    return n;
}

JS引擎在实现indexOf()的时候会遍历数组直到找到目标为止，此函数会浪费掉很多时间。所有这两种方式都不是最优的解决方式。

// 另一个简洁粗暴的方法
Array.prototype.unique = function() {
    return this.filter((v, i) => this.indexOf(v) === i)
}

感谢oxyflour童鞋提供的简单粗暴的一般姿势ES6改良版，优雅而简约：）

最快姿势

把已经出现过的元素通过下标的形式存入一个Object内。下标的引用的实现原理利用的是哈希算法，要比用indexOf()搜索数组快的多。

Array.prototype.unique = function() {
    // n为hash表，r为临时数组
    var n = {}, r = [];
    for (var i = 0; i < this.length; i++) {
        // 如果hash表中没有当前项
        if (!n[this[i]]) {
            // 存入hash表
            n[this[i]] = true;
            // 把当前数组的当前项push到临时数组里面
            r.push(this[i]); 
        }
    }
    return r;
}

但从耗时的角度来讲，这是最优的一种解决方式。但是从内存占用角度来说，这并不是最优的，因为多了一个hash表。这就是所谓的空间换时间（世间安得双全法？）。

中庸姿势

Array.prototype.unique = function() {
    this.sort();
    var re = [this[0]];
    for (var i = 1; i < this.length; i++) {
        if (this[i] !== re[re.length - 1]) {
            re.push(this[i]);
        }
    }
    return re;
}

这个方法的思路是先把数组排序，然后比较相邻的两个值。排序的时候用的JS原生的sort()方法，JS引擎内部应该是用的快速排序吧。这种方式比使用indexOf()的一般姿势要快，比使用hash表的最快姿势要慢，但是占用内存要少。所以这算是委曲求全的一种中庸姿势。具体要用什么姿势，各位看官视情况而定吧。

改编自刘春龙博客中的文章《JS中数组去重问题》

服务器托管海外云主机正确姿势数组去重数组去重二维数组去重

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

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

JS数组去重的三种方法

摘要：编写双重循环去重当出现相同的元素时，删除重复的元素哈希表形式查询对象是否存在当前元素属性借助方法查询空数组里面是否已经存在这个值，不存在则推入编写单元测试输出通过来实现是比较优雅的姿势。编写uniqueArray.js var Unique = { /** * 双重循环去重 * @param arr * @returns {*} */ ...

hikui 2019-08-19 18:00 评论0 收藏0
JS数组去重

摘要：这种方式比使用的一般姿势要快，比使用表的最快姿势要慢，但是占用内存要少主要内容来自数组去重的正确编写姿势不卖关子，直入主题数组去重，最先想到的便是依次遍历数组，在已遍历的元素中查找是否存在当前数组元素，重点是用什么存放已遍历的数组，以及如何区分当前元素是否已存在由于下面会用到indexOf()的方法，它是ES5语法，低版本会存在兼容，先应添加对应的polyfill Array.p...

ymyang 2019-08-20 18:53 评论0 收藏0
JS基础篇--JS实现数组去重方法整理

摘要：使用进行操作，如下但是得到的其实是一个非常规的数组了，也就是说其实主要是用于对对象属性的操作。这确实要根据自己的需求来了。当然简单的实现如下好了到了这儿，我们开始总结下常用的数组去重的方法。前言我们先来看下面的例子，当然来源与网络，地址《删除数组中多个不连续的数组元素的正确姿势》我们现在将数组中所有的‘a’元素删除： var arr = [a, a, b, c, d, a, a,...

fjcgreat 2019-08-21 17:59 评论0 收藏0
js基本操作-数组去重

摘要：基本操作数组去重写在前面数组去重经常出现在前端招聘的笔试题里，比如有数组，请用实现去重函数，使得返回作为笔试题，考点有二正确。基本介绍文章主要是对数组去重的常用方法进行介绍。 js基本操作-数组去重写在前面 JavaScript 数组去重经常出现在前端招聘的笔试题里，比如：有数组 var arr = [a, b, c, 1, 0, c, 1, , 1, 0]，请用 JavaScr...

blastz 2019-08-22 11:02 评论0 收藏0
javascript数组去重

摘要：数组去重双层循环使用双层嵌套循环是最原始的方法用来存储结果如果是唯一的，那么执行完循环，等于外层循环内层循环当和相等时，跳出循环。否则说明元素唯一，这时成立，将此元素添加到中。它类似于数组，但是成员的值都是唯一的，没有重复的值。 JavaScript数组去重双层循环使用双层嵌套循环是最原始的方法： var array = [a,b,a]; function unique(arra...

qylost 2019-08-26 11:51 评论0 收藏0