如何在数组中获取唯一值


167

如何获得数组中唯一值的列表?我是否总是必须使用第二个数组,或者是否有类似于JavaScript中Java哈希表的东西?

我将仅使用JavaScriptjQuery。不能使用其他库。



1
您愿意使用underscore.js图书馆吗?
jakee 2012年

Java hashmap与javascript对象基本相同。语法为{“ key”:“ value”,“ key2”:“ value2”}
Ian

与Scala相比,JavaScript / TypeScript集合API糟糕透顶list.toSet
Jordan Stewart

Answers:


120

由于我在@Rocket答案的注释中继续进行了讨论,因此我不妨提供一个不使用任何库的示例。这需要两个新的原型函数,contains并且unique

Array.prototype.contains = function(v) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] === v) return true;
  }
  return false;
};

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

var duplicates = [1, 3, 4, 2, 1, 2, 3, 8];
var uniques = duplicates.unique(); // result = [1,3,4,2,8]

console.log(uniques);

为了提高可靠性,可以contains用MDN的indexOf垫片代替,并检查每个元素的值indexOf是否等于-1:文档


1
~a.indexOf(b) === (a.indexOf(b) == -1)
Orwellophile 2014年

1
@Lexynux:这是那种怪异的javascript-nerd答案,只应由了解其含义的人使用,甚至可能不知道。它是什么说,写作if (~a.indexOf(b)) ...相同的,以书面形式更长if (a.indexOf(b) == -1) ...
Orwellophile

4
这具有很高的运行时复杂度(最坏的情况:O(n ^ 2))
Rahul Arora

1
这是一个非常低效的实现。检查结果数组以查看它是否已经包含一个项目是可怕的。更好的方法是使用跟踪计数的对象,或者如果您不想使用辅助存储,请首先以O(n log n)对其进行排序,然后进行线性扫描并并排比较元素
Isaiah Lee

1
我们真的需要“包含”功能吗?
Animesh Kumar

206

或对于那些希望与当前浏览器兼容的单行(简单和功能性)的用户:

let a = ["1", "1", "2", "3", "3", "1"];
let unique = a.filter((item, i, ar) => ar.indexOf(item) === i);
console.log(unique);

更新18-04-2017

