初めに
業務で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"}
参考
他にも色々とありますが自分がよく使うやつを今回ご紹介しました。
【JavaScript入門】filterで配列のデータを抽出する方法 | 侍エンジニアブログhttps://www.sejuku.net
【JavaScript入門】sort()による配列・文字列・オブジェクトのソート方法 | 侍エンジニアブログhttps://www.sejuku.net
配列のすべての要素の値を合計した値を取得するhttps://www.javadrive.jp
JavaScriptのsomeとeveryがすごく便利 – Qiitahttps://qiita.com
Array.prototype.find() – JavaScript | MDNhttps://developer.mozilla.org
Array.prototype.findIndex() – JavaScript | MDNhttps://developer.mozilla.org