JQuery中extend使用介绍


Posted in Javascript onMarch 13, 2014

Jquery中extend的扩展方法原型是:


1、extend(dest,src1,src2,src3...);
它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:

2、var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。
这样就可以将src1,src2,src3...进行合并,然后将合并结果返回给newSrc了。
如下例:

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

那么合并后的结果
result={name:"Jerry",age:21,sex:"Boy"}
也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。

3、extend(boolean,dest,src1,src2,src3...)
第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致
例如

var result=$.extend( true, {}, 
{ name: "John", location: {city: "Boston",county:"USA"} }, 
{ last: "Resig", location: {state: "MA",county:"China"} } );

我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true,那么合并后的结果就是:
result={name:"John",last:"Resig",location:{city:"Boston",state:"MA",county:"China"}}

也就是说它会将src中的嵌套子对象也进行合并,而如果第一个参数boolean为false,我们看看合并的结果是什么,如下:
var result=$.extend( false, {}, 
{ name: "John", location:{city: "Boston",county:"USA"} }, 
{ last: "Resig", location: {state: "MA",county:"China"} } );

那么合并后的结果就是:
result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}
Javascript 相关文章推荐
javascript比较文档位置
Apr 08 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
vscode中Vue别名路径提示的实现
Jul 31 Javascript
vue实现简单计算商品价格
Sep 14 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
js中用window.open()打开多个窗口的name问题
Mar 13 #Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 #Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 #Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 #Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 #Javascript
jquery、js操作checkbox全选反选
Mar 12 #Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 #Javascript
You might like
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
php中final关键字用法分析
2016/12/07 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
详解 Python 读写XML文件的实例
2017/08/02 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
Python中内建模块collections如何使用
2020/05/27 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
JBL英国官网:JBL UK
2018/07/04 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
村班子对照检查材料
2014/08/18 职场文书
作文评语怎么写
2014/12/25 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
学术会议通知范文
2015/04/15 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle