モダンJavaScript入門: 配列内の重複要素を削除する

目次

1. はじめに
2. JavaScriptの配列とは
3. 配列内の重複要素を削除する方法
4. コード例
5. 応用例
6. まとめ

1. はじめに

JavaScriptの配列内の重複要素を削除する方法について解説します。この記事はJavaScriptの初学者向けに、基本的な配列操作から応用的な操作までをカバーします。

2. JavaScriptの配列とは

JavaScriptの配列とは、複数の値を一つの変数に格納できるデータ構造です。配列は0から始まるインデックス番号で値を参照します。

let fruits = ['apple', 'banana', 'apple', 'orange', 'banana'];
console.log(fruits[0]); // 'apple'

3. 配列内の重複要素を削除する方法

配列内の重複要素を削除する基本的な方法は、JavaScriptの新しいデータ構造であるSetを使用することです。Setは重複する要素を持たない特性を持っています。

let fruits = ['apple', 'banana', 'apple', 'orange', 'banana'];
let uniqueFruits = [...new Set(fruits)];
console.log(uniqueFruits); // ['apple', 'banana', 'orange']

4. コード例

以下に具体的なコード例を示します。

// 配列の定義
let numbers = [1, 2, 2, 3, 4, 4, 5];

// Setオブジェクトを作成
let uniqueNumbers = [...new Set(numbers)];

// 結果の表示
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

5. 応用例

例1: 大文字小文字を区別せずに重複要素を削除

let words = ['Apple', 'apple', 'Banana', 'banana'];
let uniqueWords = [...new Set(words.map(word => word.toLowerCase()))];
console.log(uniqueWords); // ['apple', 'banana']

例2: オブジェクト配列から重複要素を削除

let students = [
  {id: 1, name: 'John'},
  {id: 2, name: 'Jane'},
  {id: 1, name: 'John'},
];
let uniqueStudents = [...new Set(students.map(student => JSON.stringify(student)))].map(student => JSON.parse(student));
console.log(uniqueStudents); // [{id: 1, name: 'John'}, {id: 2, name: 'Jane'}]

例3: ネストした配列から重複要素を削除

let nestedArray = [1, [2, 3], [2, 3], 4, 5];
let uniqueNestedArray = [...new Set(nestedArray.map(item => JSON.stringify(item)))].map(item => JSON.parse(item));
console.log(uniqueNestedArray); // [1, [2, 3], 4, 5]

6. まとめ

この記事では、JavaScriptの配列内の重複要素を削除する方法について解説しました。Setオブジェクトを用いることで容易に重複要素の削除が可能です。さまざまな応用例も紹介しましたので、ぜひお試しください。