239

如何获取数组中唯一值的列表?我总是必须使用第二个数组还是在 JavaScript 中有类似于 java 的 hashmap 的东西?

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

4

20 回答 20

300

这是一个更清洁的 ES6 解决方案,我看到这里不包括在内。它使用Set扩展运算符...

var a = [1, 1, 2];

[... new Set(a)]

哪个返回[1, 2]

于 2017-02-08T21:30:24.663 回答
276

或者对于那些寻找与当前浏览器兼容的单行(简单且实用)的人:

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

2021 年更新 我建议查看Charles Clayton 的答案,因为最近对 JS 的更改有更简洁的方法可以做到这一点。

2017 年 4 月 18 日更新

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

2015 年 7 月 29 日更新:

有计划让浏览器支持标准化的 '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;
    }
  });
}
于 2014-04-25T00:13:30.877 回答
134

由于我在@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 的indexOfshim 替换并检查每个元素indexOf是否等于 -1:文档

于 2012-06-28T14:58:50.147 回答
103

一个班轮,纯 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+

于 2016-09-01T13:23:59.263 回答
33

使用 EcmaScript 2016,您可以简单地这样做。

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

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

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/ 来自 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects /放

于 2017-12-25T19:32:41.053 回答
17

现在,您可以使用 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"
于 2016-03-07T19:58:33.583 回答
16

如果您想保持原始数组不变,

你需要第二个数组来包含第一个的唯一元素-

大多数浏览器都有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;
    }
于 2012-06-28T14:48:26.907 回答
8

在 Javascript 中不是原生的,但很多库都有这种方法。

Underscore.js 的_.uniq(array)链接)工作得很好()。

于 2012-06-28T14:29:52.620 回答
7

快速,紧凑,无嵌套循环,可用于任何对象,而不仅仅是字符串和数字,采用谓词,并且只需 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() 签入。

于 2017-12-04T22:18:23.363 回答
5

使用 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]
于 2012-06-28T14:33:03.130 回答
5

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

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
于 2015-04-16T04:28:28.360 回答
5

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

这是使用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];

笔记:

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

于 2017-10-21T08:45:24.690 回答
3

您只需要 vanilla 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/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/ 一些 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects /数组/减少

于 2015-12-06T00:36:47.093 回答
2

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

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);

于 2016-01-04T08:26:58.190 回答
2

如果您不需要太担心旧版浏览器,这正是 Sets 的设计目的。

Set 对象允许您存储任何类型的唯一值,无论是原始值还是对象引用。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

const set1 = new Set([1, 2, 3, 4, 5, 1]);
// returns Set(5) {1, 2, 3, 4, 5}
于 2018-11-09T11:43:39.420 回答
1

我已经在纯 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);

演示

于 2017-04-01T11:49:42.757 回答
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;
}
于 2018-10-23T11:17:52.480 回答
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; 
}
于 2016-01-22T14:33:39.437 回答
-1

这是一种具有可定制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)
于 2019-10-29T14:03:40.660 回答
-2

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

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>
于 2013-08-12T10:28:47.490 回答