本記事では、JavaScriptで配列の重複を無くす方法について解説しています。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
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オブジェクトはそれを無視します。
