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 相关文章推荐
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
Node.js之readline模块的使用详解
Mar 25 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 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
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
php中Ctype函数用法详解
2014/12/09 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
python中星号变量的几种特殊用法
2016/09/07 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
python实现广度优先搜索过程解析
2019/10/19 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
预备党员转正思想汇报
2014/01/12 职场文书
企业安全生产承诺书
2014/05/22 职场文书
计算机专业自荐信
2014/05/24 职场文书
私人委托书格式
2014/09/10 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
2015感人爱情寄语
2015/02/26 职场文书
采购部年度工作总结
2015/08/13 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
MySQL派生表联表查询实战过程
2022/03/20 MySQL
python中redis包操作数据库的教程
2022/04/19 Python