# javascript 配列 重複排除
配列の重複はじく作業は開発の際によくあります。foreach でくるくる回してやるのもいいですが、パフォーマンス的に悪く、もっと省エネでスマートなやり方がほしかったときに filter や map set などもおすすめします。javascript の世界は楽しい世界！javascript でやろう！
# filter ファンクション使う
filter は一般的でよくあります、構文がわかりやすいし、以前から使われているので安定安心のやり方です。
filter function 構文
let newArray = arr.filter(callback(element[, index, [array]])[, thisArg])
引数:callback
配列の各要素に対して実行するテスト関数です。この関数が true を返した要素は残され、false を返した要素は取り除かれます。
この関数は３つの引数を受け付けます。
- element
配列内で処理中の現在の要素です。 - index 省略可
配列内で処理中の現在の要素の位置です。 - array 省略可
filter メソッドが実行されている配列です。 - thisArg 省略可
callback を実行するときに this として使用する値です。
返値:新しい配列
例文
const words = [
"spray",
"limit",
"elite",
"exuberant",
"destruction",
"present",
];
const result = words.filter((e) => e.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
filter 使って連想配列の重複排除
const arr = [
{ id: 1, name: "filter 1" },
{ id: 2, name: "filter 2" },
{ id: 3, name: "filter 3" },
{ id: 2, name: "重複 2" },
{ id: 3, name: "重複 3" },
];
const result = arr.filter((e, index, self) => {
return self.findIndex((el) => el.id === e.id) === index;
});
console.log(result);
// [{ id: 1, name: "filter 1" }, { id: 2, name: "filter 2" }, { id: 3, name: "filter 3" }]
実際は id より name の重複チェックで使う時が多いでしょうが、使い方は一緒です。
# map 使うやり方
filter は使い慣れているけど、パフォーマンス的に良くないので、腕を磨くなら、map や set を使った方がシンプルでいいでしょう
const arr = [{ id: 1 }, { id: 2 }, { id: 2 }, { id: 3 }];
const map = new Map(arr.map((o) => [o.id, o]));
console.log(map);
// { 1 => { id: 1 }, 2 => { id: 2 }, 3 => { id: 3 } }
# EcmaScript 2015 から導入された Set を使う
JavaScript リファレンス標準組み込みオブジェクト Set (opens new window)
const array1 = ["A", "B", "C", "A", "B"];
const array2 = [...new Set(array1)];
console.log(array2); // [ "A", "B", "C" ]
const array3 = [1, 5, 3, 1, 5];
const array4 = Array.from(new Set(array1));
console.log(array4); // [ 1, 5, 3 ]
配列と違い、Set, Map では順序が保証されないというのが一般的ですが、JavaScript では仕様によってこれが保証されています。
# LoDash ライブラリの _.uniq() 関数を使う
const arr = [1, 2, 3, 1, 2];
const output = _.uniq(arr);
console.log(output); // [1, 2, 3]