配列内の一意の値を取得する方法


167

配列内の一意の値のリストを取得するにはどうすればよいですか?常に2番目の配列を使用する必要がありますか、それともJavaScriptのjavaのハッシュマップに似たものがありますか?

JavaScriptjQueryのみを使用します。追加のライブラリは使用できません。


2
stackoverflow.com/questions/5381621/…-あなたが私が何を望んでいるかを正確に説明していますか?
SpaceBison 2012年

1
underscore.jsライブラリを使用することに心を開いていますか?
jakee

Javaハッシュマップは基本的にJavaScriptオブジェクトと同じです。構文は{"key": "value"、 "key2": "value2"}
Ian

JavaScript / TypeScriptコレクションAPIは、Scalaと比較してひどいものですlist.toSet
ジョーダンスチュワート

回答:


120

@Rocketの回答のコメントでそれについて説明したので、ライブラリを使用しない例を提供することもできます。これは、2つの新しいプロトタイプの機能を必要とし、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 2016

4
これは実行時間が非常に複雑になります(最悪の場合:O(n ^ 2))
Rahul Arora

1
これは本当に非効率的な実装です。結果配列をチェックして、すでに項目が含まれているかどうかを確認するのは恐ろしいことです。より良い方法は、カウントを追跡するオブジェクトを使用するか、補助記憶域を使用しない場合は、最初にO(n log n)で並べ替えてから、線形スイープして並べて要素を比較することです
Isaiah Lee

1
「contains」関数が本当に必要ですか?
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);

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

それはほとんどkennebecからのコピーペーストですが、確かにクロージャーを使用するのではなく、パラメーターとして配列を渡すことで、おそらくパフォーマンスが向上します。

-私はドットを接続せず、1つのライナーをスキャンしただけで、大きな投稿のように見えたのでスキップし、別のソースを見つけて他のユーザーがすばやく見つけられるように再投稿しました。とはいえ、あなたの権利。ケネベックとほぼ同じです。
Josh Mc

いいですね-フィルターがパラメーターとして配列で送信されたことに気づかず、外部オブジェクトで作業したくありませんでした。これはまさに私が必要とするものです-私のバージョンのJavaScript(古いxercesバージョン)にはしばらくの間新しい機能がありません。
Gerard ONeill 2017

1
@GerardONeillええ、いくつかの状況は非常に重要です。たとえば、機能的にチェーンされていて、.map(...)。filter(...)などの変数が割り当てられていない配列にアクセスしたい場合
Josh Mc

@ジョシュ・マック、あなたはどういうわけか「ユニークな」方法で「インクルード」を使うことができますか?
vkelman 2018年

143

ここに私がここに含まれていないと私が思うES6のためのよりきれいな解決策があります。Setspread演算子を使用します。...

var a = [1, 1, 2];

[... new Set(a)]

どっちが帰る [1, 2]


1
それはとても賢いです!
Josh Mc

1
さて、これはワンライナーです!
Mac

11
Array.from(... new Set(a))Setは暗黙的に配列型に変換できないため、Typescriptでは使用する必要があります。ちょうど頭を上げて!
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
なぜこれが否決されたかはわかりません。最初は少しあいまいで、「実用的」に分類され、読むのが実用的ではないかもしれませんが、他のほとんどの答えが欠けている宣言的で非破壊的で簡潔なものです。
Larry

1
@Larryは、これと同じ回答が何年も前に提供されたため、反対票が投じられました。
Alex Okrushko 2016

@AlexOkrushkoは十分に公平です
Larry

7
すべてを1行にまとめると、すべてが1行になります:-)
Gary McGill

a.indexOf(x) === i3つの等号に注意して、平等を厳しくするとよいでしょう。
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()答えはO(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))

または、イテラブルの配列スプレッド構文による

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

これは、このnew SetようにサポートするJS環境(最新のAngular / TypeScriptなど)の場合の方法です
Don Cheadle

1
それはあなたがまた、設定や地図などの反復可能オブジェクト上のアレイスプレッドの構文を使用することができることを指摘価値がある: 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

