👯

JavaScriptの配列メソッド メモ!

2024/04/13に公開

配列メソッドの使い方とポイント

1. 要素を順番に処理する:forEach()

  • メリット: 配列の各要素に対して処理を行いたい時に便利
  • 使い分けのポイント: 配列の要素を順番に処理したい時に使用する。ただし、処理結果を返す必要がない場合に適している
accounts.forEach(function(acc) {
  console.log(acc.owner);
});

2. 新しい配列を生成する:map()

  • メリット: 既存配列の各要素に対して何らかの処理を行い、新しい配列を生成したい時に便利
  • 使い分けのポイント: 配列の要素を変換したり、新しい情報を付加したりする場合に適している。返り値として新しい配列が欲しい時に使用する
const movementsUSD = movements.map(mov => mov * 1.1);
console.log(movementsUSD);

3. 条件に合う要素を抽出する:filter()

  • メリット: 配列の中から条件に合う要素だけを抽出したい時に便利
  • 使い分けのポイント: 配列の中から特定の条件に合う要素を取り出したい時に使用する
const deposits = movements.filter(mov => mov > 0);
console.log(deposits);

4. 要素を一つの値にまとめる:reduce()

  • メリット: 配列の要素を1つの値にまとめ上げたい時に便利
  • 使い分けのポイント: 配列の要素を累積的に処理し、最終的に1つの値にしたい時に使用する
const balance = movements.reduce((acc, mov) => acc + mov, 0);
console.log(balance);

5. 条件を満たす要素が存在するか確認する:some()

  • メリット: 配列の中に少なくとも1つの要素が条件を満たすかどうかを判定したい時に便利
  • 使い分けのポイント: 配列の中に指定した条件を満たす要素が存在するかどうかを boolean で返す
const anyDeposits = movements.some(mov => mov > 5000);
console.log(anyDeposits);

6. 全ての要素が条件を満たすか確認する:every()

  • メリット: 配列の全ての要素が条件を満たすかどうかを判定したい時に便利
  • 使い分けのポイント: 配列の全ての要素が指定した条件を満たすかどうかを boolean で返す
const allPositive = movements.every(mov => mov > 0);
console.log(allPositive);

7. 条件に合う最初の要素を取得する:find()

  • メリット: 配列の中から条件に合う最初の要素を取得したい時に便利
  • 使い分けのポイント: 条件に合う最初の要素のみを返す
const account = accounts.find(acc => acc.owner === 'Jessica Davis');
console.log(account);

8. 条件に合う最初の要素のインデックスを取得する:findIndex()

  • メリット: 配列の中から条件に合う最初の要素のインデックスを取得したい時に便利
  • 使い分けのポイント: 条件に合う最初の要素のインデックスを返す
const index = accounts.findIndex(acc => acc.userName === currentAccount.userName);
console.log(index);

9. 値の存在を確認する:includes()

  • メリット: 配列に指定した値が含まれているかどうかを判定したい時に便利
  • 使い分けのポイント: 単純に値の存在を確認したい時に使用する
console.log(movements.includes(-130));

10. 多次元配列を平坦化する:flat() / flatMap()

  • メリット: 多次元配列を平坦化したい時に便利
  • 使い分けのポイント: flat()は配列を指定した深さまで平坦化し、flatMap()map()flat(1)を組み合わせたメソッド
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);

11. 要素を並べ替える:sort()

  • メリット: 配列の要素を並べ替えたい時に便利
  • 使い分けのポイント: デフォルトでは文字列の並び順で並び替えられるが、数値や日付などを並び替える場合は、独自のソート関数を渡す必要がある
// 数値配列をソート
const movements = [-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]

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

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: 並び替え順を定義する関数(オプション)
  • 返値: ソート済みの配列(元の配列を変更)

配列メソッドの特性

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

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

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

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

配列のシャローコピー

  • スプレッド構文や**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()メソッドのメリット

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

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

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

Discussion