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

JavaScriptで配列内の重複する値を見つける・削除する方法

JavaScriptで配列を扱っていると、同じ値が複数含まれているケースに遭遇することがあります。この記事では、配列から重複する値を検出・削除する方法を、初心者にもわかりやすくサンプルコード付きで解説します。

方法1：オブジェクトを使って重複を削除する

もっとも古典的な手法のひとつが、空のオブジェクトをキーの記録用として使い、配列の各要素を順番に登録していく方法です。オブジェクトのキーは自動的に一意になるため、結果的に重複のない配列を作れます。

サンプルコード

<html>
<body>
<script>
function removeDuplicate(arr) {
   var c;
   var len = arr.length;
   var result = [];
   var obj = {};
   for (c = 0; c < len; c++) {
      obj[arr[c]] = 0;
   }
   for (c in obj) {
      result.push(c);
   }
   return result;
}

var myArr = [10, 20, 30, 40, 10, 40, 70, 80, 70, 90];
document.write(removeDuplicate(myArr));
</script>
</body>
</html>

実行結果

10,20,30,40,70,80,90

この例では、元の配列 [10, 20, 30, 40, 10, 40, 70, 80, 70, 90] の中に含まれていた「10」「40」「70」の重複が取り除かれ、それぞれ1回ずつだけ出力されています。

方法2：Setを使ったモダンな書き方（ES6以降）

ES6（ECMAScript 2015）以降では、Set オブジェクトを使うことで、より簡潔に重複を削除できます。Setは同じ値を2度格納しないという特性を持つためです。

const myArr = [10, 20, 30, 40, 10, 40, 70, 80, 70, 90];
const uniqueArr = [...new Set(myArr)];

console.log(uniqueArr); // [10, 20, 30, 40, 70, 80, 90]

わずか数行で済むため、現在の開発ではこちらの方法が最も広く使われています。

方法3：filter()とindexOf()で重複値だけを抽出する

「重複を削除する」のではなく、「どの値が重複しているのか」を特定したい場合は、filter() と indexOf() を組み合わせると便利です。

const myArr = [10, 20, 30, 40, 10, 40, 70, 80, 70, 90];
const duplicates = myArr.filter((value, index) => myArr.indexOf(value) !== index);
const uniqueDuplicates = [...new Set(duplicates)];

console.log(uniqueDuplicates); // [10, 40, 70]

indexOf() は最初に出現した位置を返すため、現在のインデックスと一致しない要素＝2回目以降の出現、つまり重複している値だと判断できます。

まとめ

  • 古い環境にも対応させたい場合はオブジェクトを使った方法
  • シンプルさとパフォーマンスを重視するならSetを使った方法
  • 重複している値そのものを知りたい場合はfilter() + indexOf()

用途に応じてこれらの方法を使い分けることで、配列操作を効率的に行えます。

  1. JavaScript配列から一意の値（重複なし）を取得する方法

    JavaScriptの配列に含まれる重複した値を取り除き、一意の値（ユニークな値）だけを取得したい場合は、Setオブジェクトを使うのが最もシンプルで効率的な方法です。 Setは同じ値を1つしか格納できないデータ構造のため、配列をnew Set()に渡すだけで自動的に重複が排除されます。その後、スプレッド構文（[...set]）を使えば、簡単に元の配列形式へ戻すことができます。 サンプルコード 以下は、JavaScriptの配列からすべての一意の値を取得する実際のコード例です。 <!DOCTYPE html> <html lang=ja> <head> <

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

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