乐趣区

关于javascript:Js中的浅拷贝与深拷贝

浅拷贝

浅拷贝是一种复制对象的形式,创立一个新的对象,并将原始对象的属性值复制到新对象中。然而,如果属性值是对象或者数组,浅拷贝只会复制他们的援用而不是创立正本。换句话说,浅拷贝只复制了对象外表层级,而不会递归复制外部的嵌套对象。简略来说,浅拷贝只复制对象的一层,如果原始对象中的属性值是对象,那么拷贝后的对象与原始对象共享雷同的援用,批改其中一个对象的属性值会影响到另一个对象。

对象浅拷贝形式?

  1. 应用Object.assign()
const obj = {name: "土豆", age: "18"};
const obj2 = Object.assign({}, obj);
console.log(obj2);
  1. 应用 ... 运算符
const obj1 = {name: "土豆", age: "18"};
const obj2 = {...obj1};
  1. 应用for...in
const obj = {name: "土豆", age: "18"};
const obj2 = {};
for (const key in obj) {if (obj.hasOwnProperty(key)) {obj2[key] = obj[key];
  }
}
  1. 应用 Object.keys
const obj = {name: "土豆", age: "18"};
const obj2 = {};

Object.keys(obj).forEach((key) => {obj2[key] = obj[key];
});
console.log(obj2);

数组浅拷贝实现形式?

  1. 应用 slice() 办法
const arr = ["土豆", "番茄", "向日葵"];
const arr2 = arr.slice();
  1. 应用 concat() 办法
const arr = ["土豆", "番茄", "向日葵"];
const arr2 = [].concat(arr);
  1. 应用 ... 运算符
const arr = ["土豆", "番茄", "向日葵"];
const arr2 = [...arr];

深拷贝

深拷贝的实现形式

  1. 应用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
  1. 应用 structuredClone() 办法实现深拷贝,然而对于不可序列化的输出值,也会抛出谬误;

    const obj = {age: undefined,};
    
    const deepCloneObj = structuredClone(obj);
    console.log(deepCloneObj); //{}
  2. 应用递归深度拷贝对象
退出移动版