Life is Like a Boat

忘備録や経済、投資、プログラミングに関するメモやtipsなど

Javascriptで配列をオブジェクトの配列にしたい

const xs = ['banana', 3, 'apple', 4, 'orange', 5]

という配列があったとします。

これを

[ {item: 'banana', amount:3}, {item:'apple', amount:4}, {item:'orange', amount: 5} ]

のオブジェクトの配列に変換したいです。

やりかたは沢山あると思うのですが、 先に

['banana', 3, 'apple', 4, 'orange', 5]

[ [ 'banana', 3],  ['apple', 4], ['orange', 5] ]

の配列の配列にしてあげる方法をとります。

const xs = ['banana', 3, 'apple', 4, 'orange', 5]; 
xs.reduce((a, c, idx) => {
    return idx % 2 === 0 ? a.concat([xs.slice(idx, idx + 2)]) : a;
}, [])

aがaccumulatorを意味します。 returnの部分は三項演算子で、condition ? true : false を意味します。 idxを2で割って0の場合(idxが偶数)、accumulatorに配列xsのidx番目からidx+2番目を配列にして結合する。2で割って0でない(奇数)なら、accumulatorを返す、です。

ここまで実行するとスクショのようになります。 f:id:nerimplo:20181129171203p:plain

次に、この配列の中の配列をオブジェクトにします。 ['banana', 3] => {item:'banana', amount:3} です。

これは配列の何番目に何が入っているかわかっているので

.map((e) => {
    const o = new Object(); o['item']=e[0]; o['amount']=e[1]; return o;   })

でいいと思います。

Object.assignで

.map((e) => {
    return Object.assign({'item':e[0],'amount':e[1]}, {}) })

するのもありだと思います。

f:id:nerimplo:20181129171241p:plain

developer.mozilla.org

最終的なソースコードはこのようになります。

const xs = ['banana', 3, 'apple', 4, 'orange', 5]; 
xs.reduce((a, c, idx) => {
    return idx % 2 === 0 ? a.concat([xs.slice(idx, idx + 2)]) : a;
}, []).map((e) => {
    return Object.assign({'item': e[0], 'amount': e[1]}, {})
})

こういうのをスニペットにしてGistに残しておくと、似たようなケースがあった時にすぐ思い出せて「あれー、うーん」と考える時間の削減になりますw。