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