开发者问题收集

从 JS 数组中删除重复的值

2012-02-10
3182767
javascript jquery arrays duplicates unique

我有一个非常简单的 JavaScript 数组，它可能包含也可能不包含重复项。 

var names = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl"];

我需要删除重复项并将唯一值放入新数组中。

我可以指出我尝试过的所有代码，但我认为它们没用，因为它们不起作用。我也接受 jQuery 解决方案。

类似问题：

3个回答

TL;DR

使用 Set 构造函数和 spread 语法 : 

uniq = [...new Set(array)];

（请注意，var uniq 将是一个数组... new Set() 将其转换为一个集合，但 [...] 将其再次转换为一个数组）

“聪明”但幼稚的方式 

uniqueArray = a.filter(function(item, pos) {
    return a.indexOf(item) == pos;
})

基本上，我们迭代数组，并且，对于每个元素，检查该元素在数组中的第一个位置是否等于当前位置。显然，对于重复元素，这两个位置是不同的。

使用过滤器回调的第 3 个（“此数组”）参数，我们可以避免数组变量的闭包： 

uniqueArray = a.filter(function(item, pos, self) {
    return self.indexOf(item) == pos;
})

虽然简洁，但这种算法对于大型数组（二次时间）并不是特别有效。

哈希表来救援 

function uniq(a) {
    var seen = {};
    return a.filter(function(item) {
        return seen.hasOwnProperty(item) ? false : (seen[item] = true);
    });
}

通常就是这样做的。这个想法是将每个元素放在哈希表中，然后立即检查其存在。这给了我们线性时间，但至少有两个缺点：

  • 由于哈希键在 JavaScript 中只能是字符串或符号，因此此代码不区分数字和“数字字符串”。也就是说， uniq([1,"1"]) 将仅返回 [1]
  • 出于同样的原因，所有对象将被视为相等： uniq([{foo:1},{foo:2}]) 将仅返回 [{foo:1}] 。

也就是说，如果您的数组仅包含基元并且您不关心类型（例如它始终是数字），则此解决方案是最佳的。

两全其美

通用解决方案结合了两种方法：它使用哈希查找基元并线性搜索对象。 

function uniq(a) {
    var prims = {"boolean":{}, "number":{}, "string":{}}, objs = [];

    return a.filter(function(item) {
        var type = typeof item;
        if(type in prims)
            return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true);
        else
            return objs.indexOf(item) >= 0 ? false : objs.push(item);
    });
}

sort | uniq

另一种选择是先对数组进行排序，然后删除与前一个元素相等的每个元素： 

function uniq(a) {
    return a.sort().filter(function(item, pos, ary) {
        return !pos || item != ary[pos - 1];
    });
}

同样，这不适用于对象（因为对于 sort ，所有对象都是相等的）。此外，我们默默地更改了原始数组作为副作用 - 不好！但是，如果您的输入已经排序，则可以使用这种方法（只需从上面删除 sort ）。

唯一...

有时需要根据某些标准（而不仅仅是相等）来唯一化列表，例如，过滤掉不同但共享某些属性的对象。这可以通过传递回调来优雅地完成。此“键”回调应用于每个元素，并删除具有相等“键”的元素。由于 key 预计会返回一个原始值，因此哈希表在这里可以很好地工作： 

function uniqBy(a, key) {
    var seen = {};
    return a.filter(function(item) {
        var k = key(item);
        return seen.hasOwnProperty(k) ? false : (seen[k] = true);
    })
}

一个特别有用的 key() 是 JSON.stringify ，它将删除物理上不同但“看起来”相同的对象： 

a = [[1,2,3], [4,5,6], [1,2,3]]
b = uniqBy(a, JSON.stringify)
console.log(b) // [[1,2,3], [4,5,6]]

如果 key 不是原始值，则必须诉诸线性搜索： 

function uniqBy(a, key) {
    var index = [];
    return a.filter(function (item) {
        var k = key(item);
        return index.indexOf(k) >= 0 ? false : index.push(k);
    });
}

在 ES6 中，您可以使用 Set ： 

function uniqBy(a, key) {
    let seen = new Set();
    return a.filter(item => {
        let k = key(item);
        return seen.has(k) ? false : seen.add(k);
    });
}

或 Map ： 

function uniqBy(a, key) {
    return [
        ...new Map(
            a.map(x => [key(x), x])
        ).values()
    ]
}

它们都适用于非原始键。

第一个还是最后一个？

按键删除对象时，您可能希望保留第一个“相等”对象或最后一个对象。

使用上面的 Set 变体保留第一个，使用 Map 保留最后一个： 

function uniqByKeepFirst(a, key) {
    let seen = new Set();
    return a.filter(item => {
        let k = key(item);
        return seen.has(k) ? false : seen.add(k);
    });
}


function uniqByKeepLast(a, key) {
    return [
        ...new Map(
            a.map(x => [key(x), x])
        ).values()
    ]
}

//

data = [
    {a:1, u:1},
    {a:2, u:2},
    {a:3, u:3},
    {a:4, u:1},
    {a:5, u:2},
    {a:6, u:3},
];

console.log(uniqByKeepFirst(data, it => it.u))
console.log(uniqByKeepLast(data, it => it.u))

库

underscore 和 Lo-Dash 提供 uniq 方法。他们的算法基本上类似于上面的第一个代码片段，可以归结为： 

var result = [];
a.forEach(function(item) {
     if(result.indexOf(item) < 0) {
         result.push(item);
     }
});

