JavaScriptにおける配列操作：filter, includes, reduce, Setを活用して交差を取得

2024-04-12

JavaScriptにおける配列の交差を取得する最も簡単なコード

方法1： filter と includes を使用する

この方法は、新しい配列を作成し、その中に最初の配列の各要素を順にチェックしていくというものです。ある要素が2番目の配列にも含まれている場合は、新しい配列に追加されます。

function intersection(array1, array2) {
  const result = [];
  for (const element of array1) {
    if (array2.includes(element)) {
      result.push(element);
    }
  }
  return result;
}

const array1 = [1, 2, 3, 4, 5];
const array2 = [2, 4, 6, 8];

const intersectionResult = intersection(array1, array2);
console.log(intersectionResult); // [2, 4]

方法2： reduce と Set を使用する

この方法は、Setオブジェクトを使用して、2つの配列の要素を効率的に処理します。

function intersection(array1, array2) {
  const set1 = new Set(array1);
  const set2 = new Set(array2);
  const intersectionResult = [...set1].filter(element => set2.has(element));
  return intersectionResult;
}

const array1 = [1, 2, 3, 4, 5];
const array2 = [2, 4, 6, 8];

const intersectionResult = intersection(array1, array2);
console.log(intersectionResult); // [2, 4]

説明

上記のコードでは、intersectionという関数が定義されています。この関数は、2つの配列を受け取り、それらの共通要素（交差）を返します。
filter と includes を使用する方法は、最初の配列の各要素を順にループし、2番目の配列に含まれているかどうかをチェックします。含まれている場合は、新しい配列に追加されます。
reduce と Set を使用する方法は、Setオブジェクトを使用して、2つの配列の要素を効率的に処理します。Setオブジェクトは、重複を排除した要素の集合を保持します。

一般的な用途には、filter と includes を使用する方が読みやすく、理解しやすいコードになります。
処理速度が重要な場合は、reduce と Set を使用する方が効率的になる可能性があります。

上記以外にも、JavaScriptで配列の交差を取得する方法はいくつかあります。例えば、lodashなどのライブラリを使用する方法もあります。

JavaScriptで配列の交差を取得するには、様々な方法があります。今回紹介した2つの方法は、その中でも最も簡単で分かりやすい方法です。状況に合わせて適切な方法を選択してください。

方法1： filter と includes を使用する

function intersection(array1, array2) {
  const result = [];
  for (const element of array1) {
    if (array2.includes(element)) {
      result.push(element);
    }
  }
  return result;
}

const array1 = [1, 2, 3, 4, 5];
const array2 = [2, 4, 6, 8];

const intersectionResult = intersection(array1, array2);
console.log(intersectionResult); // [2, 4]

関数内では、空の配列 result が作成されます。
for...of ループを使用して、最初の配列 array1 の各要素 element を順に処理します。
array2.includes(element) を使って、element が2番目の配列 array2 に含まれているかどうかをチェックします。
もし element が array2 に含まれている場合は、result に追加されます。
処理が終わったら、result を返します。

方法2： reduce と Set を使用する

function intersection(array1, array2) {
  const set1 = new Set(array1);
  const set2 = new Set(array2);
  const intersectionResult = [...set1].filter(element => set2.has(element));
  return intersectionResult;
}

const array1 = [1, 2, 3, 4, 5];
const array2 = [2, 4, 6, 8];

const intersectionResult = intersection(array1, array2);
console.log(intersectionResult); // [2, 4]

const set1 = new Set(array1); と const set2 = new Set(array2); で、それぞれ array1 と array2 の要素を Set オブジェクトに変換します。
const intersectionResult = [...set1].filter(element => set2.has(element)); で、以下の処理を行います。
- [...set1] で、set1 の要素を配列に変換します。
- filter(element => set2.has(element)) で、set2 に element が含まれているかどうかをチェックし、含まれている場合のみ配列に残します。

補足

サンプルコードでは、2つの配列 array1 と array2 を直接定義していますが、実際のコードでは、APIからのレスポンスやデータベースから取得したデータなど、様々なソースから配列を取得する可能性があります。
サンプルコードはあくまでも一例であり、状況に合わせて様々な方法で実装することができます。

JavaScriptで配列の交差を取得するその他の方法

方法3： lodash ライブラリを使用する

lodash は、JavaScriptでよく使用されるユーティリティライブラリです。このライブラリには、intersection 関数を含む様々な便利な関数が用意されています。

const _ = require('lodash');

const array1 = [1, 2, 3, 4, 5];
const array2 = [2, 4, 6, 8];

const intersectionResult = _.intersection(array1, array2);
console.log(intersectionResult); // [2, 4]

ES2020では、Array.prototype.filter と Array.prototype.includes メソッドに新しい機能が追加されました。これらの機能を使用して、以下のコードのように簡潔に交差を取得することができます。

const intersectionResult = array1.filter(element => array2.includes(element));
console.log(intersectionResult); // [2, 4]

方法5：フォーループとオブジェクトを使用する

以下のコードは、フォーループとオブジェクトを使用して、交差を取得する方法を示しています。

function intersection(array1, array2) {
  const intersectionResult = [];
  const hashTable = {};
  for (const element of array2) {
    hashTable[element] = true;
  }
  for (const element of array1) {
    if (hashTable[element]) {
      intersectionResult.push(element);
    }
  }
  return intersectionResult;
}

const array1 = [1, 2, 3, 4, 5];
const array2 = [2, 4, 6, 8];

const intersectionResult = intersection(array1, array2);
console.log(intersectionResult); // [2, 4]