精华内容
下载资源
问答
  • 转载自 js深度复制一个对象使用JSON.stringify是最好的办法吗 深度复制一个对象,看到很多种方法,最简单的是: var newObject = JSON.parse(JSON.stringify(oldObject)); 这样写有什么弊端吗? ...

    转载自   js深度复制一个对象使用JSON.stringify是最好的办法吗

    深度复制一个对象,看到很多种方法,最简单的是:

    var newObject = JSON.parse(JSON.stringify(oldObject));

    这样写有什么弊端吗?

    http://stackoverflow.com/questions/20662319/javascript-deep-copy-using-json 看这,两个弊端了。

     

    7个回答

    1、oldObject = {a: 1, b: function() {}}

    他的意思是这样的对象用此方法复制不了。

     

    2、更新:
    JSON接口在于:无法处理function,无法处理Reg,无法处理循环引用对象,完美的实现深度copy是非常非常麻烦的,生产上建议使用lodash,https://www.npmjs.com/package...
    如果你的应用场景处理的就是服务器返回json数据,或者即将以json传递给服务器的,用JSON是最方便的,没必要引入这么复杂的clone库。

    原答案:
    使用JSON接口有弊端,使用Object.create不会复制对象本身, 而是用对象的constructor重新构造一个对象。
    所以可以考虑使用Object.assign

    let old_obj = [{a:1},{b:2}];
    let new_obj = old_obj.map((ele)=>{
        return Object.assign({},ele);
    });
    old_obj[0].a=99;
    console.log(new_obj); // "[{a:1},{b:2}]" 

    3、一般情况下通过 JSON 来复制挺好的,代码写起来也方便——不过并不是所有环境都实现了 JSON,这个需要考虑下。

    通过 deep clone 一般都是有限定复制层次的,一般情况下不会无限层的复制下去。如果使用 JSON 方式来复制,通常不能控制层次。

     

    4、深拷贝不就好了么。

    https://github.com/XadillaX/nbut-online-judge-v2/blob/master/util/functions.js#L7-L28

    /**
     * Deepin clone an object
     * @param obj
     * @returns {*}
     */
    exports.cloneObject = function(obj) {
        if(typeof obj === "object") {
            if(util.isArray(obj)) {
                var newArr = [];
                for(var i = 0; i < obj.length; i++) newArr.push(obj[i]);
                return newArr;
            } else {
                var newObj = {};
                for(var key in obj) {
                    newObj[key] = this.cloneObject(obj[key]);
                }
                return newObj;
            }
        } else {
            return obj;
        }
    };
    

    5、

    var newObject = Object.create(oldObject);
    
    

    6、可以参考一下stackoverflow上关于克隆一个对象的有效方法

    7、这个看需求,我是搜索进来的,之前使用封装出来的深拷贝方法,结果不能满足我的需求,

    建议如果数据格式大而且多样的话,最好是用楼主说的方法; 如果deepcopy的层级小的话,可以看下面的代码:

    var hasOwn = Object.prototype.hasOwnProperty;
    function deepCopy(receiver, obj){
        var args = [].slice.call(arguments), key, i = 1, deep, ride, value, valueType;
    
        if( typeof args[args.length-2] === "boolean" ){
            deep = args.pop();
            ride = args.pop();
        }else{
            ride = (typeof args[args.length-1] === "boolean")?args.pop():true;
            deep = false;
            if(args.length < 2){
                receiver = ( this !== global ) ? this : {};
                if( args.length === 0 ){
                    return receiver;
                }
            }
        }
    
        while( obj = args[ i++ ] ){
            for( key in obj ){
                if( hasOwn.call(obj, key) ){
                    if( ride || !(key in receiver) ){
                        value = obj[key];
                        valueType = type(value);
                        if( deep && ( valueType==="object")){
                            receiver[key]={};
                            deepCopy(receiver[key], value, ride, deep);
                        }else if( deep && ( valueType==="array" )){
                            receiver[key]=[];
                            deepCopy(receiver[key], value, ride, deep);
                        }else{
                            receiver[key] = obj[key];
                        }
                    }
                }
            }
        }
        return receiver;
    }
    
    // 类型判定对象
    var class2type = {
        "[objectHTMLDocument]" : "document",
        "[objectHTMLCollection]" : "nodeList",
        "[objectStaticNodeList]" : "nodeList",
        "[objectIXMLDOMNodeList]" : "nodeList",
        "null" : "null",
        "NaN" : "NaN",
        "undefined" : "undefined"
    };
    
    "Boolean, Number, String, Function, Array, Date, RegExp, Document, Arguments, NodeList"
        .replace( /[^, ]+/g, function( type ){
            class2type["[object " + type + "]"] = type.toLowerCase();
        } );
    
    // 类型判定
    function type( obj, isType ){
        var key = ((obj == null || obj !== obj ) ? obj + "" : Object.prototype.toString.call( obj )),
            result;
    
        if( typeof(result = class2type[ key ]) !== "string" ){
            if( obj.nodeType === 9 ){
                result = class2type["Document"];
            }else if( obj.item && typeof obj.length === "number" ){
                result = class2type["NodeList"];
            }else{
                result = key.slice(8, -1);
            }
        }
    
    
        if( isType ){
            return result === isType.toLowerCase;
        }
    
    
        return result;
    }
    
    export { deepCopy };   //根据开发模式选择使用或不使用,可取消

     

    展开全文
  • js复制 json对象

    2020-05-25 11:38:56
    3.对于json 复制, 要进行深复制,避免假复制(就是只是将地址指向同一对对象) 最好使用 JSON.parse(JSON.stringify(cloneData)) 4.lodash官网 npmi--savelodash main.js import_from"lodash"; 使用: letdata= _....

    1.for循环 复制
    2.clone 方法复制
    3.对于json 复制, 要进行深复制,避免假复制(就是只是将地址指向同一对对象)
      最好使用
      JSON.parse(JSON.stringify(cloneData))

    4. lodash官网

    npm i --save lodash
    main.js
    import _ from "lodash"; 

    使用:
    let data = _.cloneDeep(this.userInfoData) 

     

    推荐 第四种。 对简单的json 对象 第三种就够用了,,(就是对象中不包括函数的)

    展开全文
  • js复制json对象

    千次阅读 2018-05-31 14:59:56
    不是复制指针,是复制一个新的对象出来1. 对象中不能有函数let newJson = JSON.parse(JSON.stringify(json));2.自己写个循环迭代出来

    不是复制指针,是复制一个新的对象出来

    1. 对象中不能有函数

    let newJson = JSON.parse(JSON.stringify(json));
    2.自己写个循环迭代出来
    展开全文
  • 而动态数据和动态评论数据分别位于不同的数据表中,后台只获能分别获取两个数据(如果后台可以把每个评论封装导对应得动态下就不用前端封装了,这里我说的是后台没有封装的情况),一个是全部的动态,一个是全部的...

    JS封装Json数据

    记得在大学刚开始做项目时,总会有这样的功能需求,比如做一个动态显示,并显示相关动态的评论信息。而动态数据和动态评论数据分别位于不同的数据表中,后台只获能分别获取两个数据(如果后台可以把每个评论封装导对应得动态下就不用前端封装了,这里我说的是后台没有封装的情况),一个是全部的动态,一个是全部的评论,每条评论有个外键动态ID,与动态的主键ID。数据格式如下:

    动态数据

    "rows":[
      {
         "id":1,
         "content":"dynamicsContent"
      },
       {
         "id":2,
         "content":"dynamicsContent"
      },
       {
         "id":3,
         "content":"dynamicsContent"
      }
    ]
    

    评论数据

    "rows":[
      {
        "id":1,
        "dynamicId":1,
        "content":"commentsContent",
        "userId":1
      },
      {
        "id":2,
        "dynamicId":1,
        "content":"commentsContent",
        "userId":12
      },
      {
        "id":3,
        "dynamicId":2,
        "content":"commentsContent",
        "userId":13
      },
      {
        "id":4,
        "dynamicId":3,
        "content":"commentsContent",
        "userId":11
      },
      {
        "id":5,
        "dynamicId":3,
        "content":"commentsContent",
        "userId":14
      },
      {
        "id":6,
        "dynamicId":3,
        "content":"commentsContent",
        "userId":8
      }
    ]
    

    需要的封装结果

    "rows":[
      {
         "id":1,
         "content":"dynamicsContent",
         "comments":[
    	       {
    	       "id":1,
    		    "dynamicId":1,
    		    "content":"commentsContent",
    		    "userId":1
    	       },
    	       {
    	       "id":2,
    		    "dynamicId":1,
    		    "content":"commentsContent",
    		    "userId":12
    	       }
    	]
      },
       {
         "id":2,
         "content":"dynamicsContent",
          "comments":[
    	       {
    	       "id":3,
    		    "dynamicId":2,
    		    "content":"commentsContent",
    		    "userId":13
    	       }
    	]
      },
       {
         "id":3,
         "content":"dynamicsContent",
         "comments":[
    			 {
    			    "id":4,
    			    "dynamicId":3,
    			    "content":"commentsContent",
    			    "userId":11
    			  },
    			  {
    			    "id":5,
    			    "dynamicId":3,
    			    "content":"commentsContent",
    			    "userId":14
    			  },
    			  {
    			    "id":6,
    			    "dynamicId":3,
    			    "content":"commentsContent",
    			    "userId":8
    			  }
    		]
      }
    ]
    

    解决方法

    方法一:

    先分别获取动态数据和评论数据,在利用js数组方法封装。

    /*
    * 这里只为了说明需求,我借用jQuery的ajax来获取数据
    */
    $(document).ready(function(){
    	//获取动态数据
    	$.post(
    	  "getDynamics", //获取动态数据的接口
    	  {},	//需要传递的参数
    	  success:function(result){
    		var dynamics = reuslt
    		//获取评论数据
    		$.post(
    		  "getComments", //获取评论数据的接口
    		  {},	//需要传递的参数
    		  success:function(result){
    			var comments = reuslt
    			for(var i in dynamics.rows){
    			  dynamics.rows[i].comments= []	//在动态数据中添加一个空数组用于存放该动态的评论
    			  for(var j in comments){
    			  	//根据comments.dynamicId = dynamics.id 来遍历封装json数据
    			    if(comments.rows[j].dynamicId == dynamics.rows[i].id){
    			      dynamics.rows[i].comments.push(comments.rows[j])
    			    }
    			  }
    			}
    		  }
    		)
    	  }
    	)
    })
    

    本方法要注意的是要在一个一个接口返回成功的函数中调用另一个数据的查询接口,我曾试着两个分开写,但不知道是因为变量提升还是同步异步问题导致在success:function中的赋值无效
    无效代码

    $(document).ready(function(){
      var dynamics
      var comments
      //获取dynamics数据
      $.post(
      	/* 因为时错误代码,这里的接口和参数这类的省略了 */
     	success:function(data){
     	  dynamics = data
     	}
      )
      //获取comments数据
      $.post(
      	/* 因为时错误代码,这里的接口和参数这类的省略了 */
     	success:function(data){
     	  comments= data
     	}
      )
      //遍历封装
      for(var i in dynamics.rows){
        dynamics.rows[i].comments = []
        for(var j in comments.rows){
        /* 这个方法没有成功,主要原因是查到数据后复制给了dynamics和comments之后,全局变量好像并没有得到对应的data*/
        }
      }
    })
    

    方法二

    在获取动态数据的同时获取评论数据,个人极不赞同此方法,因为这个方法请求次数很多,不符合前端优化规则。另外注意,因为JS存在变量提升,所以循环中要使用SE6语法的let,不然会有问题。

    $(document).ready(function(){
      //获取动态数据
      $.post(
        "getDynamics", //获取动态数据的接口
    	{},	//需要传递的参数
    	success:function(result){
    	  var dynamics = result
    	  for(var i in dynamics.rows){
    	    dynamics.rows[i].comments = [] //在动态数据中添加一个空数组用于存放评论数据
    	    //根据动态ID查询评论数据
    	    $.post(
    	      "getCommentsByDynamicId", //获取评论数据的接口
    	      {dynamics.rows[i].id},	//动态ID
    	      succsee:function(data){
    	        dynamics.rows[i].comments.push(data.rows)
    	      }
    	    )
    	  }
    	}
      )
    })
    

    注意: 在第二种方法中可能也会因为var的变量提升导致的问题,可以把forin循环变成for循环,用let定义i,去除变量提升

    因为自己做的时候有过这样的需求,虽然不是评论的,但也需要把两个json数据做类似封装,当时网上找没找到(可能是我搜索的关键字不对_ ),后来希望能帮助一下其他人,随便学一下怎么使用这个CSND写博文(这也是我第一次写这种博文),就写下了这篇,希望能对别人有帮助。也烦请各位业内大佬指出其中的问题,提出建议,欢迎指正。

    展开全文
  • js json数据复制

    2020-04-22 17:47:07
    写java端spring BeanUtils.copyProperties()用习惯了,回头来写js,懒得set,写个复制方法: var fn = { //将给定源json的属性值复制到目标json中 copyProperties: function (source, target, isOverwrite) { //...
  • VUE js复制对象 JSON

    千次阅读 2019-09-26 18:00:52
    let obj1 = '1'; let obj2 = ''; obj2 复制 obj1 的数据 Object.assign(obj2,obj1) 优点: obj1 与 obj2都是独立的对象,对obj2对象操作,对obj1没有影响
  • JavaScript 获取到的Json数据传递给另一个JS函数首先要认识JavaScript编解码函数escape(string),unescape(string) 编码、解码函数注:escape(string)方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII ...
  • js对象复制到a.json文件中: { str : 'str' , num : 1 , boo : true , nil : null , arr : [ 0 , ' 1 ' , true ], obj : { str : 'obj.str' , num : 1.2 , boo : false , nil : null , }, } 并使用...
  • var oldObject ="sdf"; var newObject = JSON.parse(JSON.stringify(oldObject)); console.log(newObject);
  • 一个JSON一样在客户端获取关系CSV数据的小库 介绍 Web 开发中的简单性正在向客户端寻求方式。 借助 Javascript 的力量,我们能够走得更远。 一个很好的例子是和 。 它们不仅提供了许多很棒的功能,而且它们也很...
  • for(var item in json1){  json2[item]=json1[item];  } 例: 结果:
  • function util(){ //复制 var clone = function (sObj) { if (typeof (sObj) != "object") { return sObj; } ...
  • 本文实例讲述了jQuery实现简单复制json对象和json对象集合操作。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width /> <...
  • 在线将JS/JavaScript-Object转JSON工具 ...它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。 https://tooltt.com/js-object-to-json/ ...
  • JavaScript合并两个Json对象

    万次阅读 2016-03-24 10:11:46
    如何将两个Json对象合并成新的json对象呢? $.mergeJsonObject = function (jsonbject1, jsonbject2) { var resultJsonObject={}; for(var attr in jsonbject1){ resultJsonObject[attr]=jsonbject1[attr...
  • jsJson数组进行深复制

    千次阅读 2017-03-02 23:28:38
    在开发微信小程序的时候,很多时候我们传json对象的时候都需要小心,因为传进去的都是引用,所以有深复制Json对象的需求,方法如下: var basicInfoTmp = JSON.parse(JSON.stringify(userInfo.basicInfo));
  • json-form-excel 使用 html 表单编辑/创建 json 或从 excel 复制数据 请参阅 html 和 js 文件以了解其工作原理。 依赖项: 引导程序 引导日期时间选择器 ...通过从 excel 复制粘贴来编辑 json: 编辑原始 json
  • Json Eye 在菜单栏中查看最近复制过的JSON并进行格式化。
  • var obj2 = JSON.parse(JSON.stringify(obj1))
  • JS JSON对象深层复制

    2018-12-10 11:45:42
    const clone = function (myObj) { if (typeof myObj !== 'object') return myObj; if (myObj === null) return myObj; if(myObj instanceof Array...console.log('复制之后newJSON:') console.log(newJson)  
  • 需求是一个网站在收集用户的信息,内部的一个系统需要同步这些数据,两个系统不在一个服务器上,且无固定技术支持,字段比较多,一个一个复制的话,比较耗时间,所以做出这个js来。 方式是: 在系统收集网站上生成...
  • 在使用JSON.parse(JSON.stringify(obj))的时候会遇到一个问题,那就是对象的不可遍历属性无法复制,例如: var obj={ a:1, set num(value){ this.a=value; }, get num(){ ...
  • 1.JSONJavaScript Object Notation)一种简单的数据格式...JSON的规则很简单:对象是一个无序的“‘名称:值'对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);...
  • json-trim提供了一种轻松将json文件的简化版本复制到另一个文件位置的方法。 动机 对于一个特定的示例,我们假设我正在构建一个名为@auturge/maximus的新TypeScript库,我打算将其发布到软件包存储库(例如npm存储...
  • typescript或javascript深拷贝Object json

    千次阅读 2018-11-29 16:55:25
    typescript或javascript深拷贝Object json Object的json对象很多时候我们需要深...深拷贝一个Object对象,返回深复制的对象。 export function deepCopyObject(source: Object): Object { const newObject = {}; ...
  • 先说结论,使用JSON.stringify方法 第三个参数参数格式化显示,使用标签保留空格和换行符: JavaScript: const jsonString = JSON.stringify(testjson, null, '\t'); ...<pre>...API拿到一个j...
  • json rpc 是一种以json为消息格式的远程调用服务,它是一套允许运行在不同操作系统、不同环境的程序实现基于Internet过程调用的规范和一系列的实现。... *处理一个request类,这个类中绑定了一些请求参数  
  • 构建一个json对象的类

    2011-09-12 21:30:45
     JSONJavaScript Object Natation(Java对象表示法),它是种轻量级的数据交换格式,非常适合于服务器与 JavaScript 的交互。  简而言之,JSON就是JavaScript交换数据的种格式。例

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 94,249
精华内容 37,699
关键字:

js复制一个json