vue 真正意义实现数组对象深拷贝

91 阅读2分钟

在项目开发中不止一次遇到这个对象、数组拷贝问题,在实现某个方法的时候,我们往往需要改变对象的某个属性,组合构建成新的对象,但是我们不希望改变新对象的值的同时也会改变原来对象的值,这样会造成很大的问题,现在我们可以使用如下方法实现真正意义上的深拷贝,从而实现开发中的需求。

浅拷贝 : 只是将数据中所有的数据引用下来,依旧指向同一个存放地址,拷贝之后的数据修改之后,也会影响到原数据的中的对象数据。例如:Object.assign(),...扩展运算符

深拷贝: 将数据中所有的数据拷贝下来,对拷贝之后的数据进行修改不会影响到原数据。

JSON.parse(JSON.stringify(obj))深拷贝的问题

1、如果obj里面存在时间对象,JSON.parse(JSON.stringify(obj))之后,时间对象变成了字符串。
2、如果obj里有RegExp、Error对象,则序列化的结果将只得到空对象。
3、如果obj里有函数,undefined,则序列化的结果会把函数, undefined丢失。
4、如果obj里有NaN、Infinity和-Infinity,则序列化的结果会变成null。
5、JSON.stringify()只能序列化对象的可枚举的自有属性。如果obj中的对象是有构造函数生成的, 则使用JSON.parse(JSON.stringify(obj))深拷贝后,会丢弃对象的constructor。
6、如果对象中存在循环引用的情况也无法正确实现深拷贝**。**

vue 实现深拷贝

function coppyArray(arr){
   return arr.map((e)=>{
        if(typeof e==='object'){
           return Object.assign({},e);
         }else{
           return e;
       }
     }) 
 }  //定义一个拷贝函数、在需要拷贝的地方调用即可

递归实现深拷贝

function copy (obj) {
    let newObj = null
    if (typeof obj === 'object' && obj !== null) {
        newObj = obj instanceof Array ? [] : {}
        for (let i in obj) {
            newObj[i] = typeof obj[i] === 'object' ? copy(obj[i]) : obj[i]
        }
    } else {
        newObj = obj
    }
    return newObj
}

新方法 structuredClone()

全局**结构化克隆()**  方法使用结构化克隆算法创建给定值的深度克隆

该方法还允许将原始值中的可转移对象传输,而不是克隆到新对象。 传输的对象与原始对象分离并附加到新对象;它们在原始对象中不再可访问。

这个 Web API 名称叫 structuredClone(),详情可访问 MDN 和最新的 HTML5 规范

此函数可用于深度复制 JavaScript 值。 它还支持循环引用,如下所示:

// Create an object with a value and a circular reference to itself.
const original = { name: "MDN" };
original.itself = original;

// Clone it
const clone = structuredClone(original);

console.assert(clone !== original); // the objects are not the same (not same identity)
console.assert(clone.name === "MDN"); // they do have the same values
console.assert(clone.itself === clone); // and the circular reference is preserved

克隆对象

在此示例中,我们克隆一个具有一个成员的对象,该成员是一个数组。克隆后,对每个对象的更改不会影响其他对象。

const mushrooms1 = {
  amanita: ["muscaria", "virosa"],
};

const mushrooms2 = structuredClone(mushrooms1);

mushrooms2.amanita.push("pantherina");
mushrooms1.amanita.pop();

console.log(mushrooms2.amanita); // ["muscaria", "virosa", "pantherina"]
console.log(mushrooms1.amanita); // ["muscaria"]