浅拷贝
浅拷贝是一种复制对象的形式,创立一个新的对象,并将原始对象的属性值复制到新对象中。然而,如果属性值是对象或者数组,浅拷贝只会复制他们的援用而不是创立正本。换句话说,浅拷贝只复制了对象外表层级,而不会递归复制外部的嵌套对象。简略来说,浅拷贝只复制对象的一层,如果原始对象中的属性值是对象,那么拷贝后的对象与原始对象共享雷同的援用,批改其中一个对象的属性值会影响到另一个对象。
对象浅拷贝形式?
- 应用
Object.assign()
const obj = {name: "土豆", age: "18"};
const obj2 = Object.assign({}, obj);
console.log(obj2);
- 应用
...
运算符
const obj1 = {name: "土豆", age: "18"};
const obj2 = {...obj1};
- 应用
for...in
const obj = {name: "土豆", age: "18"};
const obj2 = {};
for (const key in obj) {if (obj.hasOwnProperty(key)) {obj2[key] = obj[key];
}
}
- 应用 Object.keys
const obj = {name: "土豆", age: "18"};
const obj2 = {};
Object.keys(obj).forEach((key) => {obj2[key] = obj[key];
});
console.log(obj2);
数组浅拷贝实现形式?
- 应用
slice()
办法
const arr = ["土豆", "番茄", "向日葵"];
const arr2 = arr.slice();
- 应用
concat()
办法
const arr = ["土豆", "番茄", "向日葵"];
const arr2 = [].concat(arr);
- 应用
...
运算符
const arr = ["土豆", "番茄", "向日葵"];
const arr2 = [...arr];
深拷贝
深拷贝的实现形式
- 应用
JSON.parse(JSON.stringify())
const person = {
name: "土豆",
age: "18",
address: {
city: "江苏南京",
country: "中国",
},
};
const person2 = JSON.parse(JSON.stringify(person));
person2.address.city = "安徽芜湖";
console.log(person2);
console.log(person);
应用 JSON.parse(JSON.stringify())
弊病
-
对于对象外面的函数,undefined,Symbol,序列化后会失落
const obj = {name: Symbol("土豆"), age: undefined, fun: function () {console.log("hello world"); }, }; const deepCloneObj = JSON.parse(JSON.stringify(obj)); console.log(deepCloneObj);//{}
-
对于对象外面的 RegExp、Error 对象,则序列化的后果只能失去空对象
const obj = {error: new Error(""), reg: new RegExp(),}; const deepCloneObj = JSON.parse(JSON.stringify(obj)); console.log(deepCloneObj);//{error: {}, reg: {}}
-
对象对象外面的 Date 对象,序列化后失去一个字符串
const obj = {date: new Date(), }; const deepCloneObj = JSON.parse(JSON.stringify(obj)); console.log(deepCloneObj);//
-
对于对象中的 NaN、Infinity 和 -Infinity,则序列化后失去 null
const obj = { num1: 0 / 0, num2: 1 / 0, num2: -1 / 0, }; const deepCloneObj = JSON.parse(JSON.stringify(obj)); console.log(deepCloneObj);//{num1: null, num2: null}
-
不会拷贝原型链上的属性
const protoObj = {name: "土豆"}; const obj = Object.create(protoObj); obj.age = 18; const deepCloneObj = JSON.parse(JSON.stringify(obj)); console.log(obj.name); // 土豆 console.log(deepCloneObj.name); //undefined
-
应用
structuredClone()
办法实现深拷贝,然而对于不可序列化的输出值,也会抛出谬误;const obj = {age: undefined,}; const deepCloneObj = structuredClone(obj); console.log(deepCloneObj); //{}
- 应用递归深度拷贝对象