Як отримати унікальні значення в масиві


167

Як я можу отримати список унікальних значень у масиві? Чи потрібно завжди використовувати другий масив чи є щось схоже на хешмап Java в JavaScript?

Я буду використовувати лише JavaScript та jQuery . Додаткові бібліотеки не можна використовувати.


2
stackoverflow.com/questions/5381621/… - описує саме те, що ви хочете, я думаю?
SpaceBison

1
Ви відкриті для використання underscore.jsбібліотеки?
Джейк

хешмак Java в основному такий же, як об’єкт javascript. синтаксис є {"key": "value", "key2": "value2"}
Ian

API API колекції JavaScript / TypeScript жахливі порівняно зі Scala,list.toSet
Джордан Стюарт

Відповіді:


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)
Орвелофіл

1
@Lexynux: такий випадок, якщо вигадливий javascript-nerd відповідь, який повинен використовувати лише той, хто розуміє, що це означає, а можливо, навіть і тоді. Те , що він говорить, що написання if (~a.indexOf(b)) ...є ідентичним для написання більше if (a.indexOf(b) == -1) ....
Орвелофіл

4
це має високу складність у часі (найгірший випадок: O (n ^ 2))
Рахул Арора

1
це дійсно неефективна реалізація. перевірка масиву результатів, щоб побачити, чи він вже містить елемент, жахливий. кращим підходом було б або використовувати об’єкт, який відстежує підрахунки, або якщо ви не хочете використовувати допоміжне сховище, відсортуйте його спочатку в O (n log n), потім у лінійному розгортці та порівняйте поруч із елементами
Isaiah Lee

1
Чи дійсно нам потрібна функція "містить"?
Анімеш Кумар

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, але, мабуть, передача масиву як параметр, а не використання закриття, ймовірно, підвищить продуктивність.

- Треба сказати, що я не з'єднав крапки, просто просканував для одного вкладиша, був схожий на великий пост, пропущений таким чином, пішов і знайшов альтернативне джерело та повторно розмістив для інших, щоб швидко знайти. Це сказало, ваше право; майже те саме, що kennebec.
Джош Мак

Ніцца - не зрозумів, що фільтр, надісланий у масиві як параметр, і не хотів працювати над зовнішнім об'єктом. Це саме те, що мені потрібно - моя версія javascript (старіша версія xerces) деякий час не буде мати нових смаколиків.
Джерард ONeill

1
@GerardONeill Так, деякі ситуації це дуже важливо, наприклад, якщо він функціонально пов'язаний і ви хочете отримати доступ до масиву, якому не призначена така змінна, як .map (...). Filter (...)
Джош Мак

@Josh Mc, чи не могли б ви якось використовувати "включає" в "унікальний" метод?
vkelman

143

Ось набагато більш чисте рішення для ES6, яке, на мою думку, не включене сюди. Він використовує оператор Set та розповсюдження :...

var a = [1, 1, 2];

[... new Set(a)]

Який повертається [1, 2]


1
Це так розумно!
Джош Мак

1
Тепер, ЦЕ є один лайнер!
Мак

11
У Typescript, який ви повинні використовувати, Array.from(... new Set(a))оскільки Set не може бути неявно перетворений у тип масиву. Просто голови вгору!
Zachscs

4
@Zachscs, коли я спробував це, у мене з’явилася помилка компіляції. Ти мав на увазі просто Array.from(new Set(a))? Це, здається, працює.
adam0101

72

Один вкладиш, чистий 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 це було знято з голосу, тому що точно таку ж відповідь було надано роками до цього.
Олексій Окрушко

@AlexOkrushko досить чесно - пропустив цю відповідь через спосіб її форматування
Ларрі

7
Все одноосібно, якщо ви покладете все на одну лінію :-)
Гері Макгілл

Можливо, було б непогано посилити наголос рівності a.indexOf(x) === iна трьох знаках рівності.
treejanitor

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/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects / Встановити


1
Це відповідь, яку ви повинні використовувати. indexOf()відповіді жахливі, оскільки вони є О (N ^ 2). Відповіді на поширення є нормальними, але не працюватимуть для великих масивів. Це найкращий підхід.
Timmmm

20

Тепер у 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))

АБО Array розсипає синтаксис на ітерабелях

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
Найчистіший розчин!
Димитріс Філіппу

