JavaScript的深拷贝和浅拷贝

浅拷贝:

  1. 浅拷贝是指复制对象或数组的第一层结构,而不会复制其内部的引用类型。
  2. 在浅拷贝中,新对象或数组中的引用类型元素与原始对象或数组中的引用类型元素仍然指向同一块 内存地址,因此修改其中一个对象或数组的引用类型元素会影响到另一个对象或数组。
  3. 常见的浅拷贝方法包括使用对象的扩展运算符(…)、Object.assign()等。

1.使用扩展运算符进行浅拷贝:

// 原始数组
const originalArray = [1, 2, { name: 'John' }];

// 浅拷贝数组
const shallowCopyArray = [...originalArray];

// 修改浅拷贝数组中的引用类型元素
shallowCopyArray[2].name = 'Jane';

// 输出原始数组和浅拷贝数组
console.log('Original Array:', originalArray);
console.log('Shallow Copy Array:', shallowCopyArray);

输出:
Original Array: [ 1, 2, { name: 'Jane' } ]
Shallow Copy Array: [ 1, 2, { name: 'Jane' } ]

2.使用Object.assign()方法进行浅拷贝:

// 原始对象
const originalObject = { name: 'John', address: { city: 'New York', country: 'USA' } };

// 浅拷贝对象
const shallowCopyObject = Object.assign({}, originalObject);

// 修改浅拷贝对象中的引用类型属性
shallowCopyObject.address.city = 'Los Angeles';

// 输出原始对象和浅拷贝对象
console.log('Original Object:', originalObject);
console.log('Shallow Copy Object:', shallowCopyObject);

输出:
Original Object: { name: 'John', address: { city: 'Los Angeles', country: 'USA' } }
Shallow Copy Object: { name: 'John', address: { city: 'Los Angeles', country: 'USA' } }

深拷贝:

  1. 深拷贝是指复制对象或数组的所有层级结构,包括其内部的引用类型,生成一个完全独立的副本。
  2. 在深拷贝中,新对象或数组中的引用类型元素与原始对象或数组中的引用类型元素指向不同的内存地址,因此修改其中一个对象或数组的引用类型元素不会影响到另一个对象或数组。
  3. 实现深拷贝的方法通常是递归遍历对象或数组,并复制每个属性或元素的值。

1.使用递归实现深拷贝函数:

function deepCopy(obj) {
  // 判断是否为对象或数组
  if (typeof obj !== 'object' || obj === null) {
    return obj; // 基本类型直接返回
  }

  // 创建一个新的空对象或数组
  const newObj = Array.isArray(obj) ? [] : {};

  // 递归地复制对象或数组的每个属性或元素
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepCopy(obj[key]);
    }
  }

  return newObj;
}

// 示例使用:

// 原始对象
const originalObject = {
  name: 'John',
  address: {
    city: 'New York',
    country: 'USA'
  }
};

// 深拷贝对象
const deepCopyObject = deepCopy(originalObject);

// 修改深拷贝对象中的引用类型属性
deepCopyObject.address.city = 'Los Angeles';

// 输出原始对象和深拷贝对象
console.log('Original Object:', originalObject);
console.log('Deep Copy Object:', deepCopyObject);

输出:
Original Object: { name: 'John', address: { city: 'New York', country: 'USA' } }
Deep Copy Object: { name: 'John', address: { city: 'Los Angeles', country: 'USA' } }

2.使用JSON序列化和反序列化:

function deepCopy(obj) {
  // 利用JSON序列化和反序列化实现深拷贝
  return JSON.parse(JSON.stringify(obj));
}

// 示例使用:

// 原始对象
const originalObject = {
  name: 'John',
  address: {
    city: 'New York',
    country: 'USA'
  }
};

// 深拷贝对象
const deepCopyObject = deepCopy(originalObject);

// 修改深拷贝对象中的引用类型属性
deepCopyObject.address.city = 'Los Angeles';

// 输出原始对象和深拷贝对象
console.log('Original Object:', originalObject);
console.log('Deep Copy Object:', deepCopyObject);

输出:
Original Object: { name: 'John', address: { city: 'New York', country: 'USA' } }
Deep Copy Object: { name: 'John', address: { city: 'Los Angeles', country: 'USA' } }
  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值