Zenn
🐷

【JavaScript】Arrayの反復メソッドまとめ(forEach, filter, mapとか)

2020/09/17に公開
JavaScript
#
array
#
foreach
#
filter
#
map
tech

JavaScriptで使用できるArrayの反復メソッドについてまとめてみた

反復メソッドについて

  • これらのメソッドは配列を処理する際にコールバックされる関数を引数に取る。
  • メソッドが呼ばれたタイミングで配列のlength値を一時的に保存して処理を行うため、処理中に追記された要素は処理に影響を与えない
  • しかし、配列に対するその他の変更(要素の値の書き換えや削除)は、その要素が変更された後に処理中で参照する場合に操作に影響を与える。つまり、処理中に変更した要素を再度同じ処理中に参照しようとした場合、変更後の要素を参照することになる。

引数の説明

  • element: 配列内の要素を一つ一つ取り出したもの
  • index: 何回目のループかを検知するための番号
  • array: 元の配列

forEach

const list = [0, 1, 2, 3]
list.forEach((element, index, array) => {
  console.log(element)
})

// 0, 1, 2, 3
  • 配列の一つ一つをitemとして取り出して何かしらの処理を行うことができる

filter

const list = [0, 1, 2, 3]
const newList = list.filter((element, index, array) => {
  return (element > 1)
})

console.log(newList)

// [2, 3]
  • 元の配列から条件に当てはまるものだけを取得して、新しい配列を作成することができる
  • 条件に当てはまる要素だけで配列を作成したい場合や、要素の中の不要な要素を削除したい場合に活用できる

map

const list = [0, 1, 2, 3]
const newList = list.map((element, index, array) => {
  return element + 1
})

console.log(newList)

// [1, 2, 3, 4]
  • 元の配列から、何かしらの処理を加えて新しい配列を作成することができる
  • filterとの違いは、elementに整形処理や値を変更する処理を加えるかどうか
  • 新しく作成された配列を必ず使用することを目的としているため、処理だけを行いたい場合は、forEachなどを使用しなければならない

reduce, reduceRight

const list = [0, 1, 2, 3]
const totalVaule = list.reduce((previousValue, currentValue, index, array) => {
  return previousValue + currentValue
})

console.log(totalValue)

// 6
  • 配列の先頭から順番に処理を行う
  • reduceRightの場合は最後から順番に処理を行う

every

const list = [0, 1, 2, 3]
const isPassed = list.every((element, index, array) => {
  return element > 1
})

console.log(isPassed)

//false
  • 配列内の全ての要素がその条件に当てはまるかどうかを調べることができる

some

const list = [0, 1, 2, 3]
const isExist = list.some((element, index, array) => {
  return element = 3
})

console.log(isExist)

// true
  • 条件を満たすものがあるかを判定する
  • 処理中にtrueが返ってきたタイミングで処理が止まる

find

const list = [0, 1, 2, 3]
const target = list.find((element, index, array) => {
  element >= 2
})

console.log(target)

// 2
  • 条件に当てはまる配列内の最初の要素を返す
    • 要素が見つからない場合はundefinedを返す
  • 条件に当てはまる最初の添字が必要な場合は、findIndex()を使用する
    • 要素が見つからない場合は-1を返す
  • 配列内に要素が存在するかを調べる場合はincludes()を使用する

参考

Array MDN web docs

Discussion