jquery里使用$.extend()合并对象时的误区,防止程序里数据混乱亲测 原创

文章标签: 对象
  • :
  • 03-24 13:23
  • :
  • 18次
  • :
  • 0条
  • 4赞

简介本文讲的是jquery内置的用来合并对象或数组的函数extend的正确使用方法及实例。l

站长在做一个小程序时,因为要考虑到各种情况下不同的操作,所以用到了对象,把各种属性放到对象里,然后根据对象里的各种属性来展示不同的效果,但在这过程中,莫名其妙的出现了数据混乱的现象。

自己在网上找了很多关于jquery内置函数extend的使用方法,自己也测试了很多遍,这才知道了其中的一个误区。

我们都知道extend函数的语法结构如下:

jQuery.extend([deep], target, object1, [objectN])

所有的帮助手册或教程上,对第一个参数deep的描述是:

deep:如果设为true,则递归合并。

站长在最开始的时候,一直以为这句话的意思是,如果把第一个参数设为true,那么在合并对象的时候,就不会“污染”原对象,这样也不会产生“数据”混乱的情况了。

但是结果却不是这样的!!!不是这样的!!!不是这样的!!!

那么到底什么是“递归合并”呢?其实递归合并针对的是对象里的子对象,如果对象里没有子对象,那么第一个参数设为true,或者不设置,结果都是一样的!

为了让大家更好的明白jquery里内置用来合并对象或数据的函数extend的用法,站长就在这里把每一种情况给大家演示一遍吧,站长嘴笨,有的也说不清楚,直接用实例来演示就更清楚一些:

假设,我们有以下几个对象:

var a1={a1:1,a2:1};
var a2={a1:2,a2:2};
var b1={b1:1,b2:1};
var b2={b1:2,b2:2}

现在我们用$.extend里不同的方法来对上面这几个对象进行合并,

第一种:

var c=$.extend(a1,a2,b1,b2);

然后我们用console.log来看最后的结果,浏览器里按F12后,点console就能看到结果:

上面的结果显示,我们虽然得到了四个对象合并的结果,但是a1对象也被“污染”了,这就是站长我的程序里数据混乱的原因。

第二种:我们加上第一个参数,并设为true:

var c=$.extend(true,a1,a2,b1,b2);

结果如下:

和第一种的结果一模一样,这说明要合并的对象没有子对象时,extend函数的第一个参数设为true根本没用,我们再改成false试下:

第三种:

var c=$.extend(false,a1,a2,b1,b2);

结果如下:

这才是我们要的结果,得到了四个对象合并的结果,并且原来的对象也没有被“污染”。

另外还有一种方法:

第四种:

var c=$.extend({},a1,a2,b1,b2);

结果如下:

和上面的得到的结果一样。

因此,我们如果要得到对象合并的结果,并且还要不污染原来的对象,就要把extend函数的第一个参数设为false,或者{}.


下面我们再来看对象里有子对象时的情况,让你更加明白什么叫“递归”,假设有下面这样的两个对象:

var a={a1:{a:1,b:1,c:1},a2:{a:2,b:2,c:2}};
var b={a1:{a:2,b:2},a2:{a:1,b:1}};

一:我们把extend的第一个参数设置为true:

var c=$.extend(true,a,b);

结果如下:

二:我们再来看把extend的第一个参数设为false时的情况:

var c=$.extend(false,a,b);

对比一下,我们就能看出,当extend的第一个参数设为true时,则子对象里的每一个属性都会“比对”,而如果设为false的话,则直接会用后面对面里的子对象替换前面对象里的子对象,不会对子对象里的属性“比对”。

上面的所有截图都是站长自己亲测的结果,保证百分百的正确,用的jquery库为1.9.1版本的。



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-15 14:47:25