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 相关文章推荐
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
jQuery多个input求和的实现方法
Feb 12 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
精通JavaScript的this关键字
May 28 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 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 $_SERVER["REQUEST_URI"]获取值的通用解决方法
2010/06/21 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
详解分布式任务队列Celery使用说明
2018/11/29 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
超市促销实习自我鉴定
2013/09/23 职场文书
制药工程专业应届生求职信
2013/09/24 职场文书
秘书英文求职信范文
2014/01/31 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
大学军训感言1000字
2014/02/25 职场文书
小学一年级评语大全
2014/04/22 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技