Zenn
Open7

配列の反復処理

JavaScript
NabeckNabeck

Map

対象の配列の要素ひとつひとつを任意に加工した新しい配列を返す

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

console.log(
arr.map((n) => n), // [1,2,3]
arr.map((n) => n * 2), // [2,4,6]
arr.map((n, i) =>`${i + 1}番目は${n}です`) //1番目は1です...
)
//代入すると配列の複製も作れる
const arr2 = arr.map((n) => n);
console.log(arr2);
NabeckNabeck

filter

与えた条件に適合する要素だけを抽出した新しい配列を返す

const arr = [1, 2, 3, 4, 5];
const arr2 = arr.filter((num) => num % 2 === 1);
console.log(arr2); //[1,3,5]
NabeckNabeck

find, findIndex, every, some

  • find()
    与えた条件に適合した最初の要素を返す。見つからなかった場合はundefinedを返す。
  • findIndex()
    与えた条件に適合した最初の要素のインデックスを返す。見つからなかった場合は -1 を返す。
  • every()
    与えた条件をすべての要素が満たすか」を真偽値で返す。
  • some()
    与えた条件を満たす要素がひとつでもあるか」を真偽値で返す。
const arr = [1, 2, 3, 4, 5];

console.log(
arr.find((n) => n > 2), // 3
  arr.find((n) => n > 5), // undefined
  arr.findIndex((n) => n > 2), //2
  arr.every((n) => n !== 0), // true
  arr.some((n) => n >= 6) // false
);
NabeckNabeck

reduce

隣り合う2つの配列要素に対して左から右へ同時に関数を適用し、単一の値にする。
「配列の中身を一つずつ足していって合計を求める」ということができる。

const arr = [1, 2, 3, 4, 5];
console.log(
  arr.reduce((n, m) => n + m) // 15
);
  • 1 回めの実行： m = 1、前回の実行がないので、結果は 1 がそのまま返る
  • 2 回めの実行： m = 2、前回の実行結果により n = 1、結果は 1 + 2 = 3 が返る
  • 3 回めの実行： m = 3、前回の実行結果により n = 3、結果は 3 + 3 = 6 が返る
  • 4 回めの実行： m = 4、前回の実行結果により n = 6、結果は 6 + 4 = 10 が返る
  • 5 回めの実行： m = 5、前回の実行結果により n = 10、結果は 10 + 5 = 15 が返る
NabeckNabeck

sort,reverse

配列に含まれる要素について、指定した条件に従って並べ替えたり逆順に並べ替える

  • 破壊的メソッドなので、slice() かシャローコピーしてから実行
  • sort()の引数は省略可だがその場合 Unicode の文字コード順にソートされるので『比較関数』を使用する。

比較関数が守るべきルール

  1. 第 1 引数が第 2 引数より優先度が高い（前に並べる）場合、0 未満の数値を返す
  2. 第 1 引数が第 2 引数より優先度が低い（後に並べる）場合、0 より大きい数値を返す
  3. 第 1 引数と第 2 引数の優先度が同じ（ソートの必要がない）場合、0 を返す（※省略可）
const arr = [5, 27, 12, 41];
console.log(
  arr.slice().sort(), //[12, 27, 41, 5]
  //昇順
  [...arr].sort((n, m) => (n < m ? -1 : 1)), //[5, 12, 27, 41]
  //降順
  [...arr].sort((n, m) => (n > m ? -1 : 1)), //[41, 27, 12, 5]
  //逆順
  [...arr].reverse() //[41, 12, 27, 5]
);
NabeckNabeck

includes

『指定した値の要素がひとつでも含まれているか』を真偽値で返す。

const arr = [5, 27, 12, 41];
console.log(
  arr.includes(12), //true
  arr.includes(68) //false
);
NabeckNabeck

任意の回数だけ繰り返し処理と空の配列作成

[...Array(3)].map((_, n) => {
  console.log(`${n + 1} times`); //1 times 2times 3times
});

[...Array(3).keys()].map((n) => {
  console.log(`${n + 1} times`); //1 times 2times 3times
});

console.log(Array(3).fill('')); //['','','',]