手动遍历对象拷贝

  1. /**
  2. * 深拷贝
  3. * @param {*} obj 拷贝对象(object or array)
  4. * @param {*} cache 缓存数组
  5. */
  6. function deepCopy (obj, cache = []) {
  7. // typeof [] => 'object'
  8. // typeof {} => 'object'
  9. if (obj === null || typeof obj !== 'object') {
  10. return obj
  11. }
  12. // 如果传入的对象与缓存的相等, 则递归结束, 这样防止循环
  13. /**
  14. * 类似下面这种
  15. * var a = {b:1}
  16. * a.c = a
  17. * 资料: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value
  18. */
  19. const hit = cache.filter(c => c.original === obj)[0]
  20. if (hit) {
  21. return hit.copy
  22. }
  23. const copy = Array.isArray(obj) ? [] : {}
  24. // 将copy首先放入cache, 因为我们需要在递归deepCopy的时候引用它
  25. cache.push({
  26. original: obj,
  27. copy
  28. })
  29. Object.keys(obj).forEach(key => {
  30. copy[key] = deepCopy(obj[key], cache)
  31. })
  32. return copy
  33. }

使用JSON模块

根据不包含引用对象的普通数组深拷贝得到启发,不拷贝引用对象,拷贝一个字符串会新辟一个新的存储地址,这样就切断了引用对象的指针联系。

测试例子:

  1. var test={
  2. a:"ss",
  3. b:"dd",
  4. c:[
  5. {dd:"css",ee:"cdd"},
  6. {mm:"ff",nn:"ee"}
  7. ]
  8. };
  9. var test1 = JSON.parse(JSON.stringify(test));//拷贝数组,注意这行的拷贝方法
  10. console.log(test);
  11. console.log(test1);
  12. test1.c[0].dd="change"; //改变test1的c属性对象的d属性
  13. console.log(test); //不影响test
  14. console.log(test1);

JSON.parse(),JSON.stringify()兼容性问题

可以通过为IE7以及IE7以下版本的IE浏览器引入json2.js,使用json2.js来解决JSON的兼容性问题

  1. <!--[if lt IE 7]>
  2. <script src="具体放路径/json2.js"></script>
  3. <![endif]-->

json2.js的github地址为:https://github.com/douglascrockford/JSON-js

JS实现对对象的深拷贝的更多相关文章

  1. JS 数组以及对象的深拷贝总结

    javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法 前言 在js中,数组和对象的复制如果使用=号来进行复制,那只是浅拷贝.如下图演示:  如上,arr的修改,会影响arr2的值,这 ...

  2. JS 数组、对象的深拷贝

    博客地址:https://ainyi.com/72 JavaScript 程序中,对于简单的数字.字符串可以通过 = 赋值拷贝 但是对于数组.对象.对象数组的拷贝,就有浅拷贝和深拷贝之分 浅拷贝就是当 ...

  3. js中json对象的深拷贝

    /** * 对象深拷贝 * @param obj */ function deepCopy(obj) { var txt=JSON.stringify(obj); return JSON.parse( ...

  4. JS中有关对象的继承以及实例化、浅拷贝深拷贝的奥秘

    一.属性的归属问题 JS对象中定义的属性和方法如果不是挂在原型链上的方法和属性(直接通过如类似x的方式进行定义)都只是在该对象上,对原型链上的没有影响.对于所有实例共用的方法可直接定义在原型链上这样实 ...

  5. JS中如何进行对象的深拷贝

    在JS中,一般的=号传递的都是对象/数组的引用,并没有真正地拷贝一个对象,那如何进行对象的深度拷贝呢?如果你对此也有疑问,这篇文章或许能够帮助到你 一.对象引用.浅层拷贝与深层拷贝的区别 js的对象引 ...

  6. JS对象复制(深拷贝、浅拷贝)

    如何在 JS 中复制对象 在本文中,我们将从浅拷贝(shallow copy)和深拷贝(deep copy)两个方面,介绍多种 JS 中复制对象的方法. 在开始之前,有一些基础知识值得一提:Javas ...

  7. JS如何进行对象的深克隆(深拷贝)?

    JS中,一般的赋值传递的都是对象/数组的引用,并没有真正的深拷贝一个对象,如何进行对象的深拷贝呢? var a = {name : 'miay'}; var b = a; b.name = 'Jone ...

  8. js对象的深拷贝

    关于对象的深拷贝一直是大家津津乐道一个话题,本骚年通过研究(yuedu)发现还是很easy的. 首推的方法简单有效,JSON.stringfy()和JSON.parse()即可搞定.但是这种简单粗暴的 ...

  9. JS数组和对象的浅拷贝和深拷贝

    共勉~ 在许多编程语言中,传递参数和赋值是通过值的直接复制或者引用复制完成的.在JavaScript中,对于值是直接进行复制还是引用复制在语法上是没有区别的,完全是根据值的类型来决定的. 在JavaS ...

随机推荐

  1. python中的数学类型及操作

    一.概述 整数类型 浮点数类型 复数类型 round()函数 数值运算符 数值运算函数 字符串类型 1.整数类型 整型:用来描述什么:比如身高,体重,年龄等 eg: age=20 height=168 ...

  2. Refusing to install package with name "webpack" under a package

    最近学习webpack 知识时 下载依赖结果报了这个错 查阅资料后发现是 这个name 不能使用所需要安装包的名字! 换为其他之后 再次操作命令 就没问题了

  3. js语言简介

    JS语言概述 JS语言简史 JS语言的起源 网景(Netscape Communication Corperation),1994年,推出第一款商用浏览器,网景浏览器(Netscape Navigat ...

  4. Mybatis plus中一个框多条件查询 SQL拼接

    遇到多条件查询时,只用框架自带的方法搞不定,只能自己写方法拼接 EntityWrapper<YcejShopEntity> wrapper = new EntityWrapper<& ...

  5. Go键盘输入和打印输出

    package main import ( "fmt" "bufio" "os" ) func main() { /* 输入和输出: fmt ...

  6. Innovus 对multibit 的支持

    如果在综合阶段没有做multibit merge, 或综合阶段由于缺失物理信息multibit cell merge 不合理,那就需要PR 工具做multibit merge 或split. Inno ...

  7. Mac配置内网穿透

    闲语: Java开发过程中,往往会对接第三方,而在对接过程中,双方间使用的最多的"通讯"方式就是异步通知.可是异步通知过程中,只能通知到外网地址,可是在调试过程我们都是在本地进行- ...

  8. HTML连载59-子绝父相

    一.子绝父相 1.只使用相对定位,对图片的位置进行精准定位. <!DOCTYPE html> <html lang="en"> <head> & ...

  9. Servlt入门

    Servlt入门 java的两种体系结构 C/S (客户端/服务器)体系结构  通讯效率高且安全,但系统占用多 B/S (浏览器/服务器)体系结构    节约开发成本 C/S (客户端/服务器)体系结 ...

  10. BZOJ 3262: 陌上花开 (cdq分治,三维偏序)

    #include <iostream> #include <stdio.h> #include <algorithm> using namespace std; c ...