JavaScriptの配列を操る汎用メソッド

初めに
ベースとなる配列
filter
map
sort
reduce
some
every
find
findIndex
参考

初めに

業務でReactとかを触っているのですが、配列を操作することが割と多いです。
なので今回はよく使うメソッドを短く紹介していきたいと思います。
今回forやforEachによるループ処理は省略します。

ベースとなる配列

オブジェクトの入った配列を扱います。
適当にコピペしてください😛

const users = [
      { id:1, name: 'Mick', age: 34, hobby: "cycling" },
      { id:2, name: 'Isaac', age: 40, hobby: "music" },
      { id:3, name: 'Galileo', age: 21, hobby: "guiter" },
      { id:4, name: 'Marie', age: 18, hobby: "climbing" },
      { id:5, name: 'Johannes', age: 6, hobby: "toy" },
      { id:6, name: 'Nicolaus', age: 54, hobby: "music" },
      { id:7, name: 'Max', age: 43, hobby: "jogging" },
      { id:8, name: 'Katherine', age: 20, hobby: "music" },
      { id:9, name: 'Ada', age: 18, hobby: "shopping" },
      { id:10, name: 'Sarah E.', age: 63, hobby: "flower" },
      { id:11, name: 'Lise', age: 42, hobby: "cooking" },
      { id:12, name: 'Hanna', age: 51, hobby: "movie" }
    ];

filter

特定の条件に合うデータを抽出して、新たな配列を返却するメソッドです。
例えば、数値データなら「○○以下の数値だけ」を抽出したり、文字データなら「○○と同じ文字列だけ」を抽出するような使い方が出来ます。

// ageが40以上のuserを取り出す
const ageArray = users.filter((user) => user.age >= 40)
console.log(ageArray)
// 0: {id: 2, name: "Isaac", age: 40, hobby: "music"}
// 1: {id: 6, name: "Nicolaus", age: 54, hobby: "music"}
// 2: {id: 7, name: "Max", age: 43, hobby: "jogging"}
...

map

配列の各要素に何かしらの操作をして新たな配列を作ります。

// nameだけの配列を生成する
const nameArray = users.map((user) => `${user.name}`)
console.log(nameArray)
//  ["Mick", "Isaac", "Galileo", "Marie", ...]

sort

文字列順や数字の大小などによる昇順・降順で対象の値を並び替えることができます

// ageの昇順で配列を並び替える
const sortArray = users.sort((a,b) => a.age > b.age ? 1 : -1)
console.log(sortArray)
// 0: {id: 5, name: "Johannes", age: 6, hobby: "toy"}
// 1: {id: 9, name: "Ada", age: 18, hobby: "shopping"}
...

aとbという2つの引数を使って、a.ageとb.ageを比較した結果を返していますね。
これにより、a.ageがb.ageよりも大きいかどうかを確認することで、順番を入れ替えます。

reduce

配列に含まれるすべての要素の値を合計し、その合計値を返します。
配列名.reduce( コールバック関数(合計値の保管用, 要素の値), 初期値 )で記述します

// userのageの合計値を計算する
const totalAge = users.reduce((total,user) => total + user.age , 0)
console.log(totalAge)
// 410

some

配列内の少なくとも一つの要素が、条件に合うかどうかをテストします。
trueかfalseを返します

// ageが20未満のuserがいるかを判定する
const isYoung = users.some((user) => user.age < 20)
console.log({isYoung})
// {isYoung: true}

every

配列内のすべての要素が、条件に合うかどうかをテストします。
trueかfalseを返します

// user全員のageが20未満かを判定する
const isAllYoung = users.every((user) => user.age < 20)
console.log({isAllYoung})
// {isAllYoung: false}

find

配列から条件に合うものの最初の値を見つけるメソッドです

// idが5のuserの情報を見つける
const findUser = users.find((user) => user.id === 5)
console.log(findUser)
// {id: 5, name: "Johannes", age: 6, hobby: "toy"}

findIndex

配列から条件に合うものの最初の要素の位置を返します。
つまり条件に合うものが配列の何番目にあるかがわかります。

// idが3のuserの位置を見つける
const findUserIndex = users.findIndex((user) => user.id === 3)
console.log(users[findUserIndex])
// {id: 3, name: "Galileo", age: 21, hobby: "guiter"}