在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. open /etc/docker/certs.d/registry.access.redhat.com/redhat-ca.crt: no such file or directory 解决方案

    方法一.  yum安装 yum install *rhsm* 方法二 (我是用这方法解决的) 执行命令: ①   wget http://mirror.centos.org/centos/7/os/x ...

  2. Kubernetes基本原理与示例

    1. Kubernetes介绍 基本概念 Pod Pod是Kubernetes的基本操作单元,把相关的一个或多个容器构成一个Pod,通常Pod里的容器运行相同的应用.Pod包含的容器运行在同一个Nod ...

  3. LARGE SCALE GAN TRAINING FOR HIGH FIDELITY NATURAL IMAGE SYNTHESIS

    最强GAN图像生成器,真假难辨 论文地址: https://openreview.net/pdf?id=B1xsqj09Fm 更多样本地址: https://drive.google.com/driv ...

  4. Sophus VS2010编译不支持?C++11语法的缘故。那有没有不带C++11特性的Sophus版本呢?

    Eigen:3.1 3.0 Ceres:No Sophus: Sophus支不支持Windows编译?官网写的是通过了Windows的编译的 linux, os x:  windows:  code ...

  5. 对/proc/cpuinfo文件下的各个参数的说明及实践

    我们通常要检查系统的cpu的相关信息,之前在进行查看cpu的信息的时候,我最长用的方式 是,直接将/etc/cpuinfo下的所有的内容进行显示,然后通过对全部文件的查看,来提取我们需要的信息,虽然查 ...

  6. HRBUST1310 火影忍者之~鸣人 2017-03-06 16:01 104人阅读 评论(0) 收藏

    火影忍者之-鸣人 火影忍者的男主角漩涡鸣人,因为身上封印着邪恶的九尾妖狐,无父无母的他受尽了村人的冷眼与歧视,他下定决心要成为第六代火影,让所有人都认同他的存在,火影是动漫火影忍者中主人公鸣人所在的国 ...

  7. nancy中的身份验证

    在nancy中,身份验证分为basic ,form ,token,stateless几种,basic和form这里不说了,其中如果是使用cookie来保存身份的, 需要注意的是:cookie有大小的限 ...

  8. shell脚本参数中有空格

    shell脚本参数中有空格 在shell脚本中如果有空格的处理如下: sh test.sh "hello word" echo $1 得到的是hello,而不是hello word ...

  9. c# 检查报错详细

    catch (DbEntityValidationException error) { string test = string.Empty; foreach (var validationError ...

  10. list<T>集合中的Remove()、RemoveAt()、RemoveRange()、RemoveAll()的用法

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...