似乎“ Array.prototype.includes”现在在最新版本的主线浏览器中得到了广泛的支持(兼容性

更新29-07-2015:

在浏览器中,有一些计划支持标准的“ Array.prototype.includes”方法,尽管该方法不能直接回答这个问题。通常是相关的。

用法:

["1", "1", "2", "3", "3", "1"].includes("2");     // true

Pollyfill(浏览器支持源于mozilla):

// https://tc39.github.io/ecma262/#sec-array.prototype.includes
if (!Array.prototype.includes) {
  Object.defineProperty(Array.prototype, 'includes', {
    value: function(searchElement, fromIndex) {

      // 1. Let O be ? ToObject(this value).
      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If len is 0, return false.
      if (len === 0) {
        return false;
      }

      // 4. Let n be ? ToInteger(fromIndex).
      //    (If fromIndex is undefined, this step produces the value 0.)
      var n = fromIndex | 0;

      // 5. If n ≥ 0, then
      //  a. Let k be n.
      // 6. Else n < 0,
      //  a. Let k be len + n.
      //  b. If k < 0, let k be 0.
      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

      // 7. Repeat, while k < len
      while (k < len) {
        // a. Let elementK be the result of ? Get(O, ! ToString(k)).
        // b. If SameValueZero(searchElement, elementK) is true, return true.
        // c. Increase k by 1.
        // NOTE: === provides the correct "SameValueZero" comparison needed here.
        if (o[k] === searchElement) {
          return true;
        }
        k++;
      }

      // 8. Return false
      return false;
    }
  });
}

它几乎是来自kennebec的复制粘贴,但是要承认,将数组作为参数而不是使用闭包可能会提高性能。

-必须说我没有把这些点连接起来,只是扫描了一个底纸,看起来像是一个大文章,所以被跳过了,走了过去,找到了另一种来源,然后重新张贴给其他人以便快速找到。也就是说,你的权利;与肯纳贝克几乎相同。
Josh Mc

尼斯-没意识到过滤器作为参数在数组中发送,并且不想在外部对象上工作。这正是我所需要的-我的javascript版本(较旧的xerces版本)暂时不会有新功能了。
Gerard ONeill

1
@GerardONeill是的,在某些情况下它非常重要,例如,如果它已在功能上链接,并且您要访问未分配变量的数组,例如.map(...)。filter(...)
Josh Mc

@Josh Mc,您能以某种方式在“唯一”方法中使用“包含”吗?
vkelman

142

这是ES6的一个更干净的解决方案,我发现这里没有包含。它使用Set传播操作符...

var a = [1, 1, 2];

[... new Set(a)]

哪个返回 [1, 2]


1
那太聪明了!
乔什·麦克

1
现在,是单线!
Mac

11
在Typescript中,Array.from(... new Set(a))由于Set不能隐式转换为数组类型,因此必须使用。只是一个提示!
Zachscs

4
@Zachscs,尝试时出现编译错误。你是说Array.from(new Set(a))吗 这似乎有效。
adam0101 '19

71

一线纯JavaScript

使用ES6语法

list = list.filter((x, i, a) => a.indexOf(x) === i)

x --> item in array
i --> index of item
a --> array reference, (in this case "list")

在此处输入图片说明

使用ES5语法

list = list.filter(function (x, i, a) { 
    return a.indexOf(x) === i; 
});

浏览器兼容性:IE9 +


4
不知道为什么这被否决了。起初它可能有点晦涩难懂,也许被归类为“聪明”,阅读起来并不务实,但是它是声明性,非破坏性和简洁的,而其他大多数答案都缺乏。
拉里

1
@Larry对此投票否决了,因为在此之前的几年中已经提供了完全相同的答案。
Alex Okrushko 2016年

@AlexOkrushko足够公平-由于格式问题而错过了该答案
Larry

7
如果将所有内容放在一行上,那么一切都是单线的:-)
Gary McGill

加强平等a.indexOf(x) === i注意三个平等号可能会很好。
treejanitor

21

现在在ES6中,我们可以使用新引入的ES6功能

let items = [1,1,1,1,3,4,5,2,23,1,4,4,4,2,2,2]
let uniqueItems = Array.from(new Set(items))

或在可迭代对象上使用数组扩展语法

let items = [1,1,1,1,3,4,5,2,23,1,4,4,4,2,2,2]; 
let uniqueItems = [...new Set(items)];

它将返回唯一的结果。

[1, 3, 4, 5, 2, 23]

1
最干净的解决方案!
Dimitris Filippou

这是要走的路,当在JS环境,支持new Set这样的(如现代角/打字稿)
唐·钱德尔

1
值得注意的是,您还可以在Set和Map等可迭代对象上使用Array let items = [1,1,1,1,3,4,5,2,23,1,4,4,4,2,2,2]; let uniqueItems = [...new Set(items)];
Spread

我喜欢这些ES6答案!
格伦·汤普森

1
这与@Adeel Imran的答案相同。请不要做出与现有答案完全相同的答案。
Timmmm

20

使用EcmaScript 2016,您可以像这样简单地进行操作。

 var arr = ["a", "a", "b"];
 var uniqueArray = Array.from(new Set(arr)); // Unique Array ['a', 'b'];

集始终是唯一的,使用Array.from()可以将集转换为数组。作为参考,请查看文档。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/来自 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects /组


1
这是您应该使用的答案。indexOf()答案很糟糕,因为它们是O(N ^ 2)。分散的答案是可以的,但不适用于大型阵列。这是最好的方法。
Timmmm

16

如果您想保留原始数组,

您需要第二个数组来包含第一个数组的uniqe元素,

大多数浏览器具有Array.prototype.filter

var unique= array1.filter(function(itm, i){
    return array1.indexOf(itm)== i; 
    // returns true for only the first instance of itm
});


