js深度克隆的几种方法

49次阅读

共计 806 个字符,预计需要花费 3 分钟才能阅读完成。

方法一

老老实实敲代码法 (迭代法,适用于所有)

function deepClone(obj) {let newObj = Array.isArray(obj) ? [] : {}
    if (obj && typeof obj === "object") {for (let key in obj) {if (obj.hasOwnProperty(key)) {newObj[key] = (obj && typeof obj[key] === 'object') ? deepClone(obj[key]) : obj[key];
            }
        }
    } 
    return newObj
}
const newObj = deepClone(oldObj));


方法二

利用 JSON.stringify 将 js 对象序列化(JSON 字符串),再使用 JSON.parse 来反序列化 (还原)js 对象

const newObj = JSON.parse(JSON.stringify(oldObj));

缺点:

  • 如果 obj 里面有时间对象,则 JSON.stringify 后再 JSON.parse 的结果,时间将只是字符串的形式。而不是时间对象;
  • 如果 obj 里有 RegExp、Error 对象,则序列化的结果将只得到空对象;
  • 如果 obj 里有函数,undefined,则序列化的结果会把函数或 undefined 丢失;
  • 如果 obj 里有 NaN、Infinity 和 -Infinity,则序列化的结果会变成 null 
  • JSON.stringify() 只能序列化对象的可枚举的自有属性,例如 如果 obj 中的对象是有构造函数生成的,则使用 JSON.parse(JSON.stringify(obj)) 深拷贝后,会丢弃对象的 constructor;


方法三

const newObj = Object.assign([],oldObj);

缺点

  • Object.assign 只对顶层属性做了赋值,完全没有继续做递归之类的把所有下一层的属性做深拷贝。

简而言之,第一层实现了深度拷贝,后续层次还是浅拷贝

正文完
 0