JS中解决JSON中函数及对象的深度拷贝

栏目: 后端 · 前端 · 发布时间: 4年前

内容简介:在JS中对于普通的json, 可用如下方式进行简单的深度拷贝不过当json中包含一些JS中的对象及函数的时候, 用这样的方法会使数据丢失, 并且这个无法解决循环引用的问题, 所谓循环引用指的是这时

在JS中对于普通的json, 可用如下方式进行简单的深度拷贝

let json = { a: "aa" };
let newJson = JSON.parse(JSON.stringify(json));

不过当json中包含一些JS中的对象及函数的时候, 用这样的方法会使数据丢失, 并且这个无法解决循环引用的问题, 所谓循环引用指的是

let b={};
let a={
    b:b
};
b.a=a;
console.log(a);
// console.log(JSON.stringify(a));

这时 JSON.stringify(a) 就出现了异常

由于存在这些问题, 所以就编写了一个拷贝函数, 来做这件事情, 代码实现如下

实现代码

function copyObject(o) {
    let objectMap = new WeakMap();
    function copy(object) {
        if (objectMap.get(object)) {
            return objectMap.get(object);
        }
        if (typeof object !== "object") {
            return object;
        }
        if (object instanceof RegExp) {
            return object;
        }
        if (object instanceof Array) {
            let array = [];
            objectMap.set(object, array);
            for (let i in object) {
                array.push(copy(object[i]));
            }
            return array;
        }
        let newObject = new object.constructor();
        objectMap.set(object, newObject);
        for (let k in object) {
            newObject[k] = copy(object[k]);
        }
        return newObject;
    }
    return copy(o);
}

代码中通过 let objectMap = new WeakMap(); 保存拷贝过的对象, 解决循环引用的问题

通过递归拷贝其中的对象, 若是基本类型则直接返回

测试代码

class ObjA {
    constructor(v) {
        this.a = v;
    }
    print() {
        console.log(this.a || "!!!");
    }
}
function ObjB(v) {
    this.name
    let a = v;
    this.print = () => {
        console.log(a || "!!!");
    }
}
let objA = new ObjA(666);
let objB = new ObjB(777);
let json0 = {};
let json1 = {
    a: () => 'aaa',
    b: [123, "abc", /abcd/],
    c: {
        d: function () { return "ddd" },
        e: [123, 2, 3],
        f: objA,
        g: objB
    },
    r: json0
}
json0.r = json1;

let json2 = copyObject(json1);
json2.c.e[1] = "asdasd";
json2.r.r.r.r.b[1] = "rrrr";
console.log(json1);
console.log(json2);
    
json2.c.f.print();
objA.a = 888;
objA.print();
json2.c.f.print();
json2.c.g.print();

经过测试, 以上场景的输出均与预计相同


以上所述就是小编给大家介绍的《JS中解决JSON中函数及对象的深度拷贝》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

设计方法卡牌

设计方法卡牌

罗莎 等 / 电子工业出版社 / 2017-7 / 79.00

本套设计素材提供了54种设计方法,以卡牌的形式展示给读者,每张卡牌包括该设计方法的基本描述、目的、时间成本、工具渠道、使用阶段、操作步骤及其归类属性等信息。在做设计时,可以根据自己的需求进行卡牌的选择和组合,让设计工作更有灵活性和趣味性。同时,依据设计产品属性的不同,卡牌提供了选择设计方法的推荐模板、方法组合模板、产品阶段划分模板,给初学者在做设计时提供一定的理论依据,帮助读者启发设计灵感,剖析设......一起来看看 《设计方法卡牌》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具