👯

JavaScriptの配列メソッドメモ!

2024/04/13に公開

forEach()

メリット: 配列の各要素に対して処理を行いたい時に便利
使い分けのポイント: 配列の要素を順番に処理したい時に使用する。ただし、処理結果を返す必要がない場合に適している。

accounts.forEach(function(acc) {
  console.log(acc.owner);
});

map()

メリット: 既存配列の各要素に対して何らかの処理を行い、新しい配列を生成したい時に便利
使い分けのポイント: 配列の要素を変換したり、新しい情報を付加したりする場合に適している。返り値として新しい配列が欲しい時に使用する。配列の中のオブジェクトを処理していて、オブジェクトの中のプロパティだけ返値として使用したいなどの場合に便利！

const movementsUSD = movements.map(mov => mov * 1.1);
console.log(movementsUSD);

filter()

メリット: 配列の中から条件に合う要素だけを抽出したい時に便利
使い分けのポイント: 配列の中から特定の条件に合う要素を取り出したい時に使用する。条件関数の結果がtrueの要素のみが新しい配列に含まれる。

const deposits = movements.filter(mov => mov > 0);
console.log(deposits);

reduce()

メリット: 配列の要素を1つの値にまとめ上げたい時に便利
使い分けのポイント: 配列の要素を累積的に処理し、最終的に1つの値にしたい時に使用する。計算処理などに適している。初期値は忘れがちだけど、意識してつける

const balance = movements.reduce((acc, mov) => acc + mov, 0);
console.log(balance);

空の配列で初期値を設定していないとエラーになる。処理の内容もわかりやすくなるし書く！

const arr = [].reduce((acc, mov) => acc + mov, 0);
console.log(arr);

some()

メリット: 配列の中に少なくとも1つの要素が条件を満たすかどうかを判定したい時に便利
使い分けのポイント: 配列の中に指定した条件を満たす要素が存在するかどうかを boolean で返す。includes() とは異なり、条件を自由に指定できる。

const anyDeposits = movements.some(mov => mov > 5000);
console.log(anyDeposits);

every()

メリット: 配列の全ての要素が条件を満たすかどうかを判定したい時に便利
使い分けのポイント: some() とは逆に、配列の全ての要素が指定した条件を満たすかどうかを boolean で返す。

const allPositive = movements.every(mov => mov > 0);
console.log(allPositive);

find()

メリット: 配列の中から条件に合う最初の要素を取得したい時に便利
使い分けのポイント: filter() とは異なり、条件に合う最初の要素のみを返す。配列から特定の要素を取り出したい時に適している。

const account = accounts.find(acc => acc.owner === 'Jessica Davis');
console.log(account);

findIndex()

メリット: 配列の中から条件に合う最初の要素のインデックスを取得したい時に便利
使い分けのポイント: find() と同様に、条件に合う最初の要素のインデックスを返します。要素の位置情報が必要な時に使用する。

const index = accounts.findIndex(acc => acc.userName === currentAccount.userName);
console.log(index);

includes()

メリット: 配列に指定した値が含まれているかどうかを判定したい時に便利
使い分けのポイント: 単純に値の存在を確認したい時に使用します。some() とは異なり、条件式ではなく値そのものを比較する。

console.log(movements.includes(-130));

flat() / flatMap()

メリット: 多次元配列を平坦化したい時に便利
使い分けのポイント: flat() は配列を指定した深さまで平坦化し、flatMap() は map() と flat(1) を組み合わせたメソッド。入れ子になった配列を展開したい時に使用する。flatMap()は中間配列を生成しないため、メモリ効率が良い！

const arr = [[1, 2, 3], [4, 5, 6], 7, 8];
console.log(arr.flat());

const accountMovements = accounts.map(acc => acc.movements).flat();
console.log(accountMovements);

sort()

メリット: 配列の要素を並べ替えたい時に便利
使い分けのポイント: 配列の要素の順序を変更したい時に使用する。デフォルトでは文字列の並び順で並び替えられるが、数値や日付などを並び替える場合は、独自のソート関数を渡す必要がある点に注意。

// 普通にsortすると文字列ベースでソート
const owners = ['jonas', 'zach', 'adam,', 'martha'];
console.log(owners.sort()); // ['adam,', 'jonas', 'martha', 'zach']

// 数値配列をソート
console.log(movements); // [-130, -400, -650, 1300, 200, 3000, 450, 70]
console.log(movements.sort()); // [-130, -400, -650, 1300, 200, 3000, 450, 70]
// デフォルトでは文字列ソートが行われるため、数値が期待通りに並ばない

// 昇順ソート
movements.sort((a, b) => a - b);
console.log(movements); // [-650, -400, -130, 70, 200, 450, 1300, 3000]

// 降順ソート
movements.sort((a, b) => b - a); 
console.log(movements); // [3000, 1300, 450, 200, 70, -130, -400, -650]

sortメソッドには独自のソート関数を渡すことで、数値や日付など、様々な順序で並び替えることができます。ソート関数の返り値によってソートの順序が決まる。

