JavaScript专题之数组去重 #27

mqyqingfeng · 2017-06-21T02:21:40Z

前言

数组去重方法老生常谈，既然是常谈，我也来谈谈。

双层循环

也许我们首先想到的是使用 indexOf 来循环判断一遍，但在这个方法之前，让我们先看看最原始的方法：

var array = [1, 1, '1', '1'];

function unique(array) {
    // res用来存储结果
    var res = [];
    for (var i = 0, arrayLen = array.length; i < arrayLen; i++) {
        for (var j = 0, resLen = res.length; j < resLen; j++ ) {
            if (array[i] === res[j]) {
                break;
            }
        }
        // 如果array[i]是唯一的，那么执行完循环，j等于resLen
        if (j === resLen) {
            res.push(array[i])
        }
    }
    return res;
}

console.log(unique(array)); // [1, "1"]

在这个方法中，我们使用循环嵌套，最外层循环 array，里面循环 res，如果 array[i] 的值跟 res[j] 的值相等，就跳出循环，如果都不等于，说明元素是唯一的，这时候 j 的值就会等于 res 的长度，根据这个特点进行判断，将值添加进 res。

看起来很简单吧，之所以要讲一讲这个方法，是因为——————兼容性好！

indexOf

我们可以用 indexOf 简化内层的循环：

var array = [1, 1, '1'];

function unique(array) {
    var res = [];
    for (var i = 0, len = array.length; i < len; i++) {
        var current = array[i];
        if (res.indexOf(current) === -1) {
            res.push(current)
        }
    }
    return res;
}

console.log(unique(array));

排序后去重

试想我们先将要去重的数组使用 sort 方法排序后，相同的值就会被排在一起，然后我们就可以只判断当前元素与上一个元素是否相同，相同就说明重复，不相同就添加进 res，让我们写个 demo：

var array = [1, 1, '1'];

function unique(array) {
    var res = [];
    var sortedArray = array.concat().sort();
    var seen;
    for (var i = 0, len = sortedArray.length; i < len; i++) {
        // 如果是第一个元素或者相邻的元素不相同
        if (!i || seen !== sortedArray[i]) {
            res.push(sortedArray[i])
        }
        seen = sortedArray[i];
    }
    return res;
}

console.log(unique(array));

如果我们对一个已经排好序的数组去重，这种方法效率肯定高于使用 indexOf。

unique API

知道了这两种方法后，我们可以去尝试写一个名为 unique 的工具函数，我们根据一个参数 isSorted 判断传入的数组是否是已排序的，如果为 true，我们就判断相邻元素是否相同，如果为 false，我们就使用 indexOf 进行判断

var array1 = [1, 2, '1', 2, 1];
var array2 = [1, 1, '1', 2, 2];

// 第一版
function unique(array, isSorted) {
    var res = [];
    var seen = [];

    for (var i = 0, len = array.length; i < len; i++) {
        var value = array[i];
        if (isSorted) {
            if (!i || seen !== value) {
                res.push(value)
            }
            seen = value;
        }
        else if (res.indexOf(value) === -1) {
            res.push(value);
        }        
    }
    return res;
}

console.log(unique(array1)); // [1, 2, "1"]
console.log(unique(array2, true)); // [1, "1", 2]

优化

尽管 unqique 已经可以试下去重功能，但是为了让这个 API 更加强大，我们来考虑一个需求：

新需求：字母的大小写视为一致，比如'a'和'A'，保留一个就可以了！

虽然我们可以先处理数组中的所有数据，比如将所有的字母转成小写，然后再传入unique函数，但是有没有方法可以省掉处理数组的这一遍循环，直接就在去重的循环中做呢？让我们去完成这个需求：

var array3 = [1, 1, 'a', 'A', 2, 2];

