Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
21
Help us understand the problem. What is going on with this article?
@TsukasaKashima

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

初めに

業務で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"}

参考

他にも色々とありますが自分がよく使うやつを今回ご紹介しました。

21
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
impl
ReactNativeのリーディングカンパニー

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
21
Help us understand the problem. What is going on with this article?