//if you need a 'shim':
Array.prototype.filter= Array.prototype.filter || function(fun, scope){
    var T= this, A= [], i= 0, itm, L= T.length;
    if(typeof fun== 'function'){
        while(i<L){
            if(i in T){
                itm= T[i];
                if(fun.call(scope, itm, i, T)) A[A.length]= itm;
            }
            ++i;
        }
    }
    return A;
}
 Array.prototype.indexOf= Array.prototype.indexOf || function(what, i){
        if(!i || typeof i!= 'number') i= 0;
        var L= this.length;
        while(i<L){
            if(this[i]=== what) return i;
            ++i;
        }
        return -1;
    }

14

如今,您可以使用ES6的Set数据类型将阵列转换为唯一的Set。然后,如果需要使用数组方法,则可以将其变回数组:

var arr = ["a", "a", "b"];
var uniqueSet = new Set(arr); // {"a", "b"}
var uniqueArr = Array.from(uniqueSet); // ["a", "b"]
//Then continue to use array methods:
uniqueArr.join(", "); // "a, b"

1
整洁,很高兴看到一些性能数字,我认为,特别是如果这些集合非常动态且很大,则将其转换可能是性能提升,唯一的方法就是测试:)
宇航员

2
如果您使用的是Transpiler或在支持它的环境中,则可以更简洁地执行以下操作:var uniqueArr = [...new Set(arr)]; // ["a", "b"]
Stenerson

嘿@宇航员已经像您说的那样对性能进行了一些测试?
alexventuraio

8

不是Java本机语言,但是很多库都使用此方法。

Underscore.js的_.uniq(array)link)效果很好(source)。


感谢分享!该函数将迭代器和上下文以及数组作为v1.4.3中的参数列表。
Kunj

6

使用jQuery,这是我制作的Array唯一函数:

Array.prototype.unique = function () {
    var arr = this;
    return $.grep(arr, function (v, i) {
        return $.inArray(v, arr) === i;
    });
}

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

5
如果您打算在核心javascript对象的原型中使用jQuery,那么编写jQuery函数,例如,不是更好$.uniqueArray(arr)吗?在Array原型中嵌入对jQuery的引用似乎是有问题的
Jackwanders 2012年

1
@jackwanders:对此有什么疑问?如果页面上有jQuery,请使用它。
火箭Hazmat 2012年

只是您编写的新独特函数现在依赖于jQuery。您必须先确保在其中使用jQuery,才能将其移至新的网站或应用。
jackwanders 2012年

2
那是我的意思;如果要使用jQuery,则使函数本身成为jQuery的一部分。如果要扩展核心对象的原型,我会坚持使用核心javascript,只是为了保持可重用性。如果其他人正在查看您的代码,则显然$.uniqueArray依赖jQuery。不太明显Array.prototype.unique也是如此。
jackwanders 2012年

1
@jackwanders:我想。我在代码中一直使用jQuery,就像我一直使用prototypes一样。但是,我现在明白你的意思了。反正我会把它留在这里。
火箭Hazmat 2012年

6

使用第二个数组的简短解决方案;

var axes2=[1,4,5,2,3,1,2,3,4,5,1,3,4];

    var distinct_axes2=[];

    for(var i=0;i<axes2.length;i++)
        {
        var str=axes2[i];
        if(distinct_axes2.indexOf(str)==-1)
            {
            distinct_axes2.push(str);
            }
        }
    console.log("distinct_axes2 : "+distinct_axes2); // distinct_axes2 : 1,4,5,2,3

短?甜美?您是否看过顶级解决方案?
Alex Okrushko

5

快速,紧凑,无嵌套循环,可与任何对象一起使用,不仅是字符串和数字,而且可以使用谓词,并且只需5行代码!

function findUnique(arr, predicate) {
  var found = {};
  arr.forEach(d => {
    found[predicate(d)] = d;
  });
  return Object.keys(found).map(key => found[key]); 
}

示例:按类型查找唯一项:

