JavaScript 深拷貝與淺拷貝

基本數據類型與引用數據類型

• 基本數據類型：String、Number、Boolean、Null、Undefined、Symbol。這些類型在內存中分別佔有固定大小的空間，他們的值保存在棧空間，經過按值訪問、拷貝和比較。
• 引用數據類型：Array、Object。引用類型的值是對象，保存在堆內存中，而棧內存存儲的是對象的變量標識符以及對象在堆內存中的存儲地址

對於引用類型變量，棧內存中存放的是該對象的訪問地址，在堆內存中爲該值分配空間，因爲這種值的大小不固定，所以不能把他們保存到棧內存中；但內存地址大小是固定的，所以能夠將堆內存地址保存到棧內存中。這樣，當查詢引用類型的變量時，就先從棧中讀取堆內存地址，而後再根據該地址取出對應的值。

不一樣類型的賦值方式

基本類型：從一個變量向另一個新變量複製基本類型的值，會建立這個值的一個副本，並將該副本複製給新變量，不會影響到原數據

引用類型：從一個變量向另外一個新變量複製引用類型的值，其實複製的是指針，最終兩個變量最終都指向同一個對象，會影響到原數據

深拷貝&淺拷貝

• 淺拷貝：僅僅是複製了引用，修改基本數據類型不會影響原有數據的基本數據類型，修改引用數據類型會影響原有的數據類型
• 深拷貝：在堆中從新分配內存，不一樣的地址，相同的值，互不影響

淺拷貝實現

封裝方法實現

let arr1 = [1, {'name': 'a'}]

let shallowClone = (arr) => {
  let newArr = []
  for (let prop in arr) {
    if (arr.hasOwnProperty(prop)) {
      newArr[prop] = arr[prop]
    }
  }

  return newArr
}

let arr2 = shallowClone(arr1)
arr2[0] = 2
arr2[1].name = 'b'

console.log(JSON.stringify({arr1})) // {"arr1":[1,{"name":"b"}]}
console.log(JSON.stringify({arr2})) // {"arr2":[2,{"name":"b"}]}
// 基本數據類型未受到影響、引用數據類型仍是受到影響了
複製代碼

Array.prototype.concat()

let arr1 = [1, {'name': 'a'}]
let arr2 = arr1.concat()
arr2[0] = 2
arr2[1].name = 'b'

console.log(JSON.stringify({arr1})) // {"arr1":[1,{"name":"b"}]}
console.log(JSON.stringify({arr2})) // {"arr1":[2,{"name":"b"}]}
複製代碼

Array.prototype.slice()

let arr1 = [1, {'name': 'a'}]
let arr2 = arr1.slice()
arr2[0] = 2
arr2[1].name = 'b'

console.log(JSON.stringify({arr1})) // {"arr1":[1,{"name":"b"}]}
console.log(JSON.stringify({arr2})) // {"arr2":[2,{"name":"b"}]}
複製代碼

Object.assign()

let obj1 = {
  'name': 'k',
  'msg': {
    'age': '10',
    'sex': '男'
  },
}

let obj2 = Object.assign({}, obj1)
obj2.name = 'kk'
obj2.msg.age = '20'

console.log(JSON.stringify({obj1})) // {"obj1":{"name":"k","msg":{"age":"20","sex":"男"}}}
console.log(JSON.stringify({obj2})) // {"obj2":{"name":"kk","msg":{"age":"20","sex":"男"}}}
複製代碼

展開運算符

let arr1 = [1, 2, 3, {'name': 'kk'}]
let arr2 = [...arr1]
arr2.push(4); 
arr2[3].name = 'kkk'

console.log(JSON.stringify({arr1})) // {"arr1":[1,2,3,{"name":"kkk"}]}
console.log(JSON.stringify({arr2})) // {"arr2":[1,2,3,{"name":"kkk"},4]}
複製代碼

深拷貝實現

let arr1 = [1, {'name': 'a'}]

// 判斷數據類型
let checkType = (data) => {
  return Object.prototype.toString.call(data).slice(8, -1)
}

let deepClone = (data) => {
  let newData, targetType = checkType(data)
  if (targetType === 'Object') {
    newData = {}
  }
  else if (targetType === 'Array') {
    newData = []
  }
  else {
    return data
  }

  // 遍歷
  for (let i in data) {
    let val = data[i]
    if (checkType(val) === 'Object' || checkType(val) === 'Array') {
      newData[i] = deepClone(val)
    } else {
      newData[i] = val
    }
  }

  return newData
}

let arr2 = deepClone(arr1)
arr2[0] = 2
arr2[1].name = 'b'

console.log(JSON.stringify({arr1})) // {"arr1":[1,{"name":"a"}]}
console.log(JSON.stringify({arr2})) // {"arr2":[2,{"name":"b"}]}
複製代碼

JSON.parse(JSON.stringify())

該方法存在侷限性

• 沒法存放函數或undefined，有丟失風險
• 沒法存放NaN，會變成null