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中map函数的两种方式
Apr 07 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jQuery实现全选按钮
Jan 01 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
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
JavaScript访问样式表代码
2010/10/15 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
javascript表单正则应用
2017/02/04 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
详解webpack运行Babel教程
2018/06/13 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
python实现linux下使用xcopy的方法
2015/06/28 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
运动会邀请函范文
2014/01/31 职场文书
《争吵》教学反思
2014/02/15 职场文书
质量承诺书格式
2014/05/20 职场文书
甜品店创业计划书
2014/08/14 职场文书
统招统分证明
2015/06/23 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang