首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用vanilla javascript复制JS对象

基础概念

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

相关优势

  • 深拷贝:能够创建一个完全独立的对象副本,修改副本不会影响原对象。
  • 浅拷贝:在某些情况下,如果你只需要复制对象的第一层属性,浅拷贝会更高效。

类型

  1. 浅拷贝
    • 使用Object.assign()方法。
    • 使用扩展运算符(...)。
  • 深拷贝
    • 使用JSON.parse(JSON.stringify(obj))(有局限性,不能处理函数、循环引用等)。
    • 使用递归函数实现深拷贝。
    • 使用第三方库,如Lodash的_.cloneDeep()方法。

应用场景

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

示例代码

浅拷贝

代码语言:txt
复制
// 使用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 } }

深拷贝

代码语言:txt
复制
// 使用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()方法。
代码语言:txt
复制
// 使用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] }

参考链接

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 领券