js深度克隆的几种方法

邢走在云端

方法一

老老实实敲代码法(迭代法,适用于所有)
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里有function,Symbol 类型,undefined,则序列化的结果会把函数或 undefined丢失;
  • 如果obj里有NaN、Infinity和-Infinity,则序列化的结果会变成null 
  • JSON.stringify()只能序列化对象的可枚举的自有属性,例如 如果obj中的对象是有构造函数生成的, 则使用JSON.parse(JSON.stringify(obj))深拷贝后,会丢弃对象的constructor;


方法三

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

clipboard.png

缺点

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

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

阅读 12.1k

前端学习
个人学习专栏,记录自己的前端学习

每天跑步五公里

281 声望
24 粉丝
0 条评论

每天跑步五公里

281 声望
24 粉丝
文章目录
宣传栏