【JavaScript】配列の重複を削除する方法｜Set・filter・Mapでオブジェクト配列・NaNの罠まで解説

const array = [1, 2, 2, 3, 4, 4, 5];

const unique = [...new Set(array)];
console.log(unique); // [1, 2, 3, 4, 5]

// Array.from でも同じ（map 関数を第2引数に渡せるのが利点）
const unique2 = Array.from(new Set(array));

const array = [1, 2, 2, 3, 4, 4, 5];

const unique = array.filter((value, index, self) => {
  return self.indexOf(value) === index; // 最初に現れた位置だけ残す
});
console.log(unique); // [1, 2, 3, 4, 5]

const data = [1, NaN, 2, NaN, 2];

// Set は NaN を「1つ」にまとめられる
console.log([...new Set(data)]);                          // [1, NaN, 2]

// filter + indexOf は NaN が「すべて消える」
console.log(data.filter((v, i, s) => s.indexOf(v) === i)); // [1, 2] ← NaN が消失！

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 1, name: "Carol" },
];

// id をキーに Map へ詰める → 同じ id は上書きされる
const unique = [...new Map(users.map((u) => [u.id, u])).values()];
console.log(unique);
// [{ id: 1, name: "Carol" }, { id: 2, name: "Bob" }]  ← 同じ id は「最後」が残る

const unique = users.filter((u, i, self) =>
  i === self.findIndex((x) => x.id === u.id) // 最初の出現だけ残す
);
// [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }]  ← 同じ id は「最初」が残る

const seen = new Set();
const unique = users.filter((u) => {
  if (seen.has(u.id)) return false; // 既出ならスキップ
  seen.add(u.id);
  return true;                       // 初出だけ残す
});
// [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }]

const seen = new Set();
const unique = items.filter((x) => {
  const key = `${x.type}|${x.name}`; // 値に含まれない区切り文字で連結
  if (seen.has(key)) return false;
  seen.add(key);
  return true;
});

const arr = [{ a: 1 }, { a: 1 }];

console.log([...new Set(arr)].length); // 2 ← 中身は同じでも参照が違うので残る