Це шлях, коли в JS-середовищі, яке підтримує new Setподібне (наприклад, сучасний Angular / TypeScript)
Дон Чейдл

1
Варто зазначити, що ви також можете використовувати синтаксис поширення Array на таких ітерабелях, як Set and Map: let items = [1,1,1,1,3,4,5,2,23,1,4,4,4,2,2,2]; let uniqueItems = [...new Set(items)];
jacobedawson

Я люблю ці відповіді ES6!
Глен Томпсон

1
Це ідентично відповіді @Adeel Imran Будь ласка, не приймайте відповіді, які точно збігаються з існуючими.
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 для перетворення масиву в унікальний набір. Потім, якщо вам потрібно використовувати методи масиву, ви можете перетворити його назад у масив:

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
Якщо ви використовуєте транспілятор або перебуваєте в середовищі, яке його підтримує, ви можете зробити те ж саме більш стисло, як:var uniqueArr = [...new Set(arr)]; // ["a", "b"]
Stenerson

Привіт, @Astronaut зробили кілька тестів на продуктивність, як ви сказали?
alexventuraio

8

Не є власним у Javascript, але у багатьох бібліотеках є цей метод.

Underscore.js _.uniq(array)( посилання ) працює досить добре ( джерело ).


Дякуємо за акцію! Ця функція приймає ітератор та контекст разом із масивом як список аргументів з версії 1.4.4.
Куньж

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
якщо ви збираєтеся використовувати jQuery всередині прототипу основного об'єкта javascript, можливо, не буде краще написати функцію jQuery, наприклад $.uniqueArray(arr)? Вставлення посилань на jQuery в Arrayпрототип 'здається сумнівним
jackwanders

1
@jackwanders: Що так сумнівного в цьому? Якщо у вас на сторінці jQuery, давайте скористаємося нею.
Ракета Hazmat

Просто те, що нова унікальна функція, яку ви написали, тепер залежить від jQuery; ви не можете перемістити його на новий сайт або додаток, не гарантуючи, що jQuery там використовується.
jackwanders

2
це був мій пункт; якщо ви збираєтесь використовувати jQuery, то зробіть саму функцію частиною jQuery. Якби я збирався розширити прототип основного об'єкта, я б дотримувався ядро ​​JavaScript, просто для того, щоб зберігати речі для багаторазового використання. Якщо хтось інший дивиться на ваш код, очевидно, що $.uniqueArrayвін залежить від jQuery; менш очевидно, що Array.prototype.uniqueтакож.
jackwanders

1
@jackwanders: Гадаю. Я використовую це у своєму коді, оскільки я завжди використовую jQuery, і мені просто подобається розширення prototypes. Але, я розумію вашу думку зараз. Я все одно залишу це тут.
Ракета Hazmat

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

Короткий? і солодке? Ви подивилися на найкращі рішення?
Олексій Окрушко

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'}
//  ] 

Якщо ви хочете, щоб він знайшов перший унікальний предмет замість останнього, додайте знайдений.hasOwnPropery ().


4

Вам знадобиться лише ванільний JS, щоб знайти унікальні файли з Array.some та Array.reduce. У синтаксисі ES2015 це лише 62 символи.

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

Array.some та Array.reduce підтримуються в 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 / Масив / Скорочення


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 * 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

Якщо вам не потрібно так сильно турбуватися про старі браузери, саме для цього розроблені набори.

Об'єкт 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}

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

Ось підхід із настроюваною 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.filterта Array.indexOfметоди, щоб отримати унікальні значення

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

Я бачив такий підхід на веб-сайті, але їх код відрізняється, ніж це виглядає тут. Я спростив код до одного рядка і розмістив його тут, щоб хтось отримав від нього користь

Примітка: Мій підхід схожий або такий же, як і в одному вкладиші, розміщеному Джошем. Я залишаю це тут, оскільки імена змінних самостійно пояснюються в моєму коді.


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

Скопіюйте це вставлення на консоль браузера та отримайте результати, yo :-)


-2

у мене вбудована унікальна функція JQuery .

uniqueValues= jQuery.unique( duplicateValues );

Для отримання додаткової інформації можна звернутися до Документацій API jquery.

http://api.jquery.com/jquery.unique/


8
Зауважте, що це працює лише на масивах елементів DOM, а не на рядках чи числах. - цитата з документації.
mco
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.