JavaScriptで配列の重複する要素・値を削除する方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptで配列の重複する要素・値を削除する方法について解説していきます。

1 JavaScriptで配列の重複する要素・値を削除する方法
- 1.1 Setクラスとは？
- 1.2 JavaScriptで配列の重複する要素・値を削除するSampleCode
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 最近の投稿

JavaScriptで配列の重複する要素・値を削除する方法

JavaScriptで配列の重複する要素・値を削除するには、Setクラスを使用します。

Setクラスとは？

Setクラスは、JavaScriptの組み込みクラスで、重複する値を格納することができないという特性を持ちます。

今回は、この特性を利用します。

Set オブジェクトは値のコレクションです。

Set に重複する値は格納出来ません。

Set 内の値はコレクション内で一意になります。

Set はその要素について挿入順で反復処理を行うことができます。

挿入順は、各要素が add メソッドによって正常に Set に挿入された順番に対応します。
引用元: MDN: Set

JavaScriptで配列の重複する要素・値を削除するSampleCode

const cardList = [
  {id: 1, participant: 'ロボたま', affiliation: 'エンジニア'},
  {id: 2, participant: 'まりたま', affiliation: 'エンジニア'},
  {id: 3, participant: '白桃', affiliation: '営業部'},
  {id: 4, participant: 'ももちゃん', affiliation: '営業部'},
  {id: 5, participant: 'まさぴょん', affiliation: '営業部'},
  {id: 6, participant: 'まりぴょん', affiliation: 'デザイナー'},
  {id: 7, participant: 'ハム太郎', affiliation: 'エンジニア'},
  {id: 8, participant: 'ロボ太郎', affiliation: 'デザイナー'},
  {id: 9, participant: 'まり太郎', affiliation: 'デザイナー'},
  {id: 10, participant: 'ぷる玉', affiliation: '人事部'},
  {id: 11, participant: 'ぷるぷる玉', affiliation: '人事部'},
  {id: 12, participant: 'ロボ玉試作1号機', affiliation: 'エンジニア'},
  {id: 13, participant: 'ロボ玉試作2号機', affiliation: 'デザイナー'},
  {id: 14, participant: 'ロボ玉試作1号機', affiliation: 'ロボ玉開発部'},
];

// 部署・情報だけの配列
const affiliationList = cardList.map(card => card.affiliation);
console.log('affiliationList', affiliationList);

// 1. 配列の重複を削除する処理 Ver. Array.form
const uniqueAffiliList = Array.from(new Set(affiliationList));
console.log('uniqueAffiliList', uniqueAffiliList);
// ['エンジニア', '営業部', 'デザイナー', '人事部', 'ロボ玉開発部']

// 2. 配列の重複を削除する処理 Ver. スプレッド構文
const uniqueAffiliList2 = [...new Set(affiliationList)];
console.log('uniqueAffiliList2', uniqueAffiliList2);
// ['エンジニア', '営業部', 'デザイナー', '人事部', 'ロボ玉開発部']