昇順ソート: (a, b) => a - b
降順ソート: (a, b) => b - a

入力配列を変更するメソッド

以下のメソッドは、入力された配列を直接変更する

forEach()
map()
filter()
reduce()
sort()
flat()
flatMap()

これらのメソッドを使用すると、元の配列が変更されてしまうため、必要に応じてslice()メソッドや配列のスプレッド構文を使って、配列のコピーを作成して処理する

入力配列を変更しないメソッド

以下のメソッドは、入力された配列を変更しない。

some()
every()
find()
findIndex()
includes()

これらのメソッドは、入力配列への影響がないため、そのまま使用することができる。配列メソッドを使う際に、元の配列を変更したくない場合は、slice()や配列のスプレッド構文などを使ってコピーを作成する。

配列のシャローコピー

配列のコピー方法として、slice()メソッドとスプレッド構文が示されています。これらはシャローコピーを作成するもの。スプレッド構文かslice()を使用する

const originalArray = [1, 2, 3, 4, 5];

// スプレッド構文
const shallowCopy = [...originalArray];

// slice()
const shallowCopy2 = originalArray.slice();

const shallowCopy3 = originalArray.slice(1, 4); // [2, 3, 4]

slice()メソッドのメリット

シャローコピーの作成
元の配列を変更することなく、新しい配列としてコピーを作成できる。
部分コピーの作成
開始インデックスと終了インデックス(終了インデックスは含まれない)を指定することで、配列の一部をコピーできる。
関数型プログラミングに適している
slice()メソッドは元の配列を変更しないため、関数型プログラミングのスタイルに適している。

用途別のメソッド選択ガイド

配列の要素を順番に処理したい場合 → forEach()
配列の要素を変換したり新しい情報を付加したい場合 → map()
配列から特定の条件に合う要素を抽出したい場合 → filter()
配列の要素を1つの値にまとめ上げたい場合 → reduce()
配列に指定した条件を満たす要素が存在するかどうかを確認したい場合 → some()
配列の全ての要素が指定した条件を満たすかどうかを確認したい場合 → every()
配列から条件に合う最初の要素を取得したい場合 → find()
配列から条件に合う最初の要素のインデックスを取得したい場合 → findIndex()
配列に指定した値が含まれているかどうかを確認したい場合 → includes()
多次元配列を平坦化したい場合 → flat() / flatMap()
配列の要素を並べ替えたい場合 → sort()

入力配列を変更するメソッド

forEach(), map(), filter(), reduce(), sort(), flat(), flatMap()
- これらのメソッドを使うと元の配列が変更されるため、必要に応じてslice()などを使って配列のコピーを作成して処理する

入力配列を変更しないメソッド

some(), every(), find(), findIndex(), includes()
- これらのメソッドは入力配列に影響がないため、そのまま使用できる

配列メソッドの引数と返値まとめ

forEach(callback, thisArg)

callback: 各要素に対して実行される関数
thisArg: callbackの中のthisの値を設定する(オプション)
返値: なし

map(callback, thisArg)

callback: 各要素に対して実行される関数
thisArg: callbackの中のthisの値を設定する(オプション)
返値: 新しい配列

filter(callback, thisArg)

callback: 各要素に対して実行される関数。trueを返した要素のみ含む新しい配列を作成
thisArg: callbackの中のthisの値を設定する(オプション)
返値: 新しい配列

reduce(callback, initialValue)

callback: 各要素に対して実行される関数。accumulator(前回の返り値)とcurrentValue(現在の値)を受け取る
initialValue: accumulator初期値(オプション)
返値: 単一の値

some(callback, thisArg)

callback: 各要素に対して実行される関数。1つでもtrueを返せばそれ以上は実行されない
thisArg: callbackの中のthisの値を設定する(オプション)
返値: boolean値

every(callback, thisArg)

callback: 各要素に対して実行される関数。全ての要素がtrueを返さないとfalseになる
thisArg: callbackの中のthisの値を設定する(オプション)
返値: boolean値

find(callback, thisArg)

callback: 各要素に対して実行される関数。最初にtrueを返した要素を返す
thisArg: callbackの中のthisの値を設定する(オプション)
返値: 要素の値、見つからない場合はundefined

findIndex(callback, thisArg)

callback: 各要素に対して実行される関数。最初にtrueを返した要素のインデックスを返す
thisArg: callbackの中のthisの値を設定する(オプション)
返値: 要素のインデックス、見つからない場合は-1

includes(valueToFind, fromIndex)

valueToFind: 検索する値
fromIndex: 検索を開始するインデックス(オプション)
返値: boolean値

flat(depth)

depth: 平坦化する階層の深さ(オプション、デフォルト値は1)
返値: 新しい配列

flatMap(callback, thisArg)

callback: 各要素に対して実行される関数
thisArg: callbackの中のthisの値を設定する(オプション)
返値: 新しい配列

sort(compareFn)

compareFn: 並び替え順を定義する関数(オプション)
返値: ソート済みの配列(元の配列を変更)