// 第二版
// iteratee 英文释义：迭代 重复
function unique(array, isSorted, iteratee) {
    var res = [];
    var seen = [];

    for (var i = 0, len = array.length; i < len; i++) {
        var value = array[i];
        var computed = iteratee ? iteratee(value, i, array) : value;
        if (isSorted) {
            if (!i || seen !== computed) {
                res.push(value)
            }
            seen = computed;
        }
        else if (iteratee) {
            if (seen.indexOf(computed) === -1) {
                seen.push(computed);
                res.push(value);
            }
        }
        else if (res.indexOf(value) === -1) {
            res.push(value);
        }        
    }
    return res;
}

console.log(unique(array3, false, function(item){
    return typeof item == 'string' ? item.toLowerCase() : item
})); // [1, "a", 2]

在这一版也是最后一版的实现中，函数传递三个参数：

array：表示要去重的数组，必填

isSorted：表示函数传入的数组是否已排过序，如果为 true，将会采用更快的方法进行去重

iteratee：传入一个函数，可以对每个元素进行重新的计算，然后根据处理的结果进行去重

至此，我们已经仿照着 underscore 的思路写了一个 unique 函数，具体可以查看 Github。

filter

ES5 提供了 filter 方法，我们可以用来简化外层循环：

比如使用 indexOf 的方法：

var array = [1, 2, 1, 1, '1'];

function unique(array) {
    var res = array.filter(function(item, index, array){
        return array.indexOf(item) === index;
    })
    return res;
}

console.log(unique(array));

排序去重的方法：

var array = [1, 2, 1, 1, '1'];

function unique(array) {
    return array.concat().sort().filter(function(item, index, array){
        return !index || item !== array[index - 1]
    })
}

console.log(unique(array));

Object 键值对

去重的方法众多，尽管我们已经跟着 underscore 写了一个 unqiue API，但是让我们看看其他的方法拓展下视野：

这种方法是利用一个空的 Object 对象，我们把数组的值存成 Object 的 key 值，比如 Object[value1] = true，在判断另一个值的时候，如果 Object[value2]存在的话，就说明该值是重复的。示例代码如下：

var array = [1, 2, 1, 1, '1'];

function unique(array) {
    var obj = {};
    return array.filter(function(item, index, array){
        return obj.hasOwnProperty(item) ? false : (obj[item] = true)
    })
}

console.log(unique(array)); // [1, 2]

我们可以发现，是有问题的，因为 1 和 '1' 是不同的，但是这种方法会判断为同一个值，这是因为对象的键值只能是字符串，所以我们可以使用 typeof item + item 拼成字符串作为 key 值来避免这个问题：

var array = [1, 2, 1, 1, '1'];

