在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. Java程序设计19——类的加载和反射-Part-A

    1 本文概要 本章介绍Java类的加载.连接和初始化的深入知识,并重点介绍Java反射相关的内容.本章知识偏底层点,这些运行原理有助于我们更好的把我java程序的运行.而且Java类加载器除了根加载器 ...

  2. asp.net hessian + android hessdroid

    做android开发时你还在为gson,json而人肉序列化与反序列化吗,上传文件时你还在使用UrlConnection或者HttpClient吗?下面提供了asp.net 服务端与 android ...

  3. 【转】java.sql.SQLException: statement is closed语句被关闭 druid连接池报错

    我之前在用druid 1.0.28版本也出现过这个问题, 现象就是: 报这个错的时候, 往往会出现在一条毫无错误的sql执行上报错,  sql放到数据库上执行或者单独拎出来执行完全没问题, 但是为什么 ...

  4. Thrift结构分析及增加取客户端IP功能实现

    目录 目录 1 1. 前言 1 2. 示例Service 1 3. 网络部分类图 2 4. 线程模式 3 4.1. IO线程 3 4.2. 工作线程 4 4.2.1. 工作线程类图 4 4.2.2.  ...

  5. swift 创建UICollectionView

    // //  CollectionViewController.swift //  tab // //  Created by su on 15/12/8. //  Copyright © 2015年 ...

  6. Monocular Visual-Inertial Odometry单目视觉惯性里程计

    Monocular Visual-Inertial Odometry:https://www.qualcomm.com/invention/research 单目视觉-惯性里程计 INDOOR POS ...

  7. 轉:Jquery绑定img的click事件

    用JQUERY给IMG element绑定click事件的时候,直接用img.click(function(){...})不起作用,如下面代码$("img.ms-rteImage-Light ...

  8. Blend 2015 教程 (五) 自定义状态

    本篇再补充一块内容,就是自定义状态的介绍. 自定义状态用于封装用户控件在各种状态之间切换时的外观变化及其动画效果,方便调用.比如有个用户控件用于实现类似舞台幕布打开和关闭切换的效果,可以创建幕布关闭和 ...

  9. 更改JupyterNotebook默认文件路径 行之有效!

    在安装了Anaconda以后浏览器默认打开的是C盘用户目录,平时不想把一些文件.代码放在C盘尤其是用户目录下,所以考虑将默认路径改掉,尝试了网上的几种方法,终于找到了一种可行有效的. 1.找到jupy ...

  10. [Erlang33]使用recon从网页查看Erlang运行状态

    0.需求分析 Erlang最好的卖点之一就是提供了一个非常强大的shell来查看Node运行时的各种状态,可以进行各种各样的内部查看,在运行时调试和分析,热更新代码.   但是总有一些在生产环境下要慎 ...