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

JavaScriptで2つの配列の差分を取得する方法を解説

JavaScriptで2つの配列の差分（お互いに存在しない要素）を取得したい場合、split()、indexOf()、sort()などのメソッドを組み合わせることで実現できます。

基本的な考え方

差分を求める手順は以下のとおりです。

  • 各配列を文字列化し、split()で分割してからmap(Number)で数値に変換する
  • 片方の配列の要素がもう片方の配列に存在するかをindexOf()で確認する
  • 存在しない要素（-1が返される要素）だけを新しい配列に追加する
  • 最後にsort()で昇順に並べ替えて結果を返す

サンプルコード

<html>
<head>
  <title>JavaScript 配列の差分</title>
</head>
<body>
  <script>
    function arrDifference(arr1, arr2) {
      var arr = [];
      arr1 = arr1.toString().split(',').map(Number);
      arr2 = arr2.toString().split(',').map(Number);
      // 配列1側のチェック
      for (var i in arr1) {
        if (arr2.indexOf(arr1[i]) === -1)
          arr.push(arr1[i]);
      }
      // 配列2側のチェック
      for (i in arr2) {
        if (arr1.indexOf(arr2[i]) === -1)
          arr.push(arr2[i]);
      }
      return arr.sort((x, y) => x - y);
    }
    document.write(arrDifference([50, 40, 90], [70, 50, 99, 40, 90]));
  </script>
</body>
</html>

実行結果

70,99

コードのポイント

この例では、配列 [50, 40, 90] と [70, 50, 99, 40, 90] を比較しています。両方の配列を相互にチェックすることで、片方にしか存在しない要素である「70」と「99」だけが抽出され、昇順に並べ替えられて出力されます。

なお、よりモダンな書き方としては、ES6のfilter()やSetオブジェクトを使うことで、より簡潔かつ高速に差分を求めることも可能です。特に大きな配列を扱う場合は、indexOf()の線形探索よりもSetを使った方法（計算量O(1)の検索）がパフォーマンス面で有利です。

  1. Androidで2つの日付の差分（日数）を取得する方法【サンプルコード付き】

    はじめに この記事では、Androidアプリで2つの日付の差分（日数）を取得する方法を、実際に動作するサンプルコードとともに解説します。日付の差分計算は、利用期間の表示やイベントまでの残り日数のカウントなど、さまざまな場面で役立つ基本的な処理です。 実装の手順 ステップ1：Android Studioで新規プロジェクトを作成 Android Studioを起動し、メニューから「File」→「New Project」を選択します。必要な項目をすべて入力して、新しいプロジェクトを作成しましょう。 ステップ2：レイアウトファイル（activity_main.xml）の編集 res/layout/ac

  2. MySQLで2つの列の差分を新しい列として取得する方法

    MySQLでは、SELECT文の中で単純な減算を行い、ASを使って別名（エイリアス）を付けることで、2つの列の差分を新しい列として表示できます。この記事では、実際にテーブルを作成し、2つの列の値の差を計算する手順を解説します。 1. テーブルの作成 まず、差分を計算する対象となる列を持つテーブルを作成します。ここでは「LowValue（低い値）」と「HighValue（高い値）」という2つのint型の列を用意します。 mysql> create table DemoTable ( Id int NOT NULL AUTO_INCREMENT PRIMARY KEY, Lo