克隆javascript纯对象

克隆javascript纯对象

月光魔力鸭

2018-09-11 08:39 阅读 773 喜欢 0 对象克隆 深度克隆

背景

在使用echarts 来做统计报表的时候,由于数量较多,准备将同类型的相同属性抽取出来,然后用来做默认属性的。结果发现一个问题。

使用Object.assign只能复制第一层属性,对于深层的无法复制。

举例:

var object1 = {
  title : {
    name : 'default',
    style : '#49e'
  }
};
var option = {
  title : {
    name : 'test',
    size : 22
  }
};
var newObject = Object.assign(object1,option);
//我们希望的结果是
{
  title : {
    name : 'test',
    style : '#49e',
    size : 22
  }
}
//而实际的结果却实
{
  title : {
    name : 'test',
    size : 22
  }
}
//只能覆盖第一层属性。

自己动手实现clone

function clone(){
        var args = slice.call(arguments);
        if(args.length == 0){
            return {};
        }else if(args.length == 1){
            //创造一个新的返回
            var source = args[0];
            if(typeof source != 'object'){
                return source;
            }else{
                var newTarget = {};
                for(var k in target){
                    newTarget[k] = target[k];
                }		
                return newTarget;
            }
        }else{
            //多个参数
            var target = args[0];
            var left = args.splice(1);
            if(typeof target == 'object'){
                var newTarget = {};
                //先复制
                for(var k in target){
                    newTarget[k] = target[k];
                }
                for(var i=0;i<left.length;i++){
                    var source = left[i];
                    for(var k in source){
                        newTarget[k] = clone(newTarget[k],source[k]);
                    }
                }
                return newTarget;
            }else{
                return left[0];
            }
        }
}

支持以下几种形式

var object = {
  title : {
    name : 'test'
  }
};
var object1 = clone(object);
//克隆出一个新的对象

var object2 = {
  title : {
    style : '#49e'
  }
};
var object3 = clone(object,object2);
//覆盖属性

var object4 = {
  title : {
    style : '#f60',
    size : 22
  }
};
var object5 = clone(object,object2,object4);
//多参数,最终是从后向前覆盖

可能存在的问题

如果对象特别大...有可能会回调溢出吧 。毕竟这是递归处理的。(没有进行测试过呢)

转载请注明出处: https://chrunlee.cn/article/javascript-clone-object.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
在开发过程中经常会碰到跨frame 去操作的需求,那么如何获得这个frame呢,这里写了一个工具类,用来通过name获得frame的jq对象
在文件上传的时候,经常会对文件的mime进行限制,比如图片 image/jpg 等,让用户可以选择图片,而不是其他的文件。
java 对象中有很多引用,甚至会出现循环引用,比如 user 对象中有 school 对象,school 对象中又有 user 对象,这样在对 user 对象序列化的时候,就会出现死循环,导致内存溢出。通过一定的方式,将每个对象增加ID 和 REF 引用标识最终可以解决这个问题
最近一直在想着抓一些网盘数据,进行资料归拢,可是当我真正开始的时候.. 还是遇到了反爬,当然我本身就有心理预期,这是肯定会碰到的,只是没想到会在代理IP上耗费这么久,之前的时候也处理过代理IP ,可是由于一知半解,导致很多配置都不理解,debug全靠猜...
问题是由一个BUG引起的,功能中有使用国际化组件,用的是jquery.i18n,在chrome上、ff上都没有什么问题,问题出在了IE上。万恶的IE..
对于web开发过程中的JS对象 Array ,我们真的充分使用了么?是不是理解了Array的全部?能够在合适的地点调用合适的函数,使用合适的属性?
我们经常会有判断一个数值是素数的需求,那么我们如何来实现呢?
之前的时候都是在各大主机厂商手动进行申请免费的,直到阿里的免费期限变更为3个月.. 我就开始觉的有些麻烦了,还不如使用这个let's encrypt进行部署呢。