[JavaScript]よく使うArrayメソッド

map

各要素に対して引数に渡された関数を実行し、その結果を新しい配列として返す。

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

const result = arr.map(v => v*2)

console.log(result)
// [0, 2, 4, 6, 8, 10]

filter

条件に該当する要素を持つ新しい配列を返す。

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

const result = arr.filter(v => v%2 === 0)

console.log(result)
// [0, 2, 4]

find

配列の要素を探索し、最初に条件に一致した要素を返す。

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

const result = arr.find(v => v > 2)

console.log(result)
// 3

some

配列が条件を一つでも満たしている場合にtrueを返す。

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

const result = arr.some(v => v === 4)
console.log(result)
// true

const result = arr.some(v => v === 10)
console.log(result)
// false

every

配列の要素が全て条件を満たしている場合にtrueを返す。

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

const result = arr.every(v => v >= 0)
console.log(result)
// true

const result = arr.every(v => v > 2)
console.log(result)
// false

includes

特定の要素が配列に含まれるかどうかを返す。

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

const result = arr.includes(3)

console.log(result)
// true

reduce

配列の要素を単一の出力に集約し、値を返却する関数。
下記コードでは、accumulatorが累積値、currentValが現在の要素である。

はじめに見たときは少しわかりにくいと思うが、配列を走査し、前の計算結果を次の処理に繋げていくイメージである。
例えば、最初の呼び出しでは、0+1=1となり、この結果の1が次の計算(1+2=3)、その次の計算(3+3=6)、更にその次の計算...というように計算されていく。

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

const result = arr.reduce((accumulator, currentVal) => accumulator + currentValue)

console.log(result)
// 15

sort

配列の要素を文字列に変換後、昇順に並べ、ソートされた配列と同じ配列の参照を返す。

const months = ['March', 'Jan', 'Feb', 'Dec', 'April']
months.sort()
console.log(months)
// ["April", "Dec", "Feb", "Jan", "March"]

// 参照を返すため、以下のコードでも結果は同じ
const result = months.sort()
console.log(result)
// ["April", "Dec", "Feb", "Jan", "March"]

数値に対してsortを行いたい場合は、比較関数を実装する必要がある。
比較関数は2つの引数(ここではxとy)を取り、その差を返却する。
この差が正の場合、xはyより大きいとみなされ、yのあとにxが配置される。
負の場合、xはyより小さいとみなされ、ｙの前にxが配置される。

const arr = [22, 32, 12, 94, 54, 82, 2342, 182 ]
const result = arr1.sort((x, y) => {
  return x < y ? -1 : 1
})
console.log(result)
// [12, 22, 32, 54, 82, 94, 182, 2342]

// 以下でも良い
const arr = [22, 32, 12, 94, 54, 82, 2342, 182 ]
const result = arr1.sort((x, y) => x - y)
console.log(result)
// [12, 22, 32, 54, 82, 94, 182, 2342]

reverse

配列の要素を反転させる。

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

const result = arr.reverse()

console.log(result)
// [5, 4, 3, 2, 1, 0]

concat

2つ以上の配列を結合する。
既存の配列を変更せず、新しい配列を返す。

const arr1 = [0, 1, 2, 3, 4, 5]
const arr2 = [6, 7, 8, 9, 10]

const result = arr1.concat(arr2)

console.log(result)
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

join

配列の全要素を連結した文字列を新たに生成し、その値を返す。

const arr = ['2023', '09', '09']

const result = arr.join('-')

console.log(result)
// "2023-09-09"

pop

配列から最後の要素を取り除き、その要素を返す。

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

const result = arr.pop()

console.log(result)
// 5
console.log(arr)
// [0, 1, 2, 3, 4]

shift

配列から最初の要素を取り除き、その要素を返す。

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

const result = arr.shift()

console.log(result)
// 0
console.log(arr)
// [1, 2, 3, 4, 5]

push

配列の末尾に要素を追加することができる。新しい配列の要素数を戻り値として返す。

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

const result = arr.push(6)

console.log(result)
// 7
console.log(arr)
// [0, 1, 2, 3, 4, 5, 6]

unshift

配列の最初に要素を追加することができる。新しい配列の要素数を戻り値として返す。

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

const result = arr.unshift(-1)

console.log(result)
// 7
console.log(arr)
// [-1, 0, 1, 2, 3, 4, 5]