jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析


Posted in jQuery onMarch 06, 2019

本文实例讲述了jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法。分享给大家供大家参考,具体如下:

语法:jQuery.extend( [deep ], target, object1 [, objectN ] )

深浅拷贝对应的参数就是[deep],是可选的,为true或false。默认情况是false(浅拷贝),并且false是不能够显示的写出来的。如果想写,只能写true(深拷贝)

测试例子:

var object1 = {};
var object2 = {
  b:{
    mm:333
  },
  c:100
};
console.log('原来的object1--->'+JSON.stringify(object1));
console.log('原来的object2--->'+JSON.stringify(object2));
$.extend(true,object1, object2);
object1.b.mm = 600;
console.log('新的object1--->'+JSON.stringify(object1));
console.log('新的object2--->'+JSON.stringify(object2));

测试结果

jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析

由测试结果知道,jQuery中$.extend(true,object1, object2);可以深拷贝对象,拷贝之后,改变其中一个对象的属性值,对另外一个没有影响。

接着在继续深入理解

测试例子

var object1 = {
  a: 0,
  b: {
    gg: 11,
    mm: 22
  }
};
var object2 = {
  b: {
    mm: 333
  },
  c: 100
};
//默认情况浅拷贝
//object1--->{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
//object2的banner覆盖了object1的banner,但是weight属性未被继承
//$.extend(object1, object2);
//深拷贝
//object1--->{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
//object2的banner覆盖了object1的banner,但是weight属性也被继承了呦
$.extend(true,object1, object2);
console.log('原来的object1--->'+JSON.stringify(object1));
console.log('原来的object2--->'+JSON.stringify(object2));
object1.b.mm = 600;
console.log('新的object1--->'+JSON.stringify(object1));
console.log('新的object2--->'+JSON.stringify(object2));

测试结果

jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
jQuery实现二级导航菜单的示例
Sep 30 jQuery
[jQuery] 事件和动画详解
Mar 05 #jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 #jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 #jQuery
jQuery.parseJSON()函数详解
Feb 28 #jQuery
jQuery each和js forEach用法比较
Feb 27 #jQuery
jQuery中each和js中forEach的区别分析
Feb 27 #jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 #jQuery
You might like
PHP和XSS跨站攻击的防范
2007/04/17 PHP
php 显示指定路径下的图片
2009/10/29 PHP
两款万能的php分页类
2015/11/12 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
Javascript的匿名函数小结
2009/12/31 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
JavaScript位移运算符(无符号) >>> 三个大于号 的使用方法详解
2016/03/31 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
数控技术应届生求职信
2013/11/13 职场文书
质检员的岗位职责
2013/11/15 职场文书
市场营销专科应届生求职信
2013/11/24 职场文书
xxx同志考察材料
2014/02/07 职场文书
外贸专业求职信
2014/03/09 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
慰问信范文
2015/02/14 职场文书
贪污检举信范文
2015/03/02 职场文书
车间安全生产管理制度
2015/08/06 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
详解mysql三值逻辑与NULL
2021/05/19 MySQL
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python