一. 合并与克隆的差别

1. 克隆是特殊的合并(以空对象作为目标对象,非空对象作为源对象进行合并),克隆要求目标对象与源对象的 constructor相同。

2. 克隆的源对象只有一个,合并的源对象可以是多个。

二. 合并的方法

1.Object.assign():

例:var obj1 ={

m : 1,

n : 2,

j : {

r : {

h : 2

},

p : 4 } ,

p : 1

}

var obj2 ={ m : 2 , n : undefined, j : { h : 2 ,o:  3}}

var obj3 = Object.assign(obj1,obj2);

结果:obj1 = { m : 2,n : undefined, j : { h : 2, o : 3 }, p : 1 };

obj2 ={ m : 2 , n : undefined, j : { h : 2, o : 3 } };

obj3 ={ m : 2 , n : undefined, j : { h : 2, o : 3 }, p : 1 };

注意:1).  目标对象自身也会变  obj1===obj3

2). 此方法为浅合并

3). undefined参与合并

4). 原型不属性参与合并

2. $.extend:

情况一:

例:var obj1 ={ m : 1, n : 2, j : { r : { h : 2 }, p : 4 }, p : 1 }

var obj2 ={ m : 2, n : undefined, j : { h : 2, o : 3 } }

var obj3 = $.extend(obj1,obj2);

结果:obj1 = { m : 2, n : 2, j : { h : 2, o : 3 }, p : 1 };

obj2 ={ m : 2, n : undefined, j : { h : 2, o : 3 } };

obj3 ={ m : 2, n : 2, j : { h : 2, o : 3 }, p : 1 };

注意:1).  目标对象自身也会变  obj1===obj3

2). 此方法为浅合并

3). undefined不参与合并

4). 原型不属性参与合并

情况二:

例:var obj1 ={ m : 1, n : 2, j : { r : { h : 2 }, p : 4 }, p : 1 }

var obj2 ={ m : 2, n : undefined, j : { h : 2, o : 3 } }

var obj4 = $.extend({},obj1,obj2);

结果:obj1 = { m : 1, n : 2, j : { r : { h : 2 }, p : 4 }, p : 1 };

obj2 ={ m : 2, n : undefined, j : { h : 2, o : 3 } };

obj3 ={ m : 2, n : 2, j : { h : 2, o : 3 }, p : 1 };

注意:1).  此方法为浅合并

2). undefined不参与合并

3). 原型不属性参与合并

情况三:

例:var obj1 ={ m:1,n:2,j:{r:{h:2},p:4},p:1}

var obj2 ={m:2,n:undefined,j:{h:2,o:3}}

var obj3 = $.extend(true,obj1,obj2);

结果:obj1 = {m:2,n:2,j:{h:2,o:3,r:{h:2},p:4},p:1};

obj2 ={m:2,n:undefined,j:{h:2,o:3}};

obj3 ={m:2,n:2,j:{h:2,o:3,r:{h:2},p:4},p:1};

注意:1).  目标对象自身也会变  obj1===obj3

2). 此方法为深合并

3). undefined不参与合并

4). 原型不属性参与合并

3. 遍历赋值法

思路:将obj2中存在的属性但obj1不存在的属性赋值给obj1。

步骤:1). 遍历obj2中属性。

2). 判断obj1不存在此属性

3). 将次值赋给obj1

var extentObj = function(obj1,obj2){

for(let key in obj2){

  if(obj2.hasOwnProperty(key) && (!obj1.hasOwnProperty(key))){

    obj1[key] = obj2[key]

   }

 }

}

三. 克隆的方法

1. JSON.parse(JSON.stringify()):

1). 先将对象变为字符串,然后再变为json对象,防止对象的指针指向问题,为深拷贝

2). undefined 和 function 类型的属性会被忽略,而 Date 类型的属性则会被转换为字符串

2. $.extend:

传true为深拷贝,不传为浅拷贝

注意:深拷贝与浅拷贝的区别

浅拷贝直接把引用地址原样拿来,此时,不管源对象还是目标对象,修改引用属性后另一个对象的同名属性都会受到影响。

深拷贝则会递归地在目标对象上创建值,目标对象和源对象之间将完全独立

