3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[JavaScript]オブジェクトのプロパティをコピーする2つの方法(Object.assign, スプレッド構文(...))

Last updated at Posted at 2019-08-05

環境

> node --version
v10.15.3

古いバージョンでは動かないので、よろしくお願いします。(特にスプレッド構文の方)

やってみる

Object.assign

> Object.assign({a:1, b:2}, {c:3})
{ a: 1, b: 2, c: 3 }

スプレッド構文

> {...{a:1, b:2}, ...{c:3}}
{ a: 1, b: 2, c: 3 }

オブジェクトのコピーにも使える

Object.assign

> Object.assign({}, {a:1, b:2})
{ a: 1, b: 2 }

スプレッド構文

> {...{a:1, b:2}}
{ a: 1, b: 2 }

でも、シャローコピー(浅いコピー)だから気をつける

> obj = {a:{b:1}}
{ a: { b: 1 } }

> obj_copied = Object.assign({}, obj)
{ a: { b: 1 } }

> obj.a.b = 2    // コピー元を変えると
2

> obj_copied    // コピー先も変わる
{ a: { b: 2 } }

この動作は、スプレッド構文を使ったコピーでも同様。

ディープコピー(深いコピー)をしたいとき

lodash(外部ライブラリ)を使う。

$ npm install lodash
> const _ = require('lodash')
undefined

> obj = {a:{b:1}}
{ a: { b: 1 } }

> obj_copied = _.cloneDeep(obj)
{ a: { b: 1 } }

> obj.a.b = 2    // コピー元を変えても
2

> obj_copied    // コピー先は変わらない
{ a: { b: 1 } }

参考資料

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?