在JS中对象一般都是传地址,后续修改也会影响原始数据。例如这样。

var a={
b:"b"
}; var c=a;
c.b="c"; console.log(a);
console.log(c);

会发现a.b也变成了"c"。

以下是网上一位高手写的JS实现值复制,独立复制一个对象,避免双向修改。

//值复制
function clone(obj) {
//判断是对象,就进行循环复制
if (typeof obj === 'object' && typeof obj !== 'null') {
// 区分是数组还是对象,创建空的数组或对象
var o = Object.prototype.toString.call(obj).slice(8, -1) === "Array" ? [] : {};
for (var k in obj) {
// 如果属性对应的值为对象,则递归复制
if(typeof obj[k] === 'object' && typeof obj[k] !== 'null'){
o[k] = clone(obj[k])
}else{
o[k] = obj[k];
}
}
}else{ //不为对象,直接把值返回
return obj;
}
return o;
}

上述代码有一个bug,就是针对null的处理,null在js中的类型是object,上述代码会将null复制成{}。根本的问题在于高手在条件“typeof obj === 'object' && typeof obj !== 'null'”的时候做了错误的判断,试想类型是object了肯定类型就不是null了吧。以下是修正后的方法:

//值复制
function clone(obj) {
//判断是对象,就进行循环复制
if (typeof obj === 'object' && obj!=null) {
// 区分是数组还是对象,创建空的数组或对象
var o = Object.prototype.toString.call(obj).slice(8, -1) === "Array" ? [] : {};
for (var k in obj) {
// 如果属性对应的值为对象,则递归复制
if(typeof obj[k] === 'object' && obj[k]!=null){
o[k] = clone(obj[k])
}else{
o[k] = obj[k];
}
}
}else{ //不为对象,直接把值返回
return obj;
}
return o;
}

更多个人技术文章请访问:http://88gis.cn/

JS实现值复制的更多相关文章

  1. js 对象深复制,创建对象和继承

    js 对象深复制,创建对象和继承.主要参考高级编程第三版,总结网上部分资料和自己的代码测试心得.每走一小步,就做一个小结. 1.对象/数组深复制 一般的=号传递的都是对象/数组的引用,如在控制台输入 ...

  2. [置顶] js中如何复制一个对象,如何获取所有属性和属性对应的值

    在js中如何复制一个对象,例如如下一个js对象. 如果知道这个对象的所有属性自然就可以重新new一个,然后对每个属性赋值,就可以做到,但如果不知道呢?如何创建一个内容相同 的对象呢? var obj= ...

  3. Cocos Creator JS web平台复制粘贴代码(亲测可用)

    Cocos Creator JS web平台复制粘贴代码(亲测可用) 1 webCopyString: function(str){ var input = str; const el = docum ...

  4. js 将内容复制到剪贴板

      js 将内容复制到剪贴板 CreationTime--2018年7月1日15点06分 Author:Marydon function copyToClipboard(txt) { if(windo ...

  5. Python脚本实现值更新事件赋值过程记录日志监控

    #LogWatch 实现值更新事件赋值过程记录日志监控 clr.AddReference('System') clr.AddReference('Kingdee.BOS') clr.AddRefere ...

  6. ZeroClipboard / jquery.zclip.min.js跨浏览器复制插件使用中遇到的问题解决

    之前写过一个淘宝优惠券连接PC端转手机端连接的小工具,当时写到将转换好的url复制到剪切板这块时解决了IE和火狐,就是没办法搞定Chrome,知道可以通过flash搞定,但是觉得太麻烦没有仔细研究. ...

  7. js 点击复制内容

    <textarea id="pushUrlsTxt" rows="5" cols="55"></textarea> ...

  8. JS 点击复制Copy (share)

    分享自:http://www.cnblogs.com/athens/archive/2013/01/16/2862981.html 1.实现点击按钮,复制文本框中的的内容 1 <script t ...

  9. js禁止页面复制 禁用页面右键菜单的代码

    js实现禁止页面复制功能.禁用页面右键菜单等功能.  <body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制 ...

随机推荐

  1. Oracle物化视图的一般使用

    普通视图和物化视图根本就不是一个东西,说区别都是硬拼到一起的,首先明白基本概念,普通视图是不存储任何数据的,他只有定义,在查询中是转换为对应的定义SQL去查询,而物化视图是将数据转换为一个表,实际存储 ...

  2. canvas里调用getImageData的报security的问题

    canvas元素支持绘制任意图片元素: var ctx = document.getElementById("canvas").getContext("2d") ...

  3. HDU1232 畅通工程 2017-04-12 19:20 53人阅读 评论(0) 收藏

    畅通工程 Time Limit : 4000/2000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submissi ...

  4. 修改VS中的附加依赖项的继承值

    工程用不到的库,想去都去不掉,一直链接错误... 解决方法:打开vs的“属性管理器”窗口.通过这个窗口就可以对里面的继承值进行编辑了 另,“属性管理器”这个窗口,一般在“其他窗口”选项里(至少VS20 ...

  5. Python学习-6.Python的分支语句

    Python的分支语句比较简单,只有if.else.elif三个关键字,也就是说,Python没有switch语句,而且,Python中并没有?:这个三目运算符. 例子: age = 18 if ag ...

  6. ajax 的前进 后退 问题 jquery.history

    本文的前提是基于后台的,所以这里不会考虑seo的问题.同时,基于后台的管理系统,也不需要被收藏,所以也不会考虑刷新的这种类似直接敲网址的情况!!! 这里使用的是html5中的history.state ...

  7. Java Web系列:Hibernate 基础

    从以下5个方面学习hibernate ORM. (1)配置文件:hibernate.cfg.xml XML文件和hibernate.properties属性文件 (2)实体映射:1对多.多对多 (3) ...

  8. windows通过命令方式解压zip文件

    1.需要下载unzip 地址:http://gnuwin32.sourceforge.net/packages/unzip.htm 下载exe版本 2.安装后将bin目录下的unzip.exe文件放在 ...

  9. ajax 与 form 提交的区别

    有如下几种区别: 1. Ajax在提交.请求.接收时,都是异步进行的,网页不需要刷新:Form提交则是新建一个页面,哪怕是提交给自己本身的页面,也是需要刷新的: 2. A在提交时,是在后台新建一个请求 ...

  10. 1、ASP.NET Core2.0之Model、View、Controller

    一.新建空项目 打开VS2017,新建→项目,选择如下: 点击,确定,弹出的界面选择如下: 选择空项目,因为选择其他的话会自动生成很多用不到的类,显得项目不够“清爽”,ASP.NET Core选择2. ...