元の配列をそのまま残したい場合は、

最初の-の一意の要素を含む2番目の配列が必要です

ほとんどのブラウザには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
ニート、私は、彼らは非常にダイナミックで大きい場合、パフォーマンスhickup可能性があり、特にthosesetsを変換する、伝えるための唯一の方法は、:)テストにあると思いますが、いくつかのもパフォーマンスの番号を見ていいだろう
宇宙飛行士

2
あなたはtranspilerを使用したり、サポートが、それは、あなたのように、より簡潔に同じことを行うことができ環境にある場合:var uniqueArr = [...new Set(arr)]; // ["a", "b"]
Stenerson

やあ@宇宙飛行士はあなたが言ったようにパフォーマンスについていくつかのテストをしましたか?
alexventuraio 2016

8

JavaScriptではネイティブではありませんが、多くのライブラリにこのメソッドがあります。

Underscore.jsの_.uniq(array)リンク)は非常にうまく機能します(ソース)。


共有してくれてありがとう!この関数は、v1.4.3からの引数リストとして配列とともにイテレータとコンテキストを取ります。
Kunj

6

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]

5
コアJavaScriptオブジェクトのプロトタイプ内でjQueryを使用する場合は、$.uniqueArray(arr)?などのjQuery関数を記述する方が適切ではない場合があります。Arrayのプロトタイプ内にjQueryへの参照を埋め込むことは疑わしいようです
jackwanders

1
@jackwanders:何がそんなに疑わしいのですか?ページにjQueryがある場合は、それを使用してみましょう。
ロケットHazmat

作成した新しい一意の関数がjQueryに依存するようになっただけです。jQueryが使用されていることを確認せずに新しいサイトやアプリに移動することはできません。
ジャックワンダーズ

2
それが私のポイントでした。jQueryを使用する場合は、関数自体をjQueryの一部にします。コアオブジェクトのプロトタイプを拡張する場合は、再利用できるようにするために、コアJavaScriptを使用します。他の誰かがあなたのコードを見ている場合、それ$.uniqueArrayがjQueryに依存していることは明らかです。それほど明白でArray.prototype.uniqueはありません。
ジャックワンダーズ

1
@jackwanders:なるほど。私は常にjQueryを使用するので、コードでこれを使用しますprototype。しかし、私は今あなたの要点を理解しています。とにかくここに置いておきます。
ロケットハズマット

6

2番目のアレイを使用した短くて甘いソリューション。

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 2016

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

Array.someとArray.reduceで一意を見つけるには、バニラJSだけが必要です。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

上記のソリューションの大半は、ランタイムが非常に複雑です。

O(n)時間でreduceジョブを使用して実行できるソリューションを次に示します

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に依存していません。アイデアは、オブジェクトマップを作成し、一意のものを配列にプッシュすることです。



1

使用できます

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

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

それはあなたにユニークな要素を与え、

**>しかし、落とし穴があります。

この「1」と1の場合、diff要素です**

2番目のオプションは、配列でフィルターメソッドを使用することです。


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

これまでの解決策の唯一の問題は効率です。これについて心配している場合(そしておそらくそうする必要がある場合)は、ネストされたループを回避する必要があります。あなたのようなソリューションを単一のループを実装することができ、このまたはその


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.filterおよびArray.indexOf方法は、一意の値を取得します

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

私はこのアプローチをウェブサイトで見ましたが、彼らのコードはここに表示されているものとは異なります。コードを1行に簡略化してここに投稿しているので、誰かがその恩恵を受けることができます

注:私のアプローチは、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

これは、問題に対する1つのライナーソリューションです。

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

これをブラウザのコンソールにコピーして貼り付け、結果を取得します。


-2

私は組み込みのJQuery一意の関数を持っています。

uniqueValues= jQuery.unique( duplicateValues );

詳細については、jquery APIドキュメントを参照してください。

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


8
これは、DOM要素の配列でのみ機能し、文字列や数値では機能しないことに注意してください。-ドキュメントからの引用。
mco 2015
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.