1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

反復処理

forEach

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

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

reduce

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

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

配列生成

map

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

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

filter

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

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

検索

find

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

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

findIndex

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

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

indexOf

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

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

要素の削除、追加

pop

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

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

shift

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

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

push

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

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

unshift

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?