对象的深度拓展$.extend(true,{},a,b),深入理解,小心陷阱
转载:https://www.cnblogs.com/DJeanWeb/p/4388689.html
$.extend
一般情景下,使用深度拓展两个对象时,我们想要的效果是,b对象覆盖掉a对象中存在的所有属性,没有则新增到a对象中;
下面我们看一下我所遇到的问题:
我希望通过深度拓展将tmp中的editoption覆盖掉ret中的editoption;所以采用了深度拓展方法 ret = $.extend(true,{},ret,tmp);
但结果并没有达到我想要的效果:
对象属性中的数组长度依然没有发生变化。
通过样例比较发现,数组长度虽然没有发生变化,但是数组前排列在前8位的值发生了改变,也就是是说,变量深度拓展覆盖到了数组的值,而不是覆盖掉整个数组对象。
注意如果直接使用$.extend(a,b)将改变a对象值。注意对象引用引发的神奇bug

因为$.extend(a,b)返回的是将a通过与b融合以后的结果,a对象会被改变。
最后我直接使用$.extend({},a,b)解决此需求:即不改变a,b对象的引用,也返回了我想要的值。
总结:即使简单的方法,也需深入理解,避免潜意识里的认知干扰对事物的判断。
对象的深度拓展$.extend(true,{},a,b),深入理解,小心陷阱的更多相关文章
- jQuery中$.extend(true,object1, object2);深拷贝对象
语法:jQuery.extend( [deep ], target, object1 [, objectN ] ) 深浅拷贝对应的参数就是[deep],是可选的,为true或false.默认情况是fa ...
- 对象拷贝:jQuery extend
今天操作一个Array数组对象,本来想着先取出该数组某一行数据,然后把该数据当作另一份数据进行操作. 结果发现,对该数据操作的同时,也对Array数组进行了修改,因为这个数据指向了array数组对象. ...
- javascript中对数组对象的深度拷贝
在前端开发的某些逻辑中,经常需要对现有的js对象创建副本,避免污染原始数据的情况. 如果是简单的一维数组对象,可以使用两个原生方法: 1.splice var arr1 = ['a', 'b', 'c ...
- Angular2中实现基于TypeScript的对象合并方法:extend()
TypeScript里面没有现成的合并对象的方法,这里借鉴jQuery里的$.extend()方法.写了一个TypeScript的对象合并方法,使用方法和jQuery一样. 部分代码和jQuery代码 ...
- $.extend(true,{},a,b)解析
原文:$.extend(true,{},a,b)解析 版权声明: https://blog.csdn.net/bsfz_2018/article/details/81738437 什么是$.exten ...
- javascript中对象的深度克隆
记录一个常见的面试题,javascript中对象的深度克隆,转载自:http://www.2cto.com/kf/201409/332955.html 今天就聊一下一个常见的笔试.面试题,js中对象的 ...
- JavaScript实现对象的深度克隆及typeof和instanceof【简洁】【分享】
JavaScript实现对象的深度克隆 代码实现如下: <!DOCTYPE html> <html lang="en"> <head> < ...
- 继承 原生js 与 $.extend(true,default,opts||{});
$.extend(true,default,opts||{}); var obj1={ name:'liu', sex:'m', work:'pc' } var obj2={ sex:'w' } va ...
- c#:如何处理对对象进行深度拷贝
/// <summary> /// 对对象进行深度拷贝 /// </summary> /// <param name="obj"></pa ...
随机推荐
- Map 综述(三):彻头彻尾理解 ConcurrentHashMap
https://blog.csdn.net/justloveyou_/article/details/72783008
- Day 24 继承
# 一.什么是继承 # 继承是一种创建新类的方式,在python中,新建的类可以继承一个或多个父类,父类又可成为基类或超类,新建类称为派生类或子类.# python中类的继承分为:单继承和多继承cla ...
- 201621123023《Java程序设计》第5周学习总结
一.本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 接口.interface.comparable.comparator 1.2 尝试使用思维导图将这些关键词组织起来.注:思维导图一 ...
- if判断和switch case 和三元运算符整理
if判断和switch case 和三元运算符整理 例子1:if判断写法: <script type="text/javascript"> var num = 12; ...
- Chrome浏览器插件开发-淘宝自动登录
浏览器插件的介绍 Chrome浏览器插件开发的准备工作 manifest.json配置介绍 页面如何注入scripts文件 一. 浏览器插件的介绍 浏览器插件是一种遵循一定规范的应用程序接口编写出来的 ...
- 什么是Ajax?Ajax的原理是什么?Ajax的核心技术是什么?Ajax的优缺点是什么?
Ajax是一种无需重新加载整个网页,能够更新部分网页的技术.Asynchronous JavaScript and XML的缩写,是JavaScript.XML.CSS.DOM等多个技术的组合. Aj ...
- JS弹出对话框函数alert(),confirm(),prompt()
1,警告消息框alert() alert 方法有一个参数,即希望对用户显示的文本字符串.该字符串不是 HTML 格式.该消息框提供了一个“确定”按钮让用户关闭该消息框,并且该消息框是模式对话框,也就是 ...
- 非对齐访问(unaligned accesses)
从CPU角度看内存访问对齐 结构体成员非对齐访问所带来的思考 ARM体系中存储系统非对齐的存储访问操作 什么是cache line? cache line就是处理器从RAM load/store数据到 ...
- easyUI combobox下拉框很长,easyUI combobox下拉框如何显示滚动条的解决方法
如下图,combobox下拉框里内容很多时,会导致下拉框很长,很不美观. 如何使得combobox下拉框显示滚动条 方法:把属性panelHeight:"auto"注释掉即可. $ ...
- CentOS7启动Tomcat报错:./startup.sh: Permission denied
错误信息:./startup.sh: Permission denied 执行./startup.sh,或者./shutdown.sh的时候, 报:Permission denied,因为是执行tom ...