js深克隆方法

最新推荐文章于 2024-10-12 08:30:00 发布

石来云转

最新推荐文章于 2024-10-12 08:30:00 发布

阅读量911

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_42063254/article/details/114934573

版权

方法一：JSON.parse(JSON.stringify(obj))

缺点：不可以拷贝 null， function， RegExp 等等类型的

let obj = {
    a: 1,
    b: 2,
    c: [1, 2, 3]
}
let newObj = JSON.parse(JSON.stringify(obj))
obj.c[0] = 2
console.log(newObj.c[0])   //1

缺点：

如果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；

方法二：Object.assign(target, source)

缺点：只能拷贝一层

let obj = {
    a: 1,
    b: 2,
    c: [1, 2, 3]
}
let newObj = Object.assign({}, obj)
obj.a = 3
obj.c[0] = 2
console.log(newObj.c[0])  // 2
console.log(newObj.a)     // 1

缺点

Object.assign只对顶层属性做了赋值，完全没有继续做递归之类的把所有下一层的属性做深拷贝。
简而言之，第一层实现了深度拷贝，后续层次还是浅拷贝

方法三：递归拷贝

function clone(target) {
    let obj 
    // 如果是对象类型往下走否则直接赋值，null和RegExp的typeof也是object
    if (typeof target === 'object') {
        // 如果是数组就递归push
        //Array.isArray(target)
        if (target instanceof Array) {
            obj = []
            for (let i in target) {
                obj.push(clone(target[i]))
            }
            // 如果是null直接赋值
        } else if (target === null) {
            obj = null
            // 如果是RegExp直接赋值
        } else if (target.constructor === RegExp) {
            obj = target
            // 以上都不是就是普通对象for in 递归赋值
        } else {
            obj = {}
            for (let key in target) {
                obj[key] = clone(target[key])
            }
        }
    } else {
        obj = target
    }
    return obj
}

方法四：用循环实现

优点：目标对象层级过深也不会导致栈溢出
缺点：如果目标对象内循环引用会导致无限循环

function cloneLoop(target) {
let root;
Array.isArray(target)
? (root = [])
: typeof target === "object" && target !== null
? (root = {})
: (root = target);
if (root === target) return root;
let nodeList = [
{
parent: root,
key: undefined,
value: target,
},
];
while (nodeList.length) {
let node = nodeList.shift();
let parent = node.parent;
let key = node.key;
let value = node.value;
if (Array.isArray(value)) {
key !== undefined ? (parent = parent[key] = {}) : (parent = root);
value.forEach((item, index) => {
res[index] = item;
if (typeof item === "object") {
nodelist.push({
parent: res,
key: index,
value: item,
});
}
});
} else if (typeof value === "object" && value !== null) {
key !== undefined ? (parent = parent[key] = {}) : (parent = root);
for (const key in value) {
if (Object.hasOwnProperty.call(value, key)) {
parent[key] = value[key];
if (typeof value[key] === "object") {
nodeList.push({
parent,
key,
value: value[key],
});
}
}
}
} else {
parent[key] = value;
}
}
return root;
}