とあるWeb屋の備忘録

とあるWeb屋の備忘録。たまに雑記。

配列操作でよく使うメソッドまとめ04

前回の配列操作でよく使うメソッドまとめ03つづき。
今回も前回までと同じJSONデータを使ってObject.assignの使い方についてまとめます。
JSONデータの中身は配列操作でよく使うメソッドまとめ01のページ下部に載っています。

Object.assignを使えば簡単に対象のオブジェクトのシャローコピーを行うことができます。
ディープコピーをしたい場合はObject.assignではない方法で行うのでそれについても記載します。

各チームメンバーの配列をシャローコピーする

import data from '../EasternConference.json'
let menberArry = data.map(v => v["menbers"])
console.log(Object.assign({}, menberArry))
return Object.assign({}, menberArry)

Object.assignは第一引数に空のオブジェクト、第二引数にターゲットオブジェクトを設定すれば、ターゲットオブジェクトをシャローコピーしたオブジェクトを返してくれます。
第一引数に空オブジェクトではないオブジェクトを指定した場合は、オブジェクト同士がマージされますし、オブジェクト同士に同一のキーがあれば、第二引数側の値が使われます。(ただ上書きしてるだけ) 気を付けるポイントとしては、Object.assignはundefinedやnullを許容するので例外は投げられません。
ただ、実際にこのメソッドを使う場面では元のオブジェクト自体にundefinedやnullが含まれていることは少ないんじゃないかなぁと思います。(元のオブジェクト生成時点で例外処理や置換処理が行われていてほしい)

各チームメンバーの配列をディープコピーする

import data from '../EasternConference.json'
let menberArry = data.map(v => v["menbers"])
const deepCopyObj = JSON.parse(JSON.stringify(menberArry))
console.log(deepCopyObj)
return deepCopyObj

ディープコピーするには組み込みオブジェクトであるJSONオブジェクトを使用して以下の手順を踏めばディープコピーできます。
まずstringifyメソッドでJavaScriptのオブジェクトをJSON形式の文字列に変換します。(シリアライズ化)
つぎにparseメソッドでJavaScriptのオブジェクトに戻します。(デシリアライズ化)

参考資料
Object.assign()