JavaScriptで配列操作まとめ

メモです。デベロッパーモードなどでお試しくださいな。

find()

const users = [
  { id: 1, name: "テストマン" },
  { id: 2, name: "テストウーマン" }
]
const target = users.find(user => user.id === 1)
// => { id: 1, name: "テストマン" }

提供されたテスト関数を満たす配列内の 最初の要素の値 を返す。1つ以上見つかったとしても、返ってくるのは最初にマッチしたものだけである。

Array.prototype.find()

forEach()

一番使うかもしれない。非同期処理では注意が必要である。

users.forEach(user => {
  console.log(user)
})

indexありの場合(indexは0からスタート)

users.forEach((user, i) => {
  console.log(user, i)
})

map()

与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成する。

const users = [
  { id: 1, name: "テストマン" },
  { id: 2, name: "テストウーマン" },
  { id: 3, name: "テスト先輩" },
]
const newUsers = users.map(user => {
  user.username = `${user.name}くん`
  return user
});
// => [{id: 1, name: "テストマン", username: "テストマンくん"},
//    {id: 2, name: "テストウーマン", username: "テストウーマンくん"},
//    {id: 3, name: "テスト先輩", username: "テスト先輩くん"}]

toString()

そのまま文字列に変更する。ArrayでDBに入れているデータを文字列にするなどで用途があるかもしれん…

let quote = "「負けたことがある」というのが いつか 大きな財産になる"
let dividedQuote = Array.from(quote)
// または、quote.split('')
console.log(dividedQuote.toString())
// => 「,負,け,た,こ,と,が,あ,る,」,と,い,う,の,が, ,い,つ,か, ,大,き,な,財,産,に,な,る

indexOf()

マッチした配列の添字を返す

const dragonball = [...Array(7).keys()].map(i => ++i)
dragonball.indexOf(1)
// => 0