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

JavaScriptで配列を比較する方法｜一致する要素を抽出するサンプルコード

JavaScriptには、配列同士を直接比較するための組み込みメソッドが用意されていません。そのため、2つの配列を比較して一致する要素を調べたい場合は、ループ処理などを使って要素を1つずつ確認する必要があります。

ここでは、二重のforループを使用して、2つの配列に共通する要素（一致する要素）を抽出して表示する方法を紹介します。

サンプルコード

<html>
<body>
<script>
   var arr1 = [50,60,65,90];
   var arr2 = [25,35,50,90];

   for (i = 0; i < arr1.length; i++) {
      for (z = 0; z < arr2.length; z++) {
         if (arr1[i] === arr2[z]) {
            document.write("<br>Matched element: " + arr2[z]);
         }
      }
   }
</script>
</body>
</html>

実行結果

Matched element: 50
Matched element: 90

コードの解説

このコードでは、外側のループでarr1の各要素を取り出し、内側のループでarr2の全要素と順番に比較しています。===（厳密等価演算子）で値が一致した場合、その要素を画面に出力します。

上記の例では、arr1とarr2の両方に含まれている「50」と「90」が一致した要素として表示されます。

補足：filter()メソッドを使った書き方

より簡潔に書きたい場合は、filter()メソッドとincludes()メソッドを組み合わせる方法も便利です。

var arr1 = [50,60,65,90];
var arr2 = [25,35,50,90];

var matched = arr1.filter(function(value) {
   return arr2.includes(value);
});

console.log(matched); // [50, 90]

この方法なら、一致する要素だけを新しい配列として取得できるため、結果をそのまま変数に格納して再利用したい場合に特に有効です。

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

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

  2. JavaScriptのmap()メソッドで配列を変換する方法を解説

    JavaScriptで配列の各要素を別の値に変換したい場合、map()メソッドを使うのが最も一般的で効率的な方法です。map()は、元の配列の各要素に対して指定したコールバック関数を実行し、その戻り値から新しい配列を生成します。元の配列は変更されないため、安全に処理を行えるのが大きな特徴です。 以下は、map()メソッドを使って配列の各要素を2乗に変換するサンプルコードです。 コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /&