浅拷贝:
拷贝的是属性指向某个对象的指针,而不复制对象本身,新旧对象共享一块内存,修改对象属性会影响原对象;
如果属性是基本类型,拷贝的是基本类型的值;
如果属性是引用类型,拷贝的就是内存地址;
即浅拷贝是拷贝一层,深层次的引用类型则共享内存地址;
JS中的浅拷贝:
1.Object.assign(target, ...sources);
target目标对象,接收源对象属性的对象,也是修改后的返回值。
sources源对象,包含将被合并的属性。
2.Array.prototype.slice();
3.Array.prototype.concat();
4.解构赋值
const fxArr = ["One", "Two", "Three"]
const fxArrs = [...fxArr]
fxArrs[1] = "love";
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]
深拷贝:
开辟一个新的栈,两个对象属性完全相同,对应不同的内存地址,修改一个对象的属性,不会改变另一个对象的属性;
JS中的深拷贝:
1._.cloneDeep()
const _ = require('lodash');
const obj1 = {
a: 1,
b: { f: { g: 1 } },
c: [1, 2, 3]
};
const obj2 = _.cloneDeep(obj1);
console.log(obj1.b.f === obj2.b.f);// false
2.jQuery.extend()
const $ = require('jquery');
const obj1 = {
a: 1,
b: { f: { g: 1 } },
c: [1, 2, 3]
};
const obj2 = $.extend(true, {}, obj1);
console.log(obj1.b.f === obj2.b.f); // false
3.JSON.parse(JSON.stringify(obj))
const obj2=JSON.parse(JSON.stringify(obj1));
4.循环递归 手动实现
function deepClone(obj){
if (obj===null) return obj;
if (obj instanceof Date) return new Date(obj);
if (obj instanceof RegExp) return new RegExp(obj);
if (typeof obj !== "object") return obj;
// Array.isArray(obj) 用于确定是否是一个array
let newObj = Array.isArray(obj) ? [] :{};
for (let i in obj){
newObj[i] =typeof obj[i] === "object" ? deepClone(obj[i]) :obj[i]
}
return newObj;
}

本文详细介绍了JavaScript中浅拷贝和深拷贝的概念,包括它们的区别以及如何在JS中实现这两种拷贝方式。浅拷贝通过Object.assign、slice、concat及解构赋值实现,仅复制对象表面一层;深拷贝可以通过lodash的cloneDeep、jQuery.extend、JSON.parse+JSON.stringify以及递归手动实现,确保创建全新独立的对象副本。了解这些拷贝机制对于理解和处理复杂对象的复制至关重要。

被折叠的 条评论
为什么被折叠?



