本記事では、JavaScriptで配列の重複を無くす方法について解説しています。
JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
| 出版社 | 技術評論社 |
|---|---|
| 著者 | 山田 祥寛 |
| 発売日 | 2023/2/13 |
| ページ数 | 624ページ |
| レビュー (Amazon) | (4件) |
綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
| 出版社 | オライリージャパン |
|---|---|
| 著者 | Dustin Boswell / Trevor Foucher |
| 発売日 | 2012/6/23 |
| ページ数 | 260ページ |
| レビュー (Amazon) | (620件) |
Setオブジェクトで簡単に重複を無くせる
今まで配列の重複を無くす処理を実装したい場合、filterメソッドとindexOfメソッドを組み合わせることが多かったです。しかし、この方法はJavaScriptに慣れていない人からしたら、何故これで重複がなくなるんだ？と思わせるコードです。
let fruitsArr = ["リンゴ", "パイナップル", "イチゴ", "リンゴ", "イチゴ"];
let newFruitsArr = fruitsArr.filter(
(element, index) => fruitsArr.indexOf(element) === index
);
console.log(newFruitsArr); // => (3) ['リンゴ', 'パイナップル', 'イチゴ']分からない人向けに上記のコードを簡単に解説します。
indexOfメソッドを配列に使用すると一番最初に見つけたインデックス番号(添え字)を返します。例えばリンゴの場合は0が返されます。filterメソッドが4回目の処理を始めた時対象の文字列はリンゴなので「arr.indexOf(“リンゴ”) === 3」で比較します。arr.indexOf(“リンゴ”)の戻り値は一番最初に見つけた0になるので「0 === 3」でfilterメソッドによって弾かれます。
結構ややこしいですよね。。このコードをSetオブジェクトに置き換えることで簡単に配列の重複を無くすることができます。
let fruitsArr = ["リンゴ", "パイナップル", "イチゴ", "リンゴ", "イチゴ"];
let fruitsSet = new Set(fruitsArr);
// スプレット構文orArray.fromメソッドのどちらか
let newFruitsArr1 = [...fruitsSet];
let newFruitsArr2 = Array.from(fruitsSet);
console.log(newFruitsArr1); // => (3) ['リンゴ', 'パイナップル', 'イチゴ']
console.log(newFruitsArr2); // => (3) ['リンゴ', 'パイナップル', 'イチゴ']new Set()の引数に重複を無くしたい配列を指定します。次にスプレッド構文またはArray.fromメソッドを使用してSetオブジェクトを配列に変換します。すると、重複が無くなった配列が完成します。
重複が無くなる理由は、Setオブジェクトは重複した値を許可しないという性質を持っているからです。Setオブジェクト内に既に存在する値を追加しようとするとSetオブジェクトはそれを無視します。
DMM WEBCAMP 
CodeCamp 
TechAcademy 
