JavaScript:filter()を使って配列内の重複要素を削除・取得したり、2つの配列から共通要素を取得する方法

Tips

JavaScript:filter()を使って配列内の重複要素を削除・取得したり、2つの配列から共通要素を取得する方法

JavaScriptで配列内の重複要素を削除・取得、配列内の重複していない要素を取得、2つの配列から共通要素・共通していない要素を取得する方法です。
中には別の方法を用いることでもっと短いコードで実装できるのもありますが、ここではいずれもfilter()メソッドを使った場合になります。

重複要素を削除

filter()メソッドとindexOf()メソッドを併用します。

JavaScript

const removeDuplicateValues = ([...array]) => {
  return array.filter((value, index, self) => self.indexOf(value) === index);
}

const array01 = [0, 2, 0, 7, 3, 0, 5, 2, 1, 5],
      array02 = [5, 7, 4, 1, 2, 6, 4, 4, 1, 1];
console.log(removeDuplicateValues(array01)); // [0, 2, 7, 3, 5, 1]
console.log(removeDuplicateValues(array02)); // [5, 7, 4, 1, 2, 6]
console.log(removeDuplicateValues([...array01, ...array02])); // [0, 2, 7, 3, 5, 1, 4, 6]

重複要素を取得

filter()メソッドとindexOf()メソッドを併用した判定に加え、lastIndexOf()メソッドを併用した判定も行います。

JavaScript

const getDuplicateValues = ([...array]) => {
  return array.filter((value, index, self) => self.indexOf(value) === index && self.lastIndexOf(value) !== index);
}

const array01 = [0, 2, 0, 7, 3, 0, 5, 2, 1, 5],
      array02 = [5, 7, 4, 1, 2, 6, 4, 4, 1, 1];
console.log(getDuplicateValues(array01)); // [0, 2, 5]
console.log(getDuplicateValues(array02)); // [4, 1]
console.log(getDuplicateValues([...array01, ...array02])); // [0, 2, 7, 5, 1, 4]

重複していない要素を取得

こちらはindexOf()メソッドを用いた値とlastIndexOf()メソッドを用いた値を比較します。

JavaScript

const getUniqueValues = ([...array]) => {
  return array.filter((value, index, self) => self.indexOf(value) === self.lastIndexOf(value));
}

const array01 = [0, 2, 0, 7, 3, 0, 5, 2, 1, 5],
      array02 = [5, 7, 4, 1, 2, 6, 4, 4, 1, 1];
console.log(getUniqueValues(array01)); // [7, 3, 1]
console.log(getUniqueValues(array02)); // [5, 7, 2, 6]
console.log(getUniqueValues([...array01, ...array02])); // [3, 6]

2つの配列から共通要素を取得

filter()メソッドと要素が配列に含まれているか判定するincludes()メソッドを併用します。
上で重複要素を削除する方法としてfilter()indexOf()を用いたものを紹介しましたが、関数内にあるSetを使用している箇所のように記述することでも重複要素を削除できます。

JavaScript

const getArraysIntersect = (array01, array02) => {
  return [...new Set(array01)].filter(value => array02.includes(value));
}

const array01 = [0, 2, 0, 7, 3, 0, 5, 2, 1, 5],
      array02 = [5, 7, 4, 1, 2, 6, 4, 4, 1, 1];
console.log(getArraysIntersect(array01, array02)); // [2, 7, 5, 1]

2つの配列から共通していない要素を取得

こちらもfilter()メソッドとincludes()メソッドを併用します。
始めに対象となる2つの配列を結合してしまい、その後要素がそれぞれの配列に含まれていないかを判定していきます。

JavaScript

const getArraysDiff = (array01, array02) => {
  const arr01 = [...new Set(array01)],
        arr02 = [...new Set(array02)];
  return [...arr01, ...arr02].filter(value => !arr01.includes(value) || !arr02.includes(value));
}

const array01 = [0, 2, 0, 7, 3, 0, 6, 2, 1, 5],
      array02 = [5, 7, 4, 1, 2, 6, 4, 4, 1, 1];
console.log(getArraysDiff(array01, array02)); // [0, 3, 4]

Close the search window,
please press close button or esc key.