js浅拷贝是指只复制对象或数组的第一层属性或元素，若属性或元素为对象或数组，则复制其引用而非新对象。1. 使用object.assign()可将源对象属性复制到新对象，但嵌套对象仍共享引用；2. 使用展开运算符(…)实现对象浅拷贝，效果与object.assign()相同；3. 手动遍历对象属性并复制，显式实现浅拷贝逻辑；4. 数组可通过slice()或[…array]实现浅拷贝，嵌套对象仍为引用；5. 浅拷贝与深拷贝的区别在于深拷贝递归复制所有层级，而浅拷贝仅复制第一层；6. 浅拷贝适用于仅需第一层复制的场景，性能优于深拷贝；7. 其局限性在于修改嵌套结构会影响原始对象；8. 避免问题的方法包括根据需求选择深拷贝、使用不可变数据结构或引入immutable.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'; // 注意这里会影响 originalObjectconsole.log(originalObject.name); // Aliceconsole.log(shallowCopy.name); // Bobconsole.log(originalObject.address.city); // Los Angelesconsole.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'; // 注意这里会影响 originalObjectconsole.log(originalObject.name); // Aliceconsole.log(shallowCopy.name); // Bobconsole.log(originalObject.address.city); // Los Angelesconsole.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'; // 注意这里会影响 originalObjectconsole.log(originalObject.name); // Aliceconsole.log(shallowCopyObject.name); // Bobconsole.log(originalObject.address.city); // Los Angelesconsole.log(shallowCopyObject.address.city); // Los Angeles
这段代码更显式地展示了浅拷贝的过程。
数组的浅拷贝
对于数组，可以使用
slice()
方法或展开运算符进行浅拷贝。
const originalArray = [1, 2, { value: 3 }];const shallowCopyArray = originalArray.slice(); // 或使用 [...originalArray]shallowCopyArray[0] = 4;shallowCopyArray[2].value = 5; // 注意这里会影响 originalArrayconsole.log(originalArray[0]); // 1console.log(shallowCopyArray[0]); // 4console.log(originalArray[2].value); // 5console.log(shallowCopyArray[2].value); // 5
浅拷贝和深拷贝的区别是什么？
浅拷贝只复制对象或数组的第一层，而深拷贝会递归地复制所有层级。这意味着，如果原始对象或数组包含嵌套的对象或数组，浅拷贝只会复制这些嵌套对象或数组的引用，而深拷贝会创建新的对象或数组，并将原始对象或数组中的值复制到新的对象或数组中。
深拷贝通常使用
JSON.parse(JSON.stringify(obj))
方法（有局限性，比如无法拷贝函数和循环引用），或者使用递归函数来实现。也可以使用第三方库，如 Lodash 的
_.cloneDeep()
方法。
为什么需要浅拷贝？
浅拷贝在某些情况下非常有用。例如，当只需要复制对象或数组的第一层，而不需要复制嵌套的对象或数组时，可以使用浅拷贝。浅拷贝比深拷贝更高效，因为它不需要递归地复制所有层级。
此外，浅拷贝可以用于创建对象的副本，以便在不修改原始对象的情况下进行操作。这在函数式编程中非常常见。
浅拷贝有哪些局限性？
浅拷贝的局限性在于它只复制对象或数组的第一层。如果原始对象或数组包含嵌套的对象或数组，那么修改浅拷贝后的对象或数组会影响原始对象或数组。
因此，在使用浅拷贝时，需要仔细考虑是否需要复制嵌套的对象或数组。如果需要复制所有层级，那么应该使用深拷贝。
如何避免浅拷贝带来的问题？
避免浅拷贝带来的问题的关键在于理解浅拷贝的局限性，并根据实际情况选择合适的拷贝方式。
如果需要修改对象的属性，但不想影响原始对象，那么应该使用深拷贝。如果只需要读取对象的属性，而不需要修改，那么可以使用浅拷贝。
此外，可以使用不可变数据结构来避免浅拷贝带来的问题。不可变数据结构是指一旦创建就不能被修改的数据结构。如果使用不可变数据结构，那么修改对象总是会创建一个新的对象，而不会影响原始对象。例如，可以使用 Immutable.js 库来创建不可变数据结构。
以上就是JS如何实现浅拷贝的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1515290.html
微信扫一扫 
支付宝扫一扫 
