MENU
  1. ホーム
  2. JavaScript
  3. Javascript応用
  4. 【JavaScript】Arrayクラスについて

【JavaScript】Arrayクラスについて

Javascript応用

JavaScriptのArrayクラスは、リスト形式でデータを扱うための強力なツールです。この記事では、Arrayクラスの基本的な使い方から高度な機能までを紹介し、効率的な配列操作のコツを解説します。

目次

Arrayクラスの基本操作

配列の作成

配列は、Arrayクラスのコンストラクタを使って作成できますが、一般的にはリテラルを使用します。

let arr1 = new Array(); // 空の配列
let arr2 = new Array(5); // 長さ5の配列
let arr3 = new Array(1, 2, 3, 4, 5); // 要素を指定して配列を作成
let arr4 = [1, 2, 3, 4, 5]; // リテラルで配列を作成

Arrayクラスの基本的なメソッド

配列への要素追加と削除

配列の末尾に要素を追加するにはpush、先頭に追加するにはunshiftを使用します。

let arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]
arr.unshift(0); // [0, 1, 2, 3, 4]

要素を削除するにはpopとshiftを使用します。

arr.pop(); // [0, 1, 2, 3] -> 4が削除される
arr.shift(); // [1, 2, 3] -> 0が削除される

要素の検索

配列内の要素を検索するためのメソッドも豊富に用意されています。

let arr = [1, 2, 3, 4, 5];
arr.includes(3); // true
arr.indexOf(3); // 2
arr.lastIndexOf(3); // 2 (最初に見つかったインデックスを返す)

要素の削除と置換

spliceメソッドは要素を削除、置換、または追加するために使用されます。

let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1); // [1, 2, 4, 5] -> インデックス2から1つの要素を削除
arr.splice(2, 0, 3); // [1, 2, 3, 4, 5] -> インデックス2に3を追加
arr.splice(2, 1, 9); // [1, 2, 9, 4, 5] -> インデックス2の要素を9で置換

Arrayクラスの高度なメソッド

配列のコピーと結合

配列のコピーにはslice、結合にはconcatを使用します。

let arr = [1, 2, 3];
let copy = arr.slice(); // [1, 2, 3]
let newArr = arr.concat([4, 5]); // [1, 2, 3, 4, 5]

要素の変換

mapメソッドは、配列の各要素を変換して新しい配列を返します。

let arr = [1, 2, 3];
let squared = arr.map(x => x * x); // [1, 4, 9]

フィルタリング

filterメソッドは、条件を満たす要素のみを含む新しい配列を作成します。

let arr = [1, 2, 3, 4, 5];
let evens = arr.filter(x => x % 2 === 0); // [2, 4]

要素の集計

reduceメソッドは、配列の要素を集計して単一の値を生成します。

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, x) => acc + x, 0); // 15

Arrayクラスのその他の便利なメソッド

findとfindIndex

特定の条件を満たす最初の要素を見つけるにはfind、そのインデックスを見つけるにはfindIndexを使用します。

let arr = [1, 2, 3, 4, 5];
let firstEven = arr.find(x => x % 2 === 0); // 2
let firstEvenIndex = arr.findIndex(x => x % 2 === 0); // 1

everyとsome

配列の全要素が条件を満たすかを確認するにはevery、いずれかの要素が条件を満たすかを確認するにはsomeを使用します。

let arr = [1, 2, 3, 4, 5];
let allPositive = arr.every(x => x > 0); // true
let someEven = arr.some(x => x % 2 === 0); // true

まとめ

JavaScriptのArrayクラスは、データの操作と処理を効率的に行うための豊富なメソッドを提供しています。基本的な使い方から高度なテクニックまでを理解し、適切に活用することで、より効果的なコードを書くことができます。配列操作の基本を押さえた上で、各メソッドの特性を理解し、適材適所で利用していきましょう。

Javascript応用
目次