克隆javascript纯对象

克隆javascript纯对象

月光魔力鸭

2018-09-11 08:39 阅读 993 喜欢 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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
最大公因数,也称最大公约数、最大公因子,指两个或多个整数共有约数中最大的一个。a,b的最大公约数记为(a,b),同样的,a,b,c的最大公约数记为(a,b,c),多个整数的最大公约数也有同样的记号。求最大公约数有多种方法,常见的有质因数分解法、短除法、辗转相除法、更相减损法。与最大公约数相对应的概念是最小公倍数,a,b的最小公倍数记为[a,b]。
现象:在IOS中,jsp页面绑定的点击事件,点击后延迟很大,接近1000ms,反应很慢
先记录下,不定哪天就查了..防止找不到或不全
codewars上的一个题目,这里记录下解决方法。
web网站上总会有在文本域中提交代码的操作,那么如何处理呢?
this 是 JavaScript 的一大难点,多年经验的前端程序员都可能对这方面模糊。this 在大量的函数、类库中都有使用,理清显式绑定和隐式绑定有助于理解或书写这类函数。
之前的时候都是在各大主机厂商手动进行申请免费的,直到阿里的免费期限变更为3个月.. 我就开始觉的有些麻烦了,还不如使用这个let's encrypt进行部署呢。
最近折腾的少了,实在没的写了,大约三四个月没更新了,先水一篇。