【JavaScript】配列メソッド一覧 #JavaScript

JavaScript の配列メソッドは、データを扱う際に非常に強力なツールです。
これらのメソッドを使いこなすことで、データの操作、加工、検索が格段に効率的になります。
代表的な配列メソッドを役割ごとに大まかに分け、その使用方法と役割について詳しく解説していきます

反復処理

配列の各要素に対して引数に渡した関数を実行します。返り値を持たず、配列の各要素に対して副作用を起こす操作に適しています。

[1, 2, 3].forEach((element) => console.log(element));

配列の各要素に対して（左から右へ）関数を適用し、単一の出力値を生成します。アキュムレータ（累積値）と現在の値に対して関数が適用され、最終的な値を返します。

const sum = [1, 2, 3].reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 6

各要素に指定した処理を行った値で新たな配列を生成して返します。map はデータの変換や加工に便利です。

const doubled = [1, 2, 3].map((element) => element * 2);
console.log(doubled); // [2, 4, 6]

条件を満たす要素だけの配列を生成して返します。データセットから特定の条件にマッチする要素のみを選択する場合に使用します。

const even = [1, 2, 3, 4].filter((element) => element % 2 === 0);
console.log(even); // [2, 4]

条件を満たす最初の要素を返します。見つからない場合はundefinedを返します。

const found = [1, 2, 3, 4].find((element) => element > 2);
console.log(found); // 3

条件を満たす最初の要素のインデックスを返します。見つからない場合は-1を返します。

const index = [1, 2, 3, 4].findIndex((element) => element > 2);
console.log(index); // 2

指定した要素が最初に出現するインデックスを返します。見つからない場合は-1を返します。主にプリミティブ値の検索に使用されます。

const index = ["子", "丑", "寅", "卯"].indexOf("寅");
console.log(index); // 2

配列の末尾の要素を削除し、その要素を返します。

const fruits = ["apple", "banana", "cherry"];
const lastElement = fruits.pop(); // 'cherry'
console.log(fruits); // ['apple', 'banana']

配列の先頭の要素を削除し、その要素を返します。

const fruits = ["apple", "banana", "cherry"];
const firstElement = fruits.shift(); // 'apple'
console.log(fruits); // ['banana', 'cherry']

配列の末尾に一つまたは複数の要素を追加し、追加後の配列の要素数を返します。

const arr = [1, 2, 3];
const newLength = arr.push(4, 5);
console.log(arr); // [1, 2, 3, 4, 5]
console.log(newLength); // 5

配列の先頭に一つまたは複数の要素を追加し、追加後の配列の要素数を返します。

const arr = [1, 2, 3];
const newLength = arr.unshift(0);
console.log(arr);