JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript入門】Set()とfilter()を使って配列の重複要素を簡単に除去する方法

配列から重複した要素を取り除く方法にはさまざまなアプローチがありますが、モダンJavaScriptでは、重複除去の作業を非常にシンプルにしてくれる便利な機能が用意されています。その代表例が Set() と filter() です。この記事では、それぞれのメソッドの特徴と使い方を、実際のコード例とともにわかりやすく解説します。

Set() による重複の除去

Set() の重要な特徴は、一意な値（ユニークな値）しか保持できないという点です。つまり、同じ値が複数含まれていても自動的に重複が排除されるため、開発者側で特別なロジックを実装する必要はありません。コード量も少なく済むため、最も手軽な重複除去の方法といえます。

サンプルコード

次の例では、Set() を使うことで、配列内の重複要素を一切の条件分岐なしに一括で除去しています。スプレッド構文（...）と組み合わせることで、Setオブジェクトを通常の配列へ変換している点にも注目してください。

<html>
<body>
<script>
   var dupNames = ['John', 'Ram', 'Rahim', 'Remo', 'Ram', 'Rahim'];
   var uniArr = [...new Set(dupNames)];
   document.write("Before removing :" +" "+ dupNames);
   document.write("</br>");
   document.write("After using set() method :" +" "+ uniArr);
</script>
</body>
</html>

実行結果

Before removing : John,Ram,Rahim,Remo,Ram,Rahim
After using set() method : John,Ram,Rahim,Remo


filter() による重複の除去

filter() メソッドを使う場合、各要素に対して「その値がすでに登場済みかどうか」をひとつずつ確認しながらフィルタリングを行います。indexOf() で要素の最初の出現位置と現在のインデックスを比較し、両者が一致する要素（＝初めて出現した値）のみを残すことで、重複を効率的に排除できます。

サンプルコード

<html>
<body>
<script>
   var dupname = ['John', 'Ram', 'Rahim', 'Remo', 'Ram', 'Rahim'];
   var x = (dupname) => dupname.filter((v,i) => dupname.indexOf(v) === i)
   document.write("Before removing : " +" "+ dupname);  
   document.write("</br>");
   document.write("After filter() method :" +" "+x(dupname));
</script>
</body>
</html>

実行結果

Before removing : John,Ram,Rahim,Remo,Ram,Rahim
After filter() method : John,Ram,Rahim,Remo

どちらの方法でも結果は同じですが、単純に重複を除きたい場合は Set() が簡潔でおすすめです。一方、filter() は条件を柔軟にカスタマイズできるため、より高度な絞り込みを行いたい場面で活躍します。用途に応じて使い分けましょう。

  1. JavaScriptのオブジェクト配列に配列メソッドを適用する方法

    JavaScriptでは、オブジェクトが格納された配列に対しても、通常の配列と同じようにpop()、push()、splice()などの標準的な配列メソッドをそのまま使用できます。オブジェクト配列はあくまで「配列」であるため、要素としてオブジェクトが入っていても配列操作のAPIは共通で動作します。 コード例 以下は、JavaScriptオブジェクトの配列に対して配列メソッドを使用するサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

  2. 複数の値でJavaScript配列の要素を検索する方法

    JavaScriptである配列（arr）が、別の配列（arr1）の複数の値・すべての要素を含んでいるかどうかを確認したい場面はよくあります。そんなときは、every()メソッドとincludes()メソッドを組み合わせることで、シンプルに判定できます。以下はそのサンプルコードです。 コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=