返回

超强干货!六个方法两个拷贝,彻底搞定对象合并问题!

前端

在实际场景下,我们经常需要进行对象合并的操作。然而,有时候原对象的改变会改变合并后的对象,这是一个非常严重的问题。这涉及到了合并对象中的深浅拷贝,递归遍历,让人发蒙。针对这个问题,我做了一个整理,下面将列举六种方法和两个拷贝来帮助您彻底搞定对象合并问题!

一、浅拷贝

浅拷贝只拷贝对象本身,不拷贝对象引用的对象。例如:

const obj1 = {
  name: '张三',
  age: 18
};

const obj2 = Object.assign({}, obj1);

obj1.name = '李四';

console.log(obj2.name); // '张三'

在上面的代码中,obj2 是 obj1 的浅拷贝。当我们修改 obj1.name 时,obj2.name 不会受到影响。这是因为浅拷贝只拷贝对象本身,不拷贝对象引用的对象。

二、深拷贝

深拷贝不仅拷贝对象本身,还拷贝对象引用的对象。例如:

const obj1 = {
  name: '张三',
  age: 18,
  address: {
    city: '北京',
    street: '朝阳区'
  }
};

const obj2 = JSON.parse(JSON.stringify(obj1));

obj1.name = '李四';
obj1.address.city = '上海';

console.log(obj2.name); // '张三'
console.log(obj2.address.city); // '北京'

在上面的代码中,obj2 是 obj1 的深拷贝。当我们修改 obj1.name 和 obj1.address.city 时,obj2.name 和 obj2.address.city 不会受到影响。这是因为深拷贝不仅拷贝对象本身,还拷贝对象引用的对象。

三、递归遍历拷贝

递归遍历拷贝是一种深度拷贝的方式,它可以拷贝任意复杂的对象。例如:

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

  if (Array.isArray(obj)) {
    return obj.map(deepCopy);
  }

  const newObj = {};
  for (const key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }

  return newObj;
}

const obj1 = {
  name: '张三',
  age: 18,
  address: {
    city: '北京',
    street: '朝阳区'
  }
};

const obj2 = deepCopy(obj1);

obj1.name = '李四';
obj1.address.city = '上海';

console.log(obj2.name); // '张三'
console.log(obj2.address.city); // '北京'

在上面的代码中,deepCopy 函数实现了递归遍历拷贝。它可以拷贝任意复杂的对象,包括数组、对象、日期、正则表达式等。

四、Lodash 的 _.cloneDeep() 方法

Lodash 是一个 JavaScript 库,它提供了一些非常有用的工具函数。其中,_.cloneDeep() 方法可以实现深度拷贝。例如:

const obj1 = {
  name: '张三',
  age: 18,
  address: {
    city: '北京',
    street: '朝阳区'
  }
};

const obj2 = _.cloneDeep(obj1);

obj1.name = '李四';
obj1.address.city = '上海';

console.log(obj2.name); // '张三'
console.log(obj2.address.city); // '北京'

在上面的代码中,_.cloneDeep() 方法实现了深度拷贝。它可以拷贝任意复杂的对象,包括数组、对象、日期、正则表达式等。

五、JavaScript 的 structuredClone() 方法

JavaScript 的 structuredClone() 方法可以实现深度拷贝。例如:

const obj1 = {
  name: '张三',
  age: 18,
  address: {
    city: '北京',
    street: '朝阳区'
  }
};

const obj2 = structuredClone(obj1);

obj1.name = '李四';
obj1.address.city = '上海';

console.log(obj2.name); // '张三'
console.log(obj2.address.city); // '北京'

在上面的代码中,structuredClone() 方法实现了深度拷贝。它可以拷贝任意复杂的对象,包括数组、对象、日期、正则表达式等。

六、Python 的 copy.deepcopy() 方法

Python 的 copy 模块提供了一个 deepcopy() 方法,可以实现深度拷贝。例如:

import copy

obj1 = {
  'name': '张三',
  'age': 18,
  'address': {
    'city': '北京',
    'street': '朝阳区'
  }
}

obj2 = copy.deepcopy(obj1)

obj1['name'] = '李四'
obj1['address']['city'] = '上海'

print(obj2['name'])  # '张三'
print(obj2['address']['city'])  # '北京'

在上面的代码中,deepcopy() 方法实现了深度拷贝。它可以拷贝任意复杂的对象,包括列表、元组、字典等。

以上六种方法和两个拷贝可以帮助您彻底搞定对象合并问题。希望对您有所帮助!