Jquery $.extend的重载方法详述
1 $.extend(result,item1,item2,item3,........) -这个重载方法主要是用来合并,将所有的参数都合并到result中,并返回result,但是这样会破坏result的结构.代码展示:
$(function () {
var p1 = { name: "张三", age: 16, sex: "男" };
var p2 = { name: "李四", age: 22, sex: "女" };
var p3 = { name: "王五", age: 23, sex: "gay", height: "175cm" };
$.extend(p2, p3);
var tr = "<tr><td>" + p2.name + "</td><td>" + p2.age + "</td><td>" + p2.sex + "</td><td>" + p2.height + "</td></tr>";
$('.table').append(tr);
});
结果为:王五 23 gay 175cm 从结果进行分析两者的结果进行了合并,相同属性结果为最后一个参数的属性值为准。不相同的进行合并,最后返回的p2结果集结构上(多了heigth属性)发生了改变。
2.$.extend({},result,item1,item2,item3,........) -这个方法将合并之后的结果集存到了{}中,并返回,且不会破坏进行合并的两个集合的结构。
$(function () {
var p2 = { name: "李四", age: 22, sex: "女" };
var p3 = { name: "王五", age: 23, sex: "gay", height: "175cm" };
var result=$.extend({},p2, p3);
var tr = "<tr><td>" + result.name + "</td><td>" + result.age + "</td><td>" + result.sex + "</td><td>" + result.height + "</td></tr>";
$('.table').append(tr);
});
结果为:王五 23 gay 175cm 从结果进行分析两者的结果进行了合并,相同属性结果为最后一个参数的属性值为准。不相同的进行合并,最终生成{}集合,此时的p2结果集结构并没有发生改变。
观察上面的结果发现
3.$.extend(bool,{},result,item1,item2,item3,........) -这种情况常用于嵌套集合
当bool值为true时,两个集合之间的合并为深合并,因为p1,p2两个集合中的adress属性相同,但是adress还拥有子属性(而且两个集合的adress属性的子属性还不相同所以里面的子属性也按照外面的属性合并方法进行合并)这样的合并叫做深度合并 -前提是当bool值为true时。
$(function () {
var p2 = { name: "李四", age: 22, sex: "女",address:{ provice:"浙江",city:"湖州"} };
var p3 = { name: "王五", age: 23, sex: "gay", height: "175cm",address:{city:"杭州"} };
var result=$.extend(true,{},p2, p3);
var tr = "<tr><td>" + result.name + "</td><td>" + result.age + "</td><td>" + result.sex + "</td><td>" + result.height + "</td><td>" + result.address.provice + "</td><td>" + result.address.city + "</td></tr>";
$('.table').append(tr);
});
结果为:王五 23 gay 175cm 浙江 杭州
当bool值为false时,两个集合之间的合并叫做浅合并,因为p2,p3两个集合中的adress属性相同,但是此时的adress还用子属性(而且两个adress属性的子属性还不相同)因为bool值为false,所有合并只进行到adress属性级别,他的子属性不进行合并。代码如下:
$(function () {
var p2 = { name: "李四", age: 22, sex: "女",address:{ provice:"浙江",city:"湖州"} };
var p3 = { name: "王五", age: 23, sex: "gay", height: "175cm",address:{city:"杭州"} };
var result=$.extend(false,{},p2, p3);
var tr = "<tr><td>" + result.name + "</td><td>" + result.age + "</td><td>" + result.sex + "</td><td>" + result.height + "</td><td>" + result.address.provice + "</td><td>" + result.address.city + "</td></tr>";
$('.table').append(tr);
});
结果如下:王五 23 gay 175cm undefined 杭州 -即p3集合的adress属性直接吧p2集合的adress属性覆盖掉了。
- Asp.Net4.0/VS2010新变化(6):内置的图表控件
- Asp.Net4.0/VS2010新变化(5):可扩展的(分布式)缓存
- Pandas对行情数据的预处理
- 上市公司*ST华泽官网打不开,域名已被挂出售卖
- Asp.Net4.0/VS2010新变化(4):SEO的改进
- Pandas DataFrame笔记
- 让控件填满整个页面
- 用多个类别来进行微调
- Asp.Net4.0/VS2010新变化(2):网站自动预热
- Asp.Net4.0/VS2010新变化(1):web.config与publish
- 任天堂将推出Nintendo Labo 域名保护意识墙
- 表格效果
- ROR学习笔记(2):Asp.Net开发者看ROR
- 图片的javascript延时加载
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- linux系统安装iso文件方法
- xshell 远程登陆CentOS7 免密登陆的思路详解
- Linux服务器下Nginx与Apache共存的实现方法分析
- 浅析Linux中vsftpd服务配置(匿名,用户,虚拟用户)
- CentOS7开启MySQL8主从备份、每日定时全量备份(推荐)
- leetcode栈之用两个栈实现队列
- Ubuntu 18.04通过命令禁用/开启触控板
- 如何利用watch帮你重复执行命令
- Linux查看当前登录用户并踢出用户的命令
- centos7下安装java及环境变量配置技巧
- Ubuntu系统下扩展LVM根目录的方法
- 将宝塔面板linux版装在/www以外的目录的方法
- 详解在Linux下9个有用的touch命令示例
- 一步步教你如何开启、关闭ubuntu防火墙
- Linux环境ActiveMQ部署方法详解