使用vanilla javascript复制JS对象_使用vanilla javascript随机移动svg对象_如何使用vanilla javascript进行拖放？ - 腾讯云开发者社区

使用vanilla javascript复制JS对象

基础概念

在JavaScript中，对象是引用类型，这意味着当你将一个对象赋值给另一个变量时，实际上是将对象的引用（内存地址）复制给了新变量。因此，如果你直接复制一个对象，修改其中一个变量的属性，另一个变量的属性也会被修改。这就是所谓的“浅拷贝”。

类型

浅拷贝：
- 使用Object.assign()方法。
- 使用扩展运算符（...）。

深拷贝：
- 使用JSON.parse(JSON.stringify(obj))（有局限性，不能处理函数、循环引用等）。
- 使用递归函数实现深拷贝。
- 使用第三方库，如Lodash的_.cloneDeep()方法。

应用场景

浅拷贝：当你需要复制一个对象，并且只修改第一层属性时。
深拷贝：当你需要创建一个完全独立的对象副本，或者对象内部包含嵌套对象时。

示例代码

浅拷贝

// 使用Object.assign()
const original = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, original);
shallowCopy.a = 3;
shallowCopy.b.c = 4;
console.log(original); // { a: 1, b: { c: 4 } }
console.log(shallowCopy); // { a: 3, b: { c: 4 } }

// 使用扩展运算符
const shallowCopy2 = { ...original };
shallowCopy2.a = 5;
shallowCopy2.b.c = 6;
console.log(original); // { a: 1, b: { c: 6 } }
console.log(shallowCopy2); // { a: 5, b: { c: 6 } }

深拷贝

// 使用JSON.parse(JSON.stringify(obj))
const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.a = 7;
deepCopy.b.c = 8;
console.log(original); // { a: 1, b: { c: 2 } }
console.log(deepCopy); // { a: 7, b: { c: 8 } }

// 使用递归函数实现深拷贝
function deepClone(obj) {
  if (typeof obj !== 'object' || obj === null) return obj;
  const clone = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key]);
    }
  }
  return clone;
}

const deepCopy2 = deepClone(original);
deepCopy2.a = 9;
deepCopy2.b.c = 10;
console.log(original); // { a: 1, b: { c: 2 } }
console.log(deepCopy2); // { a: 9, b: { c: 10 } }

遇到的问题及解决方法

问题：使用`JSON.parse(JSON.stringify(obj))`进行深拷贝时，无法处理函数、循环引用等。

原因：JSON.stringify()方法在序列化对象时会忽略函数和undefined，并且会抛出循环引用的错误。

解决方法：

使用递归函数实现深拷贝，可以处理函数和循环引用。
使用第三方库，如Lodash的_.cloneDeep()方法。

// 使用Lodash的_.cloneDeep()方法
const _ = require('lodash');

const original = { a: 1, b: { c: 2 }, d: function() {} };
const deepCopy3 = _.cloneDeep(original);
deepCopy3.a = 11;
deepCopy3.b.c = 12;
console.log(original); // { a: 1, b: { c: 2 }, d: [Function: d] }
console.log(deepCopy3); // { a: 11, b: { c: 12 }, d: [Function: d] }