function unique(array) {
    var obj = {};
    return array.filter(function(item, index, array){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}

console.log(unique(array)); // [1, 2, "1"]

然而，即便如此，我们依然无法正确区分出两个对象，比如 {value: 1} 和 {value: 2}，因为 typeof item + item 的结果都会是 object[object Object]，不过我们可以使用 JSON.stringify 将对象序列化：

var array = [{value: 1}, {value: 1}, {value: 2}];

function unique(array) {
    var obj = {};
    return array.filter(function(item, index, array){
        console.log(typeof item + JSON.stringify(item))
        return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true)
    })
}

console.log(unique(array)); // [{value: 1}, {value: 2}]

看似已经万无一失，但考虑到 JSON.stringify 任何一个正则表达式的结果都是 {}，所以这个方法并不适用于处理正则表达式去重。(引用勘误 )

console.log(JSON.stringify(/a/)); // {}
console.log(JSON.stringify(/b/)); // {}

ES6

随着 ES6 的到来，去重的方法又有了进展，比如我们可以使用 Set 和 Map 数据结构，以 Set 为例，ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

是不是感觉就像是为去重而准备的？让我们来写一版：

var array = [1, 2, 1, 1, '1'];

function unique(array) {
   return Array.from(new Set(array));
}

console.log(unique(array)); // [1, 2, "1"]

甚至可以再简化下：

function unique(array) {
    return [...new Set(array)];
}

还可以再简化下：

var unique = (a) => [...new Set(a)]

此外，如果用 Map 的话：

function unique (arr) {
    const seen = new Map()
    return arr.filter((a) => !seen.has(a) && seen.set(a, 1))
}

JavaScript 的进化

我们可以看到，去重方法从原始的 14 行代码到 ES6 的 1 行代码，其实也说明了 JavaScript 这门语言在不停的进步，相信以后的开发也会越来越高效。

特殊类型比较

去重的方法就到此结束了，然而要去重的元素类型可能是多种多样，除了例子中简单的 1 和 '1' 之外，其实还有 null、undefined、NaN、对象等，那么对于这些元素，之前的这些方法的去重结果又是怎样呢？

在此之前，先让我们先看几个例子：

var str1 = '1';
var str2 = new String('1');

console.log(str1 == str2); // true
console.log(str1 === str2); // false

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

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

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

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

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

那么，对于这样一个数组

var array = [1, 1, '1', '1', null, null, undefined, undefined, new String('1'), new String('1'), /a/, /a/, NaN, NaN];

以上各种方法去重的结果到底是什么样的呢？

我特地整理了一个列表，我们重点关注下对象和 NaN 的去重情况：

方法	结果	说明
for循环	[1, "1", null, undefined, String, String, /a/, /a/, NaN, NaN]	对象和 NaN 不去重
indexOf	[1, "1", null, undefined, String, String, /a/, /a/, NaN, NaN]	对象和 NaN 不去重
sort	[/a/, /a/, "1", 1, String, 1, String, NaN, NaN, null, undefined]	对象和 NaN 不去重数字 1 也不去重
filter + indexOf	[1, "1", null, undefined, String, String, /a/, /a/]	对象不去重 NaN 会被忽略掉
filter + sort	[/a/, /a/, "1", 1, String, 1, String, NaN, NaN, null, undefined]	对象和 NaN 不去重数字 1 不去重
优化后的键值对方法	[1, "1", null, undefined, String, /a/, NaN]	全部去重
Set	[1, "1", null, undefined, String, String, /a/, /a/, NaN]	对象不去重 NaN 去重

这里再次声明一下，键值对方法不能去重正则表达式。

想了解为什么会出现以上的结果，看两个 demo 便能明白：

// demo1
var arr = [1, 2, NaN];
arr.indexOf(NaN); // -1

indexOf 底层还是使用 === 进行判断，因为 NaN === NaN的结果为 false，所以使用 indexOf 查找不到 NaN 元素

// demo2
function unique(array) {
   return Array.from(new Set(array));
}
console.log(unique([NaN, NaN])) // [NaN]

Set 认为尽管 NaN === NaN 为 false，但是这两个元素是重复的。

写在最后

虽然去重的结果有所不同，但更重要的是让我们知道在合适的场景要选择合适的方法。

专题系列

JavaScript专题系列目录地址：https://github.com/mqyqingfeng/Blog。

JavaScript专题系列预计写二十篇左右，主要研究日常开发中一些功能点的实现，比如防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里、递归、乱序、排序等，特点是研(chao)究(xi) underscore 和 jQuery 的实现方式。

如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。

The text was updated successfully, but these errors were encountered:

liuxinqiong · 2017-06-27T08:20:06Z

zeroone001 · 2017-06-29T03:54:00Z

有个小问题，关于排序后去重的下面的代码，var sortedArray = array.concat().sort(); 这个concat()在这里的意义是什么？不是很理解～

jochenshi · 2017-06-29T08:30:07Z

@zeroone001 你对数组进行了 array.concat()操作之后，相当于复制出来一份原有的数组，且对复制出来的新数组的操作不会影响到原有数组，但是上面的这个去重的方法是有问题的，对有些数组就无法排序

jochenshi · 2017-06-29T09:31:49Z

建议文章中对于用到sort来进行排序的地方都看一下，这些地方的排序的方法是有错误的

mqyqingfeng · 2017-06-29T10:06:34Z

@jochenshi 感谢回答哈，全文只有 sort 排序那里使用了排序，sort 排序的结果并不总是正确的，从文章最后的特殊类型排序结果表中，也可以看出，我应该专门注明这个问题的。sort 之所以会出错，还是因为 sort 的原理所致，我会在这个系列的大约第 19 篇中讲讲 V8 的排序源码。之所以写排序去重，是为了引出 underscore 的 unique API，在这个 API 中，如果是处理已排序好的数组，就可以传 true，使用更快的去重方法，而数组是怎么排序的，underscore 并不提供，为了演示排序去重的原理，我才简便的使用了 sort 方法，对数组进行了排序，因为使用了 sort，当涉及到特殊类型时，会出现问题，只能说明使用的场景其实是有限的，也不能说就是错误的，当然真到项目开发中，还是要用类似 underscore、lodash 提供的功能。最后感谢指出哈~ o(￣▽￣)ｄ

YeaseonZhang · 2017-07-13T02:38:46Z

第二版是不是逻辑不太清晰，应该修改为

var array3 = [1, 1, 'a', 'A', 2, 2];

// 第二版
// iteratee 英文释义：迭代 重复
function unique(array, isSorted, iteratee) {
    var res = [];
    var seen = [];

    for (var i = 0, len = array.length; i < len; i++) {
        var value = array[i];
        var computed = iteratee ? iteratee(value, i, array) : value;
        if (isSorted) {
            if (!i || seen !== computed ) {
                res.push(computed )
            }
            seen = computed ;
        }
        else if (res.indexOf(computed ) === -1) {
            res.push(computed );
        }        
    }
    return res;
}

console.log(unique(array3, false, function(item){
    return typeof item == 'string' ? item.toLowerCase() : item
})); // [1, "a", 2]

如果指出有错误，还请见谅。

mqyqingfeng · 2017-07-13T05:05:31Z

@YeaseonZhang 两个函数实现的效果不一样哈~ 举个例子：

var array = [{value: 1}, {value: 2}, {value: 1}];

console.log(unique(array, false, function(item){
    return item.value
}));

如果使用文章中的方法，结果会是 [{value: 1}, {value: 2}]
如果使用你的方法，结果会是 [1, 2]

区别在于使用迭代函数处理后的元素，去重后，是返回以前的元素还是计算后的元素。

无所谓对错，看你想设计成什么样子。

YeaseonZhang · 2017-07-13T05:20:08Z

@mqyqingfeng 谢谢回复，确实像你给出的那个例子一样。

FrontToEnd · 2017-07-13T09:58:29Z

请教大神一个问题，为什么正则/a/相等和全等都是false呢

mqyqingfeng · 2017-07-13T10:00:56Z

@FrontToEnd 因为在 JavaScript 中，正则表达式也是对象。

FrontToEnd · 2017-07-13T10:09:37Z

@mqyqingfeng 谢谢提醒，差点忘了。😯

suihaohao · 2017-08-22T08:23:54Z

多维数组如何去重呢？

jiangtao · 2017-08-22T08:53:44Z

@suihaohao 递归

mqyqingfeng · 2017-08-22T08:59:08Z

@suihaohao 也可以先扁平再去重，关于扁平化： JavaScript专题之数组扁平化

suihaohao · 2017-08-22T12:44:08Z

扁平之后再去重那就不是多维数组了吧，但是我想要的是去重之后仍然是多维数组呢？

mqyqingfeng · 2017-08-24T02:31:43Z

@suihaohao 如果是这样的话，遍历的时候判断元素是否是数组，然后递归使用 unique 函数，类似于这样：

    var array = [1, 2, 1, [1, 1, 2], [3, 3, 4]];

    function unique(array) {
        var res = [];
        for (var i = 0, len = array.length; i < len; i++) {
            var current = array[i];

            if (Array.isArray(array[i])) {
                res.push(unique(array[i]))
            }
            else if (res.indexOf(current) === -1) {
                res.push(current)
            }

        }
        return res;
    }

    console.log(unique(array)); // [1, 2, [1, 2], [3, 4]]

suihaohao · 2017-08-24T03:07:28Z

@mqyqingfeng 但是如果是 var array = [1, 2, 1, [1, 1, 2], [3, 3, 4],[1, 1, 2]]这样的数组，我想要的结果是
res= [1, 2, [1, 2], [3, 4]];这个方法就不行了；

mqyqingfeng · 2017-08-24T03:10:34Z

@suihaohao 其实你想要的并不是多维数组的去重，而是对象的去重，这需要再利用一个判断两个对象是否相等的函数，JavaScript专题之如何判断两个对象相等

mqyqingfeng · 2017-08-24T03:19:17Z

@suihaohao 如果是要这个结果的话，你可以先利用键值对去重的方法处理成 [1, 2, [1,1, 2], [3, 3, 4]]，再利用刚才的多维数组去重的方法，处理成 [1, 2, [1, 2], [3, 4]]

suihaohao · 2017-08-24T03:36:32Z

@mqyqingfeng 灰常感谢！！！

suihaohao · 2017-08-24T03:37:00Z

@mqyqingfeng 大神辛苦了

huangmxsysu · 2017-09-04T16:33:03Z

Object键值对方法中的键应改成typeof item + JSON.stringify(item)
不然的话{}，跟{name:'mosen'}会当成一样的因为如果是typeof item + item的话键都是object[object Object]

mqyqingfeng · 2017-09-05T03:52:41Z

@huangmxsysu 感谢指出，确实有这个问题~

sjxg · 2017-09-12T05:37:36Z

最后一版感觉有点问题

function unique(array, isSorted, iteratee) {
    var res = [];
    var seen = [];

    for (var i = 0, len = array.length; i < len; i++) {
        var value = array[i];
        var computed = iteratee ? iteratee(value, i, array) : value;
        if (isSorted) {
            if (!i || seen !== computed) {
                res.push(value)
            }
            seen = computed;
        }
        else if (iteratee) {
            if (seen.indexOf(computed) === -1) {
                seen.push(computed);
                res.push(value);
            }
        }
        else if (res.indexOf(value) === -1) {
            res.push(value);
        }        
    }
    return res;
}

修改前

var arr = ['A','a',1].sort();
unique(arr,true,function(item){
    return typeof item == 'string' ? item.toLowerCase() : item
});
// [ 1, 'A', 'a' ]

如果不做修改的话，一个排序过的数组，传不传入 iteratee 方法，对运行结果没啥影响啊。

mqyqingfeng · 2017-09-12T08:38:12Z

@yepbug，我试了一下，结果是 [1, "A"]，没有问题哈，unique 函数会返回一个新的数组，你是不是打印了 arr 数组？

sjxg · 2017-09-12T12:47:52Z

@mqyqingfeng 没有···· 你运行的是不是修改过的代码哈······
这是文章中最后一版的代码：

function unique(array, isSorted, iteratee) {
    var res = [];
    var seen = [];

    for (var i = 0, len = array.length; i < len; i++) {
        var value = array[i];
        var computed = iteratee ? iteratee(value, i, array) : value;
        // 我觉得这里有点问题
       // 如果不做修改的话，一个排序过的数组，传不传入 iteratee 方法，对运行结果没啥影响啊。
        if (isSorted) {
            if (!i || seen !== value) {
                res.push(value)
            }
            seen = value;
        }
        else if (iteratee) {
            if (seen.indexOf(computed) === -1) {
                seen.push(computed);
                res.push(value);
            }
        }
        else if (res.indexOf(value) === -1) {
            res.push(value);
        }        
    }
    return res;
}

如果按照上面的代码，来处理一个简单排序过的数组的时候，会有点小问题：

var arr = ['A','a',1].sort();//按数字字母排序 => [1, "A", "a"]
console.log(unique(arr,true,function(item){
    return typeof item == 'string' ? item.toLowerCase() : item
}));
// 运行结果  [1, "A", "a"]

mqyqingfeng · 2017-09-13T01:36:09Z

@yepbug 哈哈~ 确实是我运行错了~ 非常感谢指出~

ghost · 2019-10-10T12:09:40Z

博主您好，sort 是可以过滤数字 1 的，不知道你为什么会说不能过滤了？

我本来是在控制台运行的，跟你有一样的问题，后来我发现在node环境下1就没有去重，比较后发现是sort()排序出现的问题，我猜测正如前几个问题的评论一样，sort 排序的结果并不总是正确的，在node排序的结果是，
[ /a/, /a/, '1', '1', 1, [String: '1'], 1, [String: '1'], NaN, NaN, null, null, undefined, undefined ]
两个数字1并不相邻导致1没有去重。

thinkerHope · 2019-11-02T12:24:13Z

const uniqueWithSet = (arr) => Array.from(new Set(arr.map(item => JSON.stringify(item))), item => JSON.parse(item))这样写会不会更好呢。

MoJiaBings · 2020-04-07T05:44:26Z

第三个排序去重 !i 那个判断应该是多余的吧

KeithChou · 2020-06-10T11:43:35Z

楼主在优化大小写版本的时候，是这样写的

新需求：字母的大小写视为一致，比如'a'和'A'，保留一个就可以了！

这里是只保留大写或者小写中的一个就好了。所以针对var arr = ["A", "B", "a", "b"] 返回 ["A", "B"] 没有毛病呀

Dengyy · 2020-07-11T10:06:52Z

方法	结果	说明
sort	[/a/, /a/, "1", 1, String, 1, String, NaN, NaN, null, undefined]	对象和 NaN 不去重数字 1 也不去重
filter + sort	[/a/, /a/, "1", 1, String, 1, String, NaN, NaN, null, undefined]	对象和 NaN 不去重数字 1 也不去重

请问这个，数字1为什么不去重，我用排序后去重的方法试了一下，1是会去重的呀？

Lxdll · 2020-08-23T04:34:55Z

楼主，第二个indexOf方法可以换成ES6的includes方法，这样就可以去掉重复的NaN，就是带来了兼容性问题。
function unique(array){ var res = []; for(var i = 0, len = array.length; i < len; i++){ var current = array[i]; if(!res.includes(current)){ res.push(current); } } return res; }

Lxdll · 2020-08-23T04:38:25Z

function unique(array){
    var res = [];
    for(var i = 0, len = array.length; i < len; i++){
        var current = array[i];
        if(!res.includes(current)){
            res.push(current);
        }
    }
    return res;
}

vnues · 2020-09-09T02:24:54Z

/**
 * map加for循环 O(n)
 */

const map = {}
let array = []
for (let i = 0; i < arr.length; i++) {
    if (map[arr[i]]) {
        return
    }
    array.push(arr[i])
    map[arr[i]] = true
}

ghost · 2020-10-13T08:05:09Z

图片

Little-Prince-Teng · 2020-12-23T09:02:20Z

各位大佬，帮忙解释下这步

banli17 · 2021-04-03T06:40:11Z

@Little-Prince-Teng

发现后面有重复的，就不管前面的这个了，继续往后走，只插入最右边的

yinju123 · 2021-05-04T02:10:47Z

isSortd其作用是在没有iteratee的情况先把，iteratee返回的值，不一定认识排序好的

function unique(arr, isSortd, iteratee) {
    var res = []
    var seen = []
    for (var i = 0, l = arr.length; i < l; i++) {
      var value = arr[i]
      // 通过iteratee计算得到的值，不一定任然是排序好的
      if (isSortd && !iteratee) {
        if (value !== seen) {
          res.push(value)
          seen = value
        }
      } else {
        var computed = iteratee ? iteratee(value, i, arr) : value
        if (seen.indexOf(value) === -1) {
          res.push(value)
          seen.push(computed)
        }
      }
    }
  }

Luoyuda · 2021-06-01T06:41:15Z

var array = [/a/, /a/, /b/, "1", 1, String, 1, String, NaN, NaN, null, undefined];

function unique(array) {
    var obj = {};
    return array.filter(function(item, index, array){
        console.log(typeof item + JSON.stringify(item))
        return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true)
    })
}
console.log(unique(array)) // [/a/, "1", 1, ƒ, NaN, null, undefined]

