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

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

内容简介:在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中函数及对象的深度拷贝》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

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

数据资本时代

数据资本时代

Viktor Mayer-Schnberger / 李晓霞、周涛 / 中信出版集团股份有限公司 / 2018-11-1 / CNY 58.00

【编辑推荐】 大数据除了能对我们的生活、工作、思维产生重大变革外,还能够做什么?畅销书《大数据时代》作者舍恩伯格在新书《数据资本时代》中,展示了大数据将如何从根本上改变经济——这并不是因为数据是一种新型石油,而是因为数据是一种新型润滑脂,它将给市场带来巨大能量,给公司带来巨大压力,使金融资本的作用大大削弱。赢家是市场,而并非资本。 这本书在当下国内出版,可以说恰逢其时。时下,中国经济正......一起来看看 《数据资本时代》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

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

HTML 编码/解码

SHA 加密
SHA 加密

SHA 加密工具