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 jsFiddle JSBin在线调试器
Mar 14 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
详解easyui 切换主题皮肤
Apr 04 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自定文件保存session的方法
2014/12/10 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
IE 下的只读 innerHTML
2009/08/21 Javascript
jquery提升性能最佳实践小结
2010/12/06 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
微信小程序实时聊天WebSocket
2018/07/05 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
Python学习之用pygal画世界地图实例
2017/12/07 Python
python的socket编程入门
2018/01/29 Python
Python使用wxPython实现计算器
2018/01/30 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
利用python计算时间差(返回天数)
2019/09/07 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
几道PHP面试题
2013/04/14 面试题
人事行政经理岗位职责
2014/06/18 职场文书
销售员态度差检讨书
2014/10/26 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
辩论赛新闻稿
2015/07/17 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
Python之matplotlib绘制折线图
2022/04/13 Python