/b/ 会被过滤掉
按照这个方法键值是重复的
/a/ => object{} /b/ => object{}
这里是不是需要特判一下正则的情况

item = item instanceof RegExp ? item.toString() : item

buliangc · 2021-08-12T00:08:29Z

各位大佬，帮忙解释下这步

shinelp100 · 2021-08-24T15:47:59Z

var array = [{value: NaN}, {value: null}, {value: 2}];

function unique(array) {
    var obj = {};
    return array.filter(function(item, index, array){
        console.log(typeof item + JSON.stringify(item))
        return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true)
    })
}

console.log(unique(array)); //  [{value: NaN}, {value: 2}]
// 这个输出也有点问题，JSON.stringify({value: NaN}) ---> "{\"value\":null}"

总感觉数组中比较对象不是太合适，除非是对象的引用，如果需要比较应该是遍历对象进行比较合适。

EmmanuelAgui · 2021-08-27T03:13:01Z

不好意思不知道是否跟其他小伙伴问题重复了。
大佬，关于第二版涉及排序后返回的好像有点问题。比如说我给的array是这样的：
var array = [1,2,5,3,5,'2','1',1,'2','1'];
最后的unique(array)的结果是：[1, "1", 1, "1", 2, "2", 3, 5]

EmmanuelAgui · 2021-08-27T03:15:14Z