var things = [
  { name: 'charm', type: 'quark'},
  { name: 'strange', type: 'quark'},
  { name: 'proton', type: 'boson'},
];

var result = findUnique(things, d => d.type);
//  [
//    { name: 'charm', type: 'quark'},
//    { name: 'proton', type: 'boson'}
//  ] 

如果您希望它找到第一个唯一项而不是最后一个,请添加found.hasOwnPropery()进行检查。


4

您只需要香草JS即可使用Array.some和Array.reduce查找唯一性。使用ES2015语法,只有62个字符。

a.reduce((c, v) => b.some(w => w === v) ? c : c.concat(v)), b)

IE9 +和其他浏览器支持Array.some和Array.reduce。只需将常规功能的粗箭头功能更改为在不支持ES2015语法的浏览器中即可支持。

var a = [1,2,3];
var b = [4,5,6];
// .reduce can return a subset or superset
var uniques = a.reduce(function(c, v){
    // .some stops on the first time the function returns true                
    return (b.some(function(w){ return w === v; }) ?  
      // if there's a match, return the array "c"
      c :     
      // if there's no match, then add to the end and return the entire array                                        
      c.concat(v)}),                                  
  // the second param in .reduce is the starting variable. This is will be "c" the first time it runs.
  b);                                                 

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects /阵列/减少


4

上述大多数解决方案具有很高的运行时复杂度。

这是使用reduce并可以在O(n)时间内完成工作的解决方案

Array.prototype.unique = Array.prototype.unique || function() {
        var arr = [];
	this.reduce(function (hash, num) {
		if(typeof hash[num] === 'undefined') {
			hash[num] = 1; 
			arr.push(num);
		}
		return hash;
	}, {});
	return arr;
}
    
var myArr = [3,1,2,3,3,3];
console.log(myArr.unique()); //[3,1,2];

注意:

此解决方案不依赖于减少。这个想法是创建一个对象映射并将唯一的映射到数组中。



1

您可以使用,

let arr1 = [1,2,1,3];
let arr2 = [2,3,4,5,1,2,3];

let arr3 = [...new Set([...arr1,...arr2])];

它将为您提供独特的元素,

**>但有一个陷阱,

对于这个“ 1”和1,是差异元素,**

第二个选择是在数组上使用过滤器方法。


1

您可以输入重复的数组,下面的方法将返回包含唯一元素的数组。

function getUniqueArray(array){
    var uniqueArray = [];
    if (array.length > 0) {
       uniqueArray[0] = array[0];
    }
    for(var i = 0; i < array.length; i++){
        var isExist = false;
        for(var j = 0; j < uniqueArray.length; j++){
            if(array[i] == uniqueArray[j]){
                isExist = true;
                break;
            }
            else{
                isExist = false;
            }
        }
        if(isExist == false){
            uniqueArray[uniqueArray.length] = array[i];
        }
    }
    return uniqueArray;
}

0

到目前为止,给出的解决方案的唯一问题是效率。如果您对此有所担心(可能应该),则需要避免嵌套循环:对于* for,filter * indexOf,grep * inArray,它们都会多次迭代数组。您可以实现与像解决方案的单回路还是


0
Array.prototype.unique = function () {
    var dictionary = {};
    var uniqueValues = [];
    for (var i = 0; i < this.length; i++) {
        if (dictionary[this[i]] == undefined){
            dictionary[this[i]] = i;
            uniqueValues.push(this[i]);
        }
    }
    return uniqueValues; 
}

0

我已经在纯JS中尝试了此问题。我已按照以下步骤进行操作:1.给定数组排序,2.遍历排序数组,3.用当前值验证上一个值和下一个值

// JS
var inpArr = [1, 5, 5, 4, 3, 3, 2, 2, 2,2, 100, 100, -1];

//sort the given array
inpArr.sort(function(a, b){
    return a-b;
});

var finalArr = [];
//loop through the inpArr
for(var i=0; i<inpArr.length; i++){
    //check previous and next value 
  if(inpArr[i-1]!=inpArr[i] && inpArr[i] != inpArr[i+1]){
        finalArr.push(inpArr[i]);
  }
}
console.log(finalArr);

