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

更新日期: 2019-06-30阅读: 2.3k标签: json

在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;
        }
        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();

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


原文来自:https://laboo.top/2019/06/29/jsoncp/


链接: https://www.fly63.com/article/detial/3946

web数据格式中关于:XML/HTML/JSON学习总汇

这篇文章讲解关于XML/HTML/JSON的学习,大家都知道服务器端可以返回的数据格式,主要就是:XML、HTML、JSON,当我们做数据抓取,ajax请求的时候都需要熟悉它们的使用。

解决IE8下JSON.stringify()自动将中文转译成unicode的方法

在IE8下JSON.stringify()自动将中文转译为unicode编码,原本选择的中文字符,传到后台变为了unicode编码,即u****的形式。查找资料后发现,与标准的JSON.stringify()不同,IE8内置的JSON.stringify()会自动将编码从utf-8转为unicode编码,导致出现这种类似于乱码的情况。

js实现json格式化,以及json校验工具的简单实现

这篇文章主要讲解:json结构及形式、json字符串转化为json对象【通过eval( ) 方法,new Function形式,使用全局的JSON对象】、json校验格式化工具简单实现

解析Json字符串的三种方法

在很多时候,我们的需要将类似 json 格式的字符串数据转为json,下面将介绍日常中使用的三种解析json字符串的方法

解决IE8以下低版本实现JSON.parse()与JSON.stringify()的兼容

将字符串和json对象的相互转换,我们通常使用JSON.parse()与JSON.stringify()。解决IE8以下低版本实现JSON.parse()与JSON.stringify()的兼容呢:利用eval方式解析、new Function形式、自定义兼容json的方法、head头添加mate等

什么是数据交互格式?xml和json优缺点

就是客户端和服务端进行信息传输的格式(xml和json),双方约定用什么格式进行传输,然后解析得到自己想要的值,xml扩展标记语言,属于重量级(第一占宽带、第二解析难),json属于轻量级的数据交互格式(不占宽带,解析很简单)

js 将json字符串转换为json对象的方法解析

将json字符串转换为json对象的方法。在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键

聊聊JSON Schema

json现在已经成为比较通用灵活的数据交换格式,尤其是在web方面,总是少不了它的身影,js原生就支持它。网页中与服务器中和服务器交换信息也基本上式基于json的。在现在的开发中,特别是在前后端分离的开发中,后端提供接口,前端通过接口拿取数据;

百度JSON LD结构化数据代码分享

百度JSON LD结构化数据代码分享,搞外贸网站,企业网站这么就,对谷歌的 schema 结构化数据比较熟悉,但是对百度的结构化数据就了解太少了

什么是JWT(JSON WEB TOKEN)

Json web token(JWT)是为了网络应用环境间传递声明而执行的一种基于JSON的开发标准(RFC 7519),该token被设计为紧凑且安全的,特别适用于分布式站点的单点登陆(SSO)场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!