浅拷贝和深拷贝

28. 浅拷贝和深拷贝

在 JavaScript 中，拷贝一个对象是一项常见的操作，常用的拷贝方式包括浅拷贝和深拷贝。

1. 浅拷贝

浅拷贝（shallow copy）是指只复制对象的第一层属性，而不会递归地复制其子对象(即其引用类型属性)，新的对象与原始对象共享同一个子对象。如果修改了子对象，则新对象和原始对象都会受到影响。浅拷贝有以下几种方式：

1. 展开运算符 (…)

扩展运算符可以用于展开数组或对象，也可以用于浅拷贝对象。

const obj = { 
  name: "Jack",
  age: 18,
  friends: ["Jarry", "Peter"]
}
const objCopy = { ...obj }
console.log(objCopy);
objCopy.friends.push("Jace")
console.log(obj.friends);//['Jarry', 'Peter', 'Jace']

2. Object.assign(target, …sources)

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象中。它会返回目标对象。

const obj = { 
  name: "Jack",
  age: 18,
  friends: ["Jarry", "Peter"]
}
const objCopy = Object.assign({}, obj)
console.log(objCopy);
objCopy.friends.push("Jace")
console.log(obj.friends);//['Jarry', 'Peter', 'Jace']

3. Array.prototype.slice()

slice() 方法返回一个新的数组对象，这个对象是一个浅拷贝数组的一部分到一个新的数组对象，原始数组不会被改变。

const arr = [1, 2, 3, [4, 5]]
const arrCopy = arr.slice()
console.log(arrCopy);//[1, 2, 3, Array(2)]
arrCopy[3].push(6)
console.log(arr);//[1, 2, 3, Array(3)]

2. 深拷贝

深拷贝（deep copy）是指完全复制一个对象，包括其所有子对象，新的对象与原始对象互不干扰，修改一个对象的属性不会影响另一个对象。深拷贝有以下几种方式：

1. JSON.parse(JSON.stringify(object))

使用 JSON.stringify() 方法将对象转为 JSON 字符串，然后使用 JSON.parse() 方法将 JSON 字符串转回对象，这样可以实现深拷贝。不过需要注意的是，这种方式有一些限制，例如无法处理函数、undefined 等数据类型。

const obj = { 
  name: "Jack",
  age: 18,
  friends: ["Jarry", "Peter"],
  un: undefined,
  fn: function(){}
}
const objCopy = JSON.parse(JSON.stringify(obj))
console.log(objCopy);//{name: 'Jack', age: 18, friends: Array(2)}
objCopy.friends.push("Bob")
console.log(obj.friends);//['Jarry', 'Peter']
console.log(objCopy.friends);//['Jarry', 'Peter', 'Bob']

2. 递归拷贝

递归拷贝是指在拷贝对象时，对对象的每个属性递归地进行拷贝。可以使用 for…in 循环遍历对象的属性，并对每个属性进行递归拷贝。

const obj = { 
  name: "Jack",
  age: 18,
  friends: ["Jarry", "Peter"],
  set: set,
  un: undefined,
  fn: function(){}
}
function deepCopy(obj) {
  if(typeof obj !== "object" || obj === null) return obj;
  const newObj = Array.isArray(obj) ? [] : {};
  for(const key in obj) {
    newObj[key] = deepCopy(obj[key])
  }
  return newObj
}
const objCopy = deepCopy(obj)
console.log(objCopy);//{name: 'Jack', age: 18, friends: Array(2), un: undefined, fn: ƒ}

在使用递归拷贝时，也需要注意避免循环引用的情况。

• 循环引用问题：

// 循环引用
function deepCopy(obj) {
  if(typeof obj !== "object" || obj === null) return obj;
  const newObj = Array.isArray(obj) ? [] : {};
  for(const key in obj) {
    newObj[key] = deepCopy(obj[key])
  }
  return newObj
}
obj.info = obj;//循环引用
const objCopy = deepCopy(obj)//报错  Uncaught RangeError: Maximum call stack size exceeded