【JS】Object Deep Copy 推薦用法比較

Object 因為 Call by sharing 的特性，無法直接用 = 複製 Object，今天來講解 Object 的幾種複製方式。

懶人包

• 正常Object(單層)： ...
• Nested Object(多層)：Lodash cloneDeep

何謂shallow copy(淺複製)

因Javascript特性對於Object會是call by reference，直接用 = 會是shallow copy

a = { b:1, c:2 }
copy = a
copy.b = 100

// shallow copy
console.log(a.b) // 100

copy用法差異

Method	Pros	Cons
=	直接明瞭，預設用法	shallow copy(淺複製)
JSON.stringify() and JSON.parse()	deep copy nested objects(多層Object)	不能複製物件型別(Function, Date)
Object.assign()	deep copy 第一層	不能deep copy nested objects
… spread operator	同上，語法簡單，複製單層object首選	不能deep copy nested objects
Lodash cloneDeep	複製nested objects包含functions	外部package依賴
structuredClone()	deep copy nested objects(多層Object)	僅支持可結構化的變數，遇到 Error 和 Function 會拋出 DOMException

=

let john = {name: 'John', age: 28}
let ken = john
ken.name = 'ken'

// ❌ Bad: can't deep copy
console.log(john.name) // ken

JSON.stringify() and JSON.parse()

let john = {
  name: 'John',
  age: 28,
  job: () => 'Web Developer',
  address: {
    city: 'taipei'
  }
}
let ken = JSON.parse(JSON.stringify(john))
ken.name = 'ken'
ken.address.city = 'new taipei'

// ✅ Good: deep copy
console.log(john.name) // john
console.log(john.address.city) // taipei

// ❌ Bad: function missing
console.log(ken.job) // undefined

Object.assign()

let john = {
  name: 'John',
  age: 28,
  job: () => 'Web Developer',
  address: {
    city: 'taipei'
  }
}
let ken = Object.assign({}, john)
ken.name = 'ken'
ken.address.city = 'new taipei'

// ✅ Good
console.log(john.name) // john
console.log(ken.job()) // Web Developer

// ❌ Bad: can't deep copy nested objects
console.log(john.address.city) // new taipei

... spread operator

let john = {
  name: 'John',
  age: 28,
  job: () => 'Web Developer',
  address: {
    city: 'taipei'
  }
}
let ken = {...john}
ken.name = 'ken'
ken.address.city = 'new taipei'

// ✅ Good: deep copy
console.log(john.name) // john
console.log(ken.job()) // WebDeveloper

// ❌ Bad: not deep copy nested object
console.log(john.address.city) // new taipei

Lodash cloneDeep

let john = {
  name: 'John',
  age: 28,
  job: () => 'Web Developer',
  address: {
    city: 'taipei'
  }
}
let ken = _.cloneDeep(john)
ken.name = 'ken'
ken.address.city = 'new taipei'

// ✅ Good: deep copy
console.log(john.name) // john
console.log(john.address.city) // taipei
console.log(ken.job()) // WebDeveloper

structuredClone()

let john = {
  name: 'John',
  age: 28,
  birthday: new Date('2022-08-08'),
  address: {
    city: 'taipei'
  }
}
let ken = structuredClone(john)
ken.name = 'ken'
ken.address.city = 'new taipei'
ken.birthday.setDate('30')

// ✅ Good: deep copy
console.log(john.name) // john
console.log(john.address.city) // taipei
console.log(john.birthday.toDateString()) // Mon Aug 08 2022
console.log(ken.name) // ken
console.log(ken.address.city) // new taipei
console.log(ken.birthday.toDateString()) // Tue Aug 30 2022

// ❌ Bad: not support Function
let amy = {
  job: () => 'designer'
}
structuredClone(amy) // Throw DOMException

參考

• JS 中的淺拷貝 (Shallow copy) 與深拷貝 (Deep copy) 原理與實作
• The Best Way to Deep Copy an Object in JavaScript
• Clone an Object in JavaScript: 4 Best Ways [Updated 2022]