不好意思不知道是否跟其他小伙伴问题重复了。
大佬，关于第二版涉及排序后返回的好像有点问题。比如说我给的array是这样的：
var array = [1,2,5,3,5,'2','1',1,'2','1'];
最后的unique(array)的结果是：[1, "1", 1, "1", 2, "2", 3, 5]

不好意思说错，不是第二版。是这个代码：
var array = [1, 1, '1'];

console.log(unique(array));

coveyz · 2021-09-17T03:27:14Z

第一个排序后去重
是不是没有办法解决这种情况
[1, 2, '1', 2, 1]

得倒的结果是 [1, "1", 1, 2]

改成这样可以但是跟作者之前 seen 这个变量就没啥关系了。。 ummm

function unique(array) {
	var res = [];
	var sortedArray = array.concat().sort();
	var seen;
	for (var i = 0, len = sortedArray.length; i < len; i++) {
		const element = sortedArray[i];
		if (!res.includes(element)) {
			res.push(element);
		}
	}
	return res;
}

liz-q · 2021-10-27T08:11:33Z

[2, '2', 2].sort() 排序后还是 [2, '2', 2]，在排序去重的方法中不行

Jishaofeng · 2022-05-29T09:07:25Z

var arrObj = [1,1,2,3, null, null, undefined, undefined, NaN, NaN, {name: 1}, {name: 2}, {name: 1}, '5', '5', '6', /a/, /a/, /c/];
这个怎么去重吖😂😂😂 写懵了

