JavaScript

【JavaScript】配列の重複を無くす方法

本記事では、JavaScriptで配列の重複を無くす方法について解説しています。

JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

本書情報
出版社技術評論社
著者山田 祥寛
発売日2023/2/13
ページ数624ページ
レビュー
(Amazon)
(4件)
先輩くん
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ!
後輩ちゃん
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ!

綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

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オブジェクトはそれを無視します。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村