如何在数组中获得唯一的值

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

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

523872 次浏览

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

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

使用jQuery,这是一个数组唯一的函数我做:

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]

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

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

大多数浏览器都有Array.prototype.filter:

const unique = array1.filter((item, index, array) => array.indexOf(item) === index);




//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;
}

既然我在@Rocket的回答的评论中谈到了它,我不妨提供一个不使用库的示例。这需要两个新的原型函数,containsunique

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

为了获得更高的可靠性,你可以用MDN的indexOf shim替换contains,并检查每个元素的indexOf是否等于-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>

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

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

<强> 2021年更新 我建议检查查尔斯·克莱顿的回答,因为最近对JS的更改有更简洁的方法来做到这一点

更新18-04-2017

它看起来就像'Array.prototype。include `现在在主流浏览器的最新版本中得到广泛支持(兼容性)

更新29-07-2015:

目前正在计划让浏览器支持标准化的“Array.prototype”。方法,虽然没有直接回答这个问题;往往是相关的。

用法:

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

pololyfill (浏览器支持来源: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;
}
});
}

使用第二阵列的短而甜的解决方案;

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

你只需要香草JS找到唯一的数组。some和Array.reduce。在ES2015语法中,它只有62个字符。

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

数组中。some和Array。IE9+和其他浏览器支持。只需要在不支持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/some https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce < / p >

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

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

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

现在,您可以使用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"

一行代码,纯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")

enter image description here

使用ES5语法

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

浏览器兼容性: IE9 +

这里有一个更清晰的ES6解决方案,我看到这里没有包括它。它使用传播算子: ...

var a = [1, 1, 2];


[... new Set(a)]

哪个返回[1, 2]

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

Demo

上面的大多数解决方案都具有较高的运行时复杂性。

下面是使用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。其思想是创建一个对象映射,并将唯一的对象推入数组。

快速,紧凑,无嵌套循环,适用于任何对象,不只是字符串和数字,接受谓词,只有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'}
//  ]

如果你想让它找到第一个唯一的项目,而不是最后一个,在那里添加一个find . hasownproperty()检查。

使用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/from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set < / p >

你可以输入带有重复元素的数组,下面的方法将返回带有唯一元素的数组。

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

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

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}

下面是一种具有可定制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)