yigeyi · 2022-05-29T09:07:50Z

你好，蔡奕俊已经收到你的邮件，我会尽快查看并回复。

myselfwly · 2022-07-05T11:56:11Z

ES 6 的reduce去重也蛮好用的，友情补充下

/**
 * deDuplicateTool  数组去重
 * @param array 数组
 * @returns 去重后的数组
 */
const deDuplicateTool: deDuplicateType = (array) =>
	array.reduce((reviousValue, currentValue) => {
		if (!reviousValue.includes(currentValue)) {
			return reviousValue.concat(currentValue);
		} else {
			return reviousValue;
		}
	}, []);

yigeyi · 2023-09-25T05:55:14Z

你好，蔡奕俊已经收到你的邮件，我会尽快查看并回复。

mqyqingfeng added the 专题系列 label Jun 21, 2017

daochouwangu mentioned this issue Jun 22, 2017

2017-06-22 前端日报 daochouwangu/webfrontdaily#37

Open

mqyqingfeng mentioned this issue Aug 9, 2017

JavaScript专题之如何判断两个对象相等 #41

Open

liangbus mentioned this issue Mar 27, 2020

数组去重的方法，有哪些？ liangbus/blogging#29

Open

yangtao2o mentioned this issue Apr 2, 2020

JavaScript专题之数组去重 yangtao2o/learn#49

