JavaScript中資料深拷貝和淺拷貝實作方式集合

1. 原生遞歸實作拷貝 ----- 深拷貝

function deepCopy(data) {
  if (typeof data !== 'object') {
    return data
  } else {
    var tempData = Array.isArray(data) ? [] : {}
    for (var i in data) {
      if (typeof data[i] !== 'object') {
        tempData[i] = data[i]
      } else {
        tempData[i] = deepCopy(data[i])
      }
    }
    return tempData
  }
}

           

1. 利用JSON.parse（） 和JSON.stringify(）快速實作資料拷貝 ----- 深拷貝

let json = {
  a: '1',
  b: {
    c: 'c'
  },
  d: [1, 2, 3]
}

let arr= [
  {a: '1'},
  {b: '2'}
]

let newJson = JSON.parse(JSON.stringify(json)) 
let newArr = JSON.parse(JSON.stringify(arr)) 
           

1. ES6解構 — 淺拷貝

var a = {b: 2}
var c = {...a}
c.b = 3
console.log(a)  // {b: 2}
console.log(c)  // {b: 3}
           

var d = [{e : 4}]
var f = [...d]
f[0].e = 5
console.log(d) // [ { e: 5 } ]
console.log(f) // [ { e: 5 } ]
           

1. Object.assign() — 淺拷貝

var json = {a: 1}
var newJson = Object.assign({}, json, {b : 2})
newJson.a = 3
console.log(json)  // { a: 1 }
           

var json = {
    a: {
        b: 5
    }
}
var newJson = Object.assign({}, json, {d : 2})
newJson.a.b = 3
console.log(json) // { a: { b: 3 } }