JSON.parse(JSON.stringify())和深复制assign和浅复制

最新推荐文章于 2024-02-05 17:26:22 发布

原创最新推荐文章于 2024-02-05 17:26:22 发布 · 1.1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #深拷贝 #浅拷贝

原生Js 专栏收录该内容

9 篇文章

订阅专栏

博客介绍了原生Js实现浅拷贝和深拷贝的方法。浅拷贝等同于Assign，深拷贝等同于JSON.parse(JSON.stringify())，为JavaScript开发中数据复制操作提供了简单实现思路。

浅复制：

Assign 实现：res != obj

在这里插入图片描述

原生Js 实现，等同于Assign

const shallowCopy = (Sobj) => {
    // 判断是否为对象，如果不是直接返回
    if (typeof Sobj !== 'object') return
    // 判断接受的参数是否是Array ，如果是， 则定义的新newObj 则是数组，反之 则为对象
    let newObj = Sobj instanceof Array ? [] : {}
    // 对接收的参数进行遍历，只会遍历可枚举属性， hasOwnProperty 方法判断属性是否存在
    for (let key in Sobj) {
        if (Sobj.hasOwnProperty(key)) {
            newObj[key] = Sobj[key]
        }
    }
    return newObj
}
let obj = {
    a: 1,
    arr: [2, 3]
};

// let res = shallowCopy(obj);
console.log(res.arr === obj.arr); // true，指向同一个引用
console.log(res.a === obj.a); // false

在这里插入图片描述

深复制：等同于JSON.parse(JSON.stringify())

 const deepCopy = (sourceObj) => {
    if (typeof sourceObj !== 'object') return
    let newObj = sourceObj instanceof Array ? [] : {}

    for (let key in sourceObj) {
        if (sourceObj.hasOwnProperty(key)) {
            newObj[key] = (typeof sourceObj[key] === 'object' ? deepCopy(sourceObj[key]) : sourceObj[key])
        }
    }
    return newObj
} 
let obj = {
    a: 1,
    arr: [2, 3]
};
let res = deepCopy(obj);
console.log(res.arr === obj.arr); // false，指向不同的引用
console.log(res === obj); // false

在这里插入图片描述

JSON.parse(JSON.stringify())实现： 两个都不相等

在这里插入图片描述