JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】_.intersection()で複数の配列から共通要素を簡単に抽出する方法

配列が2つだけであれば、論理的な手法を使って共通要素を見つけることができます。しかし、配列が3つ以上になると、共通要素の特定は一気に難しくなります。そこで、この作業をできるだけ簡単にしてくれるのが、JavaScriptのライブラリunderscore.jsに用意されている_.intersection()メソッドです。

_.intersection()メソッドは、渡されたすべての配列の要素を1つずつチェックし、共通する値だけを出力します。なお、配列群の中に1つでも共通の値を持たない配列が含まれている場合、その値は結果に表示されません。

構文

_.intersection( array1, array2, .... );

このメソッドは複数の配列を引数として受け取り、それらに共通する値を特定して結果として返します。

基本的な使用例

次の例では、_.intersection()メソッドが3つの配列のすべての値を精査し、共通する値を出力しています。

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
</head>
<body>
<script type="text/javascript">
    document.write(_.intersection([1, 2, 3, 4, 5],
                                  [1, 2, 3, 4, 5, 6],
                                  [1, 2, 3, 4, 5, 6, 7, 8]));
</script>
</body>
</html>

出力

1,2,3,4,5

このメソッドは、数値や文字列だけでなく、nullやundefined、voidといったfalsy値（偽と評価される値）も入力として扱えます。

falsy値を含む配列での使用例

次の例では、数値に加えてfalsy値も含めた配列を渡しています。_.intersection()メソッドは、falsy値を含むすべての値を精査し、共通する値だけを出力しました。

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
</head>
<body>
<script type="text/javascript">
    document.write(_.intersection([1, 2, 3, "null", "undefined"],
                                  [1, 2, 3, "null", "undefined", "void"],
                                  [1, "null", "void"]));
</script>
</body>
</html>

出力

1,null

このように、_.intersection()メソッドを活用すれば、配列の数が多くても共通要素を簡単に抽出できます。underscore.jsを読み込むだけで利用できるため、複数の配列を比較する処理が必要な場面でぜひ活用してみてください。

  1. JavaScriptで2つの配列を結合する方法【concat()とスプレッド構文】

    JavaScriptで2つの配列を1つにまとめたい場合、最も一般的なのが concat() メソッドです。このメソッドは、元の配列を変更することなく、複数の配列や値を連結した新しい配列を返します。 concat()メソッドの基本構文 let 新しい配列 = 配列A.concat(配列B); サンプルコード 以下は、ボタンをクリックすると2つの配列を結合し、その結果を画面に表示する完全なサンプルです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8&

  2. JavaScriptで2つの配列を乗算する方法｜forループとmap()の実装例

    JavaScriptで2つの配列の各要素同士を乗算し、その結果を新しい配列として取得する方法を解説します。基本的にはforループでインデックスを順番に処理しながら、対応する位置にある要素同士を掛け合わせていくシンプルなアプローチです。 2つの配列を乗算するサンプルコード 以下の例では、「CLICK HERE」ボタンをクリックすると、配列 arr と arr1 の対応する要素が乗算され、結果が新しい配列 multArray に格納された上で画面に表示されます。 <!DOCTYPE html> <html lang=en> <head> <meta ch