読者です 読者をやめる 読者になる 読者になる

【JavaScript】Arrayのmapメソッドは習うより慣れろって感じ

JavaScript で Array の map メソッドが使いこなせるようになると人生が楽しくなってくる。

map の簡単な例

map が何をするのかという説明は後回しで、次の例を見てください。

var array = [1, 2, 3]
var newArray = array.map(function (value) {
  return 2 * value
})

console.log(array) // [ 1, 2, 3]
console.log(newArray) // [ 2, 4, 6]

この例を観察するとわかってくるのは、

  • map は配列から配列を作るメソッドである。
  • もとの配列は変更されない(イミュータブルである)
  • map の引数には関数を渡している。
  • map に渡す関数は、もとの配列の値を受け取って、新たな配列の値を返り値としている。

という感じ。つまり map は、配列の各値になんらかの操作を加えて新たな配列を作ります。

上の例とまったく同じことを ES6(ググる) のアロー関数で書いてみます。

let array = [1, 2, 3]
let newArray = array.map(value => 2 * value)

console.log(newArray) // [ 2, 4, 6 ]

うん、すっきりだ。次の例からはアローで書くことにしましょう。

文字列の配列を map でいじる

次は文字列の例です。配列の各文字列を大文字に変換します。

let array = ['japanese', 'english', 'chinese']
let upper = array.map(language => language.toUpperCase())

console.log(uppere) // [ 'JAPANESE', 'ENGLISH', 'CHINESE' ]

ただの配列からオブジェクトの配列へ

だんだん楽しくなってきましたね。次は、ただの配列からオブジェクトの配列を作ります。

let array = [1, 2, 3]
let objects = array.map(key => ({ key: key }))

console.log(objects) // [ { key: 1 }, { key: 2 }, { key: 3 } ]

ここで、({ key; key}) というふうにオブジェクトに括弧をつけているのは、アロー関数の都合です。中括弧だけではオブジェクトの外側なのか、(引数) => { 処理 } に出てくる中括弧なのか曖昧なのでエラーを吐きます。

ちなみに、もっと短く、 array.map(key => ({key}))と書くこともできます。

オブジェクトの配列からプロパティの配列へ

では次の例。さっきと逆です。オブジェクトの配列があったとして、それぞれのオブジェクトのあるプロパティだけを取り出した配列を作りましょう。

let objects = [
  {key: 1},
  {key: 2},
  {key: 3}
]
let keys = objects.map(obj => obj.key)

console.log(keys) // [ 1, 2, 3 ]

シンプルですね。

map の中でインデックスを使う

map の中でインデックスを使えます。

let array = [5, 5, 5]
array = array.map((value, index) => index)

console.log(array) // [0, 1, 2]

こんな感じで、 map に渡す関数の第二引数が配列のインデックスになります。

これが何の役に立つかというと、例えば 2 つの配列を合体させてオブジェクトの配列を作りたいときに使えます。

let names = ['Sato', 'Ito', 'Kato']
let ages = [20, 24, 31]
let persons = names.map((name, i) =>
({
  name: names[i],
  age: ages[i]
}))

console.log(persons)
// [ { name: 'Sato', age: 20 },
//   { name: 'Ito', age: 24 },
//   { name: 'Kato', age: 31 } ]

あとは、 [1, 2, 3, 4, 5] みたいな配列をワンライナーで書けます。

let array = (new Array(5)).fill(1).map((v, i) => v + i)

console.log(array) // [ 1, 2, 3, 4, 5 ]

最後に

関数型言語から取ってきたメソッド楽しい。