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 Firefox与IE 替换节点的方法
Feb 24 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 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使用PDO操作MySQL数据库实例
2014/12/30 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
浅谈php提交form表单
2015/07/01 PHP
CI框架中$this->load->library()用法分析
2016/05/18 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
Python深入学习之对象的属性
2014/08/31 Python
Python模拟登录12306的方法
2014/12/30 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
德国综合购物网站:OTTO
2018/11/13 全球购物
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
视光学专业毕业生推荐信
2013/10/28 职场文书
大学自我鉴定范文
2013/12/26 职场文书
幼儿园义卖活动方案
2014/01/17 职场文书
大学新生入学教育方案
2014/05/16 职场文书
水利水电专业自荐信
2014/07/08 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书