Open

Aiyoweioo mentioned this issue Apr 26, 2020

腾讯：数组扁平化、去重、排序 sisterAn/JavaScript-Algorithms#5

Open

swiftwind0405 mentioned this issue Oct 22, 2020

【JavaScript】数组拍平与数组去重 swiftwind0405/blog#68

Closed

huitoutunao mentioned this issue May 22, 2021

数组去重 huitoutunao/Blog#4

Open

he426100 mentioned this issue Jul 30, 2021

JavaScript专题之数组去重 · Issue #27 · mqyqingfeng/Blog he426100/Web-Clipper#48

Open

yihan12 mentioned this issue Jul 12, 2022

【跟着大佬学JavaScript】之数组去重(结果对比) yihan12/Blog#5

Open

JavaScript专题之数组去重 #27

JavaScript专题之数组去重 #27

Comments

mqyqingfeng commented Jun 21, 2017 • edited Loading

前言

双层循环

indexOf

排序后去重

unique API

优化

filter

Object 键值对

ES6

JavaScript 的进化

特殊类型比较

写在最后

专题系列

liuxinqiong commented Jun 27, 2017

zeroone001 commented Jun 29, 2017

jochenshi commented Jun 29, 2017

jochenshi commented Jun 29, 2017

mqyqingfeng commented Jun 29, 2017

