JSでObjectを代入したり、forEachする方法

概要

業務の中で受け取ったフォームのオブジェクトをパラメーターに入れたいときに代入が必要だったり、そのオブジェクトのvalueを抜き出したいというケースに遭遇するのでちょっと調べた。

Object.assign

Object.assignはObjectAとObjectBをマージするのに使う。

Object.assign(fruits1, fruits2)

大事なのは第二引数のObjectを第一引数のオブジェクトにマージするため同じ要素が含まれている場合は第二引数のObjectが優先されるという点。

実際にどのような動きをするのか見ていただきたい

const fruits1 = {
  a: apple,
  b: banana
}

const fruits2 = {
  b: melon,
  c: peach
}

newFruits = Object.assign(fruits1, fruits2)

console.log(fruits1) // {a: 'apple', b: 'melon', c: 'peach'}
console.log(fruits2) // {b: 'melon', c: 'peach'}
console.log(newFruits) // {a: 'apple', b: 'melon', c: 'peach'}

fruits1はfruits2がマージされるため、bの変更とcの追加が見られるが、fruits2には変化が見られないことにも注目していただきたい。

ObjectのforEach

これはどのような状況かというと、

{a: 'apple', b: 'melon', c: 'peach'}

上記で生成したこのObjectから各value(apple, melon, peach)を出力したい場合など。

実際に取り出してみる。

const newFruits = {'a': 'apple', 'b': 'melon', 'c': 'peach'}
rtn = []
Object.keys(newFruits).forEach((key){
  rtn.push(newFruits[key])
})
console.log(rtn);

流れは下記のようになる

1. Object.keys(newFruits)でnewFruitsオブジェクトのkey[a,b,c]を取り出す
2. newFruitsのkeyがaのvalue(apple)、bのvalue(melon)、cのvalue(peach)という順番でrtnという空の配列に格納する
3. [apple,melon,peach]とコンソールに出力される

※このようにしてもできるが、実はObject.valueもしくはObject.entriesを使えば初めからvalueを配列にいれることが可能(@juner さん、ありがとうございます！)

参考