オブジェクトを結合したりコピーしたり
reactではオブジェクトからコピーを作ったり、オブジェクト同士を結合して新しいオブジェクトを作りたいことが頻繁にあります。
そこで使えるメソッドとしてObject.assign()というのがあるんですが、これが書きにくい上に見にくい。
たとえば２つのオブジェクトを結合させたい場合、
let obj1 = {key1: 'dog'}
let obj2 = {key2: 'cat'}
let obj3 = Object.assign(obj1, obj2)
console.log(obj3); // {key1: "dog", key2: "cat"}
のように書くわけですが、いちいちObject.assignって書くのが地味にめんどくさい。また、Object.assignと文字が多いとコードが視覚的に見にくくなります。
オブジェクトを結合（マージ）する
というわけで私が日常的に使っている書き方は下のような感じです。
let obj1 = {key1: 'dog'}
let obj2 = {key2: 'cat'}
let obj3 = {...obj1, ...obj2}
console.log(obj3); // {key1: "dog", key2: "cat"}
この … という見慣れない人にはかなり気持ち悪いコードは、ES6の分割代入の演算子です。
分割代入について詳しく勉強したい方はドキュメントを参照↓
分割代入 - JavaScript | MDN
分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。
developer.mozilla.org
…演算子は、オブジェクトのプロパティを全て展開します。
つまり、
let obj3 = {...obj1, ...obj2}
は
let obj3 = { key1: "dog", key2: "cat" }
と書いているのと同じ意味になります。
オブジェクトが複数のプロパティを持っている場合は、それら全てが展開されます。
let obj1 = {key1: 'dog'}
let obj2 = {key2: 'cat', key3: 'bird'}
let obj3 = {...obj1, ...obj2}
console.log(obj3); // {key1: "dog", key2: "cat", key3: "bird"}
オブジェクトのコピーを作る
また、オブジェクトのコピーを作りたい場合にはObject.assingでは
let copyObj = Object.assign( {} , obj )
と書きますが、分割代入を使えば
let copyObj = { ...obj }
と簡潔に書くことができます。
オブジェクトのプロパティの値を書き換える
オブジェクトのプロパティ値を書き換えたい場合は
let obj = {key1: 'dog', key2: 'cat'}
let newObj = {
...obj,
key1: 'bird'
}
console.log(newObj); // {key1: "bird", key2: "cat"}
のように、…objの後に続いて書き換えたいプロパティと値を指定します。
この場合、指定したプロパティがすでに存在していれば上書きされ、もしプロパティが存在しなければ新しく追加されるという動きになります。
オブジェクトに新しいプロパティを追加する
つまり、新しいプロパティを追加した新しいオブジェクトを作りたい場合は、下のようになります。
let obj = {key1: 'dog', key2: 'cat'}
let newObj = {
...obj,
key3: 'bird'
}
console.log(newObj); // {key1: "dog", key2: "cat", key3: "bird"}
このように、分割代入の…演算子を使えばあらゆるオブジェクトの操作が可能です。そして慣れればコードがかなり簡潔に、見やすくなります。
コメント