YeaseonZhang commented Jul 13, 2017

mqyqingfeng commented Jul 13, 2017

YeaseonZhang commented Jul 13, 2017

FrontToEnd commented Jul 13, 2017

mqyqingfeng commented Jul 13, 2017

FrontToEnd commented Jul 13, 2017

suihaohao commented Aug 22, 2017

jiangtao commented Aug 22, 2017

mqyqingfeng commented Aug 22, 2017

suihaohao commented Aug 22, 2017

mqyqingfeng commented Aug 24, 2017 • edited Loading

suihaohao commented Aug 24, 2017

mqyqingfeng commented Aug 24, 2017

mqyqingfeng commented Aug 24, 2017

suihaohao commented Aug 24, 2017

suihaohao commented Aug 24, 2017

huangmxsysu commented Sep 4, 2017

mqyqingfeng commented Sep 5, 2017

sjxg commented Sep 12, 2017

mqyqingfeng commented Sep 12, 2017

sjxg commented Sep 12, 2017

mqyqingfeng commented Sep 13, 2017 • edited Loading

ghost commented Oct 10, 2019

thinkerHope commented Nov 2, 2019

MoJiaBings commented Apr 7, 2020

KeithChou commented Jun 10, 2020

Dengyy commented Jul 11, 2020 • edited Loading

Lxdll commented Aug 23, 2020

Lxdll commented Aug 23, 2020

vnues commented Sep 9, 2020 • edited Loading

ghost commented Oct 13, 2020

Little-Prince-Teng commented Dec 23, 2020

banli17 commented Apr 3, 2021 • edited Loading

yinju123 commented May 4, 2021

Luoyuda commented Jun 1, 2021

buliangc commented Aug 12, 2021

shinelp100 commented Aug 24, 2021 • edited Loading

EmmanuelAgui commented Aug 27, 2021

EmmanuelAgui commented Aug 27, 2021

coveyz commented Sep 17, 2021 • edited Loading

liz-q commented Oct 27, 2021

Jishaofeng commented May 29, 2022 • edited Loading

yigeyi commented May 29, 2022 via email

myselfwly commented Jul 5, 2022

yigeyi commented Sep 25, 2023 via email

mqyqingfeng commented Jun 21, 2017 •

edited

Loading

mqyqingfeng commented Aug 24, 2017 •

edited

Loading

mqyqingfeng commented Sep 13, 2017 •

edited

Loading

Dengyy commented Jul 11, 2020 •

edited

Loading

vnues commented Sep 9, 2020 •

edited

Loading

banli17 commented Apr 3, 2021 •

edited

Loading

shinelp100 commented Aug 24, 2021 •

edited

Loading

coveyz commented Sep 17, 2021 •

edited

Loading

Jishaofeng commented May 29, 2022 •

edited

Loading