这是二次的，但还有一些不错的附加功能，例如包装本机 indexOf 、按键唯一化的能力（用他们的话来说就是 iteratee ）以及对已排序数组的优化。

如果您使用 jQuery，并且不能忍受没有美元的东西，那么它会是这样的： 

  $.uniqArray = function(a) {
        return $.grep(a, function(item, pos) {
            return $.inArray(item, a) === pos;
        });
  }

这又是第一个代码片段的变体。

性能

JavaScript 中的函数调用成本高昂，因此上述解决方案虽然简洁，但并不是特别高效。为了获得最佳性能，请将 filter 替换为循环，并删除其他函数调用： 

function uniq_fast(a) {
    var seen = {};
    var out = [];
    var len = a.length;
    var j = 0;
    for(var i = 0; i < len; i++) {
         var item = a[i];
         if(seen[item] !== 1) {
               seen[item] = 1;
               out[j++] = item;
         }
    }
    return out;
}

这段丑陋的代码与上面的代码片段 #3 的作用相同， 但速度快了一个数量级 （截至 2017 年，它的速度只有原来的两倍 - JS 核心人员做得很好！） 

function uniq(a) {
    var seen = {};
    return a.filter(function(item) {
        return seen.hasOwnProperty(item) ? false : (seen[item] = true);
    });
}

function uniq_fast(a) {
    var seen = {};
    var out = [];
    var len = a.length;
    var j = 0;
    for(var i = 0; i < len; i++) {
         var item = a[i];
         if(seen[item] !== 1) {
               seen[item] = 1;
               out[j++] = item;
         }
    }
    return out;
}

/////

var r = [0,1,2,3,4,5,6,7,8,9],
    a = [],
    LEN = 1000,
    LOOPS = 1000;

while(LEN--)
    a = a.concat(r);

var d = new Date();
for(var i = 0; i < LOOPS; i++)
    uniq(a);
document.write('<br>uniq, ms/loop: ' + (new Date() - d)/LOOPS)

var d = new Date();
for(var i = 0; i < LOOPS; i++)
    uniq_fast(a);
document.write('<br>uniq_fast, ms/loop: ' + (new Date() - d)/LOOPS)

ES6

ES6 提供了 Set 对象，这使事情变得容易得多： 

function uniq(a) {
   return Array.from(new Set(a));
}

或 

let uniq = a => [...new Set(a)];

请注意，与 Python 不同，ES6 集合在插入顺序，因此此代码保留了原始数组的顺序。

但是，如果您需要一个包含唯一元素的数组，为什么不从一开始就使用集合呢？

生成器

可以基于相同基础构建“惰性”的基于生成器的 uniq 版本：

  • 从参数中获取下一个值
  • 如果已经看到过，则跳过它
  • 否则，产生它并将其添加到已看到值的集合中 
function* uniqIter(a) {
    let seen = new Set();

    for (let x of a) {
        if (!seen.has(x)) {
            seen.add(x);
            yield x;
        }
    }
}

// example:

function* randomsBelow(limit) {
    while (1)
        yield Math.floor(Math.random() * limit);
}

// note that randomsBelow is endless

count = 20;
limit = 30;

for (let r of uniqIter(randomsBelow(limit))) {
    console.log(r);
    if (--count === 0)
        break
}

// exercise for the reader: what happens if we set `limit` less than `count` and why
2012-02-10

快速而简单地使用 jQuery： 

var names = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl"];
var uniqueNames = [];
$.each(names, function(i, el){
    if($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
});
Roman Bataev
2012-02-10

厌倦了看到所有使用 for 循环或 jQuery 的糟糕示例。如今，Javascript 拥有完美的工具来实现这一点：sort、map 和 Reduce。

Uniq Reduce 并保持现有顺序 

var names = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl"];

var uniq = names.reduce(function(a,b){
    if (a.indexOf(b) < 0 ) a.push(b);
    return a;
  },[]);

console.log(uniq, names) // [ 'Mike', 'Matt', 'Nancy', 'Adam', 'Jenny', 'Carl' ]

// one liner
return names.reduce(function(a,b){if(a.indexOf(b)<0)a.push(b);return a;},[]);

更快的 uniq 排序

可能还有更快的方法，但这个方法相当不错。 

var uniq = names.slice() // slice makes copy of array before sorting it
  .sort(function(a,b){
    return a > b;
  })
  .reduce(function(a,b){
    if (a.slice(-1)[0] !== b) a.push(b); // slice(-1)[0] means last item in array without removing it (like .pop())
    return a;
  },[]); // this empty array becomes the starting value for a

// one liner
return names.slice().sort(function(a,b){return a > b}).reduce(function(a,b){if (a.slice(-1)[0] !== b) a.push(b);return a;},[]);

2015 年更新：ES6 版本：

在 ES6 中，您可以使用 Sets 和 Spread，这样可以非常轻松高效地删除所有重复项： 

var uniq = [ ...new Set(names) ]; // [ 'Mike', 'Matt', 'Nancy', 'Adam', 'Jenny', 'Carl' ]

根据出现次数排序：

有人询问如何根据有多少个唯一名称对结果进行排序： 

var names = ['Mike', 'Matt', 'Nancy', 'Adam', 'Jenny', 'Nancy', 'Carl']

var uniq = names
  .map((name) => {
    return {count: 1, name: name}
  })
  .reduce((a, b) => {
    a[b.name] = (a[b.name] || 0) + b.count
    return a
  }, {})

var sorted = Object.keys(uniq).sort((a, b) => uniq[a] < uniq[b])

console.log(sorted)
Christian Landgren
2013-04-07