深拷贝方法整理,以及(...)扩展运算符是不是深拷贝

2024-02-25  本文已影响0人  叫丽丽啊

方式1:JSON.parse(JSON.stringify(obj))

通过JSON.stringify把对象转成字符串,再用JSON.parse把字符串转成一个全的新的对象;

let list = [{ name: 'Tom' }];
let copyList = JSON.parse(JSON.stringify([...list]));
copyList[0].name = 'Jerry'
console.log(list[0].name);      // Tom
console.log(copyList[0].name);      // Jerry

方式2:递归实现

采用递归去拷贝所有层级属性

function deepClone(obj) {
    let objClone = Array.isArray(obj) ? [] : {};
    if (obj && typeof obj === "object") {
        for (key in obj) {
            if (obj.hasOwnProperty(key)) {
                //判断ojb子元素是否为对象,如果是,递归复制
                if (obj[key] && typeof obj[key] === "object") {
                    objClone[key] = deepClone(obj[key]);
                } else {
                    //如果不是,简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}
let a = [1, 2, 3, 4],
    b = deepClone(a);
a[0] = 2;
console.log(a, b)   // [2,2,3,4]  [1,2,3,4]

(...)扩展运算符是不是深拷贝?

总结:扩展运算符既不是深拷贝,也不是浅拷贝。一半一半,他只能深拷贝第一层,第二层的拷贝还是浅拷贝,当拷贝对象的属性值对应的都是简单的基本类型数据,可以理解为深拷贝。当拷贝对象的属性对应的值为数组或对象等引用类型时,为浅拷贝。所以,还是老实用递归写深拷贝把。JSON的深拷贝不好用,局限性太大了。
扩展运算符是深拷贝还是浅拷贝1
扩展运算符是深拷贝还是浅拷贝2

上一篇 下一篇

猜你喜欢

热点阅读