深刻理解js 深拷贝和浅拷贝


对于原始数据类型,并没有深浅拷贝的区别,深浅拷贝都是对于引用数据类型(如对象、数组等而言。

深拷贝和浅拷贝有什么区别?

浅拷贝:只复制一层对象,当对象的属性是引用类型时,实质复制的是其引用,当引用值发生改变时,也会跟着改变

深拷贝:深拷贝是另外申请了一块内存,内容和原来一样,更改原对象,拷贝对象不会发生改变

注意:如果我们要赋值对象的所有属性都是基本数据类型(如字符串、数字、布尔值等)可以用浅拷贝。

比如:

// 原始对象
const originalObj = {
  name: 'John',
  age: 30,
  isActive: true
};

// 浅拷贝
const shallowCopy = Object.assign({}, originalObj);

// 修改浅拷贝的属性
shallowCopy.age = 31;

console.log(originalObj.age); // 输出: 30
console.log(shallowCopy.age); // 输出: 31

在上述示例中,通过浅拷贝创建的 shallowCopy 对象与 originalObj 具有相同的属性值,但它们是独立的。修改 shallowCopy.age 的值不会影响到 originalObj.age 的值,因为它们是两个独立的属性。

因此,当对象的属性都是基本数据类型时,可以使用浅拷贝来创建一个新对象,以便复制对象的属性值。在这种情况下,浅拷贝会将对象的属性值复制到新对象中,而不是复制引用。这样新对象和原对象的属性值是独立的,修改新对象的属性值不会影响到原对象。


怎么实现浅拷贝?

1. Object.assign()

适用于对象,可以把 n 个源对象拷贝到目标对象中去(拷贝的是可枚举属性)

let start = {
  name: '古力娜扎',
  age: '22',
  friend: {
    name: '邓超'
  }}let returnedTarget = Object.assign({}, start)


2. 使用拓展运算符...  

let start = { name: '刘亦菲' }
let newStart = { ...start }
newStart.name = '迪丽热巴'
console.log(start.name) // 刘亦菲


3. Array.slice()

适用于数组

const originalArray = [1, 2, 3, 4, 5];
const copiedArray = originalArray.slice();


那深拷贝有怎么实现呢?

1. JSON.parse(JSON.stringify(obj))

JSON 序列化和反序列化

function deepCopy(obj) {
  return JSON.parse(JSON.stringify(obj));
}


2. 递归实现深拷贝

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  let newObj = Array.isArray(obj) ? [] : {};

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepCopy(obj[key]);
    }
  }

  return newObj;
}



声明:BenBonBen博客|版权所有,违者必究|如未注明,均为原创

转载:转载请注明原文链接 - 深刻理解js 深拷贝和浅拷贝


过去太迟,未来太远,当下最好