JavaScriptで配列操作まとめ

JavaScript

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

find()

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

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

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: "テスト先輩くん"}]

Array.from()

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

let proverb = "源濁るものは、流れ清からず"
console.log(Array.from(proverb))
// ["源", "濁", "る", "も", "の", "は", "、", "流", "れ", "清", "か", "ら", "ず"]

Array.prototype.join()

let devidedProverb = ["源", "濁", "る", "も", "の", "は", "、", "流", "れ", "清", "か", "ら", "ず"]
console.log(devidedProverb.join(''))
// 源濁るものは、流れ清からず

indexOf()

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

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

Array.prototype.reverse()

配列の要素を In-placeアルゴリズムで反転される。

const philosophers = ['孫氏', '墨子', '荀子', '荘子'];
const reversed = philosophers.reverse();
console.log(reversed);
// ["荘子", "荀子", "墨子", "孫氏"]
console.log(philosophers)
// ["荘子", "荀子", "墨子", "孫氏"]
// ※破壊的メソッド

参考