JS----对象的合并与克隆的更多相关文章

  1. js 对象的合并(3种方法)转载

    对象的合并 需求:设有对象 o1 ,o2,需要得到对象 o3 var o1 = { a:'a' }, o2 = { b:'b' }; // 则 var o3 = { a:'a', b:'b' } 方法 ...

  2. js对象简单、深度克隆(复制)

    javascript的一切实例都是对象,只是对象之间稍有不同,分为原始类型和合成类型.原始类型对象指的是字符串(String).数值(Number).布尔值(Boolean),合成类型对象指的是数组( ...

  3. js对象的合并

    问题情况:将2个或2个以上对象(object{....})中的属性进行合并,即最后合并为一个object{.....}传递给后端. 问题场景:多页表单数据的一同提交 解决办法:Object.assig ...

  4. js 对象(object)合并

    var obj1 = { name:'lisi', checked:'true' }; var obj2 = { name:'zhangsan', age:18 }; Object.assign(ob ...

  5. js对象合并

    实现js对象大合并,ES6之前就只有循环遍历咯.可以用ES6的话可以用Object.assign(). 以下是Object.assign()示例: var o1 = { a: 1 }; var o2 ...

  6. js对象的深度克隆

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JS 两个对象数组合并并去重

    JS两个对象数组合并并去重 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  8. js对象详解(JavaScript对象深度剖析,深度理解js对象)

    js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...

  9. JS对象复制

    在JavaScript很多人复制一个对象的时候都是直接用"=",因为大家都觉得脚本语言是没有指针.引用.地址之类的,所以直接用"="就可以把一个对象复制给另外一 ...

  10. 超实用的JavaScript代码段 Item8 -- js对象的(深)拷贝

    js 对象 浅拷贝 和 深拷贝 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: var Chinese = { nation:'中国' } var Doctor ...

随机推荐

  1. 2018-2019-1 20189210 《Linux内核原理与分析》第三周作业

    一.学习笔记 计算机的"三大法宝" 1.程序存储计算机. 2.函数调用对栈.堆栈的作用是:记录函数调用框架.传递函数参数.保存返回值地址.提供函数内部局部变量的存储空间.函数调用堆 ...

  2. Python基础之语句1

    一.行定义(两类): 1.物理行:程序员编写代码的行. 2.逻辑行:python解释器需要执行的指令. 建议:一个逻辑行在一个物理行上,若一个物理行使用多个逻辑行,需要使用分号隔开:如果逻辑行过长,可 ...

  3. php发送短信验证码

    业务: 手机端点击发送验证码,请求发送到php端,由php调用榛子云短信http://smsow.zhenzikj.com的短信接口,生成验证码并发送. SDK下载: http://smsow.zhe ...

  4. uperTextView-从未如此惊艳!一个超级的TextView

    简介 下载:http://www.see-source.com/androidwidget/detail.html?wid=1273 欢迎使用SuperTextView,这篇文档将会向你展示如何使用这 ...

  5. ASP.NET Core 2.2 迁移至 3.0 备忘录

    将 ASP.NET Core 2.2 迁移至 ASP.NET Core 3.0 需要注意的地方记录在这篇随笔中. TargetFramework 改为 netcoreapp3.0 <Target ...

  6. 工作中对git使用的总结

    git与svn的区别,简单的说,       svn在checkout后,如果不提交,那么版本库没有记录,如果修改的文件比较多,中间想回退几个文件,非常麻烦.git 是clone下来代码和记录,不提交 ...

  7. VUE-004-禁止修改页面显示项,设置el-input,textarea只读方法

    在实际业务需求中,有些内容当初次创建后,即不可再次进行修改变更,因而需要显示的文本内容不允许变更.此时,可通过页面限制防止用户修改. 方法:添加 readonly="true" 或 ...

  8. Module 3 - Azure - Web Apps

     Module 3 - 微软云 Azure - Web Apps 1. Create new Web application in the Azure Portal Azure Portal -> ...

  9. go 语言图片像素点处理

    将一张图片色彩反转,就是将  rgb 值,分别被 255 减 package main import ( "bytes" "fmt" "image&q ...

  10. java 对象的一点小问题

    List<A> list = new ArrayList(); A a = new A(); for(int i=0;i<3;i++) { a.setI(i); list.add(A ...