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 保存文件到本地实现方法
Nov 29 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
原生js实现回复评论功能
Jan 18 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
Vue单文件组件开发实现过程详解
Jul 30 Javascript
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通过文件流方式复制文件的方法
2015/03/13 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
domReady的实现案例
2016/11/23 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
Python去掉字符串中空格的方法
2014/03/11 Python
python中黄金分割法实现方法
2015/05/06 Python
Python的组合模式与责任链模式编程示例
2016/02/02 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
JMS中Topic和Queue有什么区别
2013/05/15 面试题
Linux Interview Questions For software testers
2013/05/17 面试题
计算机操作自荐信
2013/12/07 职场文书
医务工作者先进事迹材料
2014/01/26 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
青年文明号服务承诺
2014/03/31 职场文书
先进党支部申报材料
2014/12/24 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
Python实现科学占卜 让视频自动打码
2022/04/09 Python
python使用shell脚本创建kafka连接器
2022/04/29 Python