JS如何实现浅拷贝-js教程-PHP中文网

JS如何实现浅拷贝

畫卷琴夢

发布： 2025-08-14 19:02:01

原创

653人浏览过

js浅拷贝是指只复制对象或数组的第一层属性或元素，若属性或元素为对象或数组，则复制其引用而非新对象。1. 使用object.assign()可将源对象属性复制到新对象，但嵌套对象仍共享引用；2. 使用展开运算符(...)实现对象浅拷贝，效果与object.assign()相同；3. 手动遍历对象属性并复制，显式实现浅拷贝逻辑；4. 数组可通过slice()或[...array]实现浅拷贝，嵌套对象仍为引用；5. 浅拷贝与深拷贝的区别在于深拷贝递归复制所有层级，而浅拷贝仅复制第一层；6. 浅拷贝适用于仅需第一层复制的场景，性能优于深拷贝；7. 其局限性在于修改嵌套结构会影响原始对象；8. 避免问题的方法包括根据需求选择深拷贝、使用不可变数据结构或引入immutable.js等库。因此，在需要独立操作嵌套数据时应选用深拷贝以确保原始数据不受影响。

JS如何实现浅拷贝

JS浅拷贝，简单来说，就是复制一个对象或数组，但只复制了它的第一层，如果对象或数组里还有对象或数组，那复制的只是引用，而不是真正的新对象。

解决方案

浅拷贝的核心在于创建一个新的对象或数组，然后将原始对象或数组的属性或元素复制到新的对象或数组中。但如果这些属性或元素本身是对象或数组，那么只复制它们的引用。

以下是几种实现浅拷贝的方法：

使用

Object.assign()

登录后复制

Object.assign()

登录后复制

可以将一个或多个源对象的属性复制到目标对象。如果目标对象中已经存在同名属性，则会被源对象的属性覆盖。

const originalObject = {
  name: 'Alice',
  age: 30,
  address: {
    city: 'New York'
  }
};

const shallowCopy = Object.assign({}, originalObject);

shallowCopy.name = 'Bob';
shallowCopy.address.city = 'Los Angeles'; // 注意这里会影响 originalObject

console.log(originalObject.name); // Alice
console.log(shallowCopy.name); // Bob
console.log(originalObject.address.city); // Los Angeles
console.log(shallowCopy.address.city); // Los Angeles

登录后复制

可以看到，修改

shallowCopy.name

登录后复制

不会影响

originalObject.name

登录后复制

，但修改

shallowCopy.address.city

登录后复制

会影响

originalObject.address.city

登录后复制

，因为

address

登录后复制

属性复制的是引用。

使用展开运算符 (

...

登录后复制

)

展开运算符也可以用于浅拷贝对象。

const originalObject = {
  name: 'Alice',
  age: 30,
  address: {
    city: 'New York'
  }
};

const shallowCopy = { ...originalObject };

shallowCopy.name = 'Bob';
shallowCopy.address.city = 'Los Angeles'; // 注意这里会影响 originalObject

console.log(originalObject.name); // Alice
console.log(shallowCopy.name); // Bob
console.log(originalObject.address.city); // Los Angeles
console.log(shallowCopy.address.city); // Los Angeles

登录后复制

效果与

Object.assign()

登录后复制

相同。

手动遍历复制

也可以手动遍历原始对象的属性，然后复制到新的对象中。

const originalObject = {
  name: 'Alice',
  age: 30,
  address: {
    city: 'New York'
  }
};

function shallowCopy(obj) {
  const newObj = {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = obj[key];
    }
  }
  return newObj;
}

const shallowCopyObject = shallowCopy(originalObject);

shallowCopyObject.name = 'Bob';
shallowCopyObject.address.city = 'Los Angeles'; // 注意这里会影响 originalObject

console.log(originalObject.name); // Alice
console.log(shallowCopyObject.name); // Bob
console.log(originalObject.address.city); // Los Angeles
console.log(shallowCopyObject.address.city); // Los Angeles

登录后复制

这段代码更显式地展示了浅拷贝的过程。

MagicStudio

图片处理必备效率神器！为你的图片提供神奇魔法

102

查看详情

数组的浅拷贝

对于数组，可以使用

slice()

登录后复制

方法或展开运算符进行浅拷贝。

const originalArray = [1, 2, { value: 3 }];
const shallowCopyArray = originalArray.slice(); // 或使用 [...originalArray]

shallowCopyArray[0] = 4;
shallowCopyArray[2].value = 5; // 注意这里会影响 originalArray

console.log(originalArray[0]); // 1
console.log(shallowCopyArray[0]); // 4
console.log(originalArray[2].value); // 5
console.log(shallowCopyArray[2].value); // 5

登录后复制