演示版


0
function findUniques(arr){
  let uniques = []
  arr.forEach(n => {
    if(!uniques.includes(n)){
      uniques.push(n)
    }       
  })
  return uniques
}

let arr = ["3", "3", "4", "4", "4", "5", "7", "9", "b", "d", "e", "f", "h", "q", "r", "t", "t"]

findUniques(arr)
// ["3", "4", "5", "7", "9", "b", "d", "e", "f", "h", "q", "r", "t"]

0

请记住,这indexOf将返回元素的首次出现,您可以执行以下操作:

Array.prototype.unique = function(){
        var self = this;
        return this.filter(function(elem, index){
            return self.indexOf(elem) === index;
        })
    }


0

这个问题的另一个想法。这是我用更少的代码实现这一目标的方法。

var distinctMap = {};
var testArray = ['John', 'John', 'Jason', 'Jason'];
for (var i = 0; i < testArray.length; i++) {
  var value = testArray[i];
  distinctMap[value] = '';
};
var unique_values = Object.keys(distinctMap);

console.log(unique_values);


0

function findUnique(arr) {
  var result = [];
  arr.forEach(function(d) {
    if (result.indexOf(d) === -1)
      result.push(d);
  });
  return result;
}

var unique = findUnique([1, 2, 3, 1, 2, 1, 4]); // [1,2,3,4]
console.log(unique);


0

这是一种具有可自定义equals功能的方法,可用于基元和自定义对象:

Array.prototype.pushUnique = function(element, equalsPredicate = (l, r) => l == r) {
    let res = !this.find(item => equalsPredicate(item, element))
    if(res){
        this.push(element)
    }
    return res
}

用法:

//with custom equals for objects
myArrayWithObjects.pushUnique(myObject, (left, right) => left.id == right.id)

//with default equals for primitives
myArrayWithPrimitives.pushUnique(somePrimitive)

0

我的答案使用Array.filterArray.indexOf方法来获得唯一值

array.filter((value, index, self)=>self.indexOf(value)===index)

我在网站上看到了这种方法,但是它们的代码与此处看起来不同。我将代码简化为一行,并将其发布在此处,以便有人从中受益

注意:我的方法与Josh发布的那支班轮相似或相同。我将其保留在此处,因为变量名在我的代码中很容易说明。


-1

我只是在考虑是否可以使用线性搜索来消除重复项:

JavaScript:
function getUniqueRadios() {

var x=document.getElementById("QnA");
var ansArray = new Array();
var prev;


for (var i=0;i<x.length;i++)
  {
    // Check for unique radio button group
    if (x.elements[i].type == "radio")
    {
            // For the first element prev will be null, hence push it into array and set the prev var.
            if (prev == null)
            {
                prev = x.elements[i].name;
                ansArray.push(x.elements[i].name);
            } else {
                   // We will only push the next radio element if its not identical to previous.
                   if (prev != x.elements[i].name)
                   {
                       prev = x.elements[i].name;
                       ansArray.push(x.elements[i].name);
                   }
            }
    }

  }

   alert(ansArray);

}

HTML:

<body>

<form name="QnA" action="" method='post' ">

<input type="radio"  name="g1" value="ANSTYPE1"> good </input>
<input type="radio" name="g1" value="ANSTYPE2"> avg </input>

<input type="radio"  name="g2" value="ANSTYPE3"> Type1 </input>
<input type="radio" name="g2" value="ANSTYPE2"> Type2 </input>


<input type="submit" value='SUBMIT' onClick="javascript:getUniqueRadios()"></input>


</form>
</body>

-1

这是该问题的一种解决方案:

var seriesValues = [120, 120, 120, 120];
seriesValues = seriesValues.filter((value, index, seriesValues) => (seriesValues.slice(0, index)).indexOf(value) === -1);
console.log(seriesValues);

复制此粘贴到浏览器控制台,并获得结果,哟:-)


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.