手动遍历对象拷贝

/**
* 深拷贝
* @param {*} obj 拷贝对象(object or array)
* @param {*} cache 缓存数组
*/
function deepCopy (obj, cache = []) {
// typeof [] => 'object'
// typeof {} => 'object'
if (obj === null || typeof obj !== 'object') {
return obj
}
// 如果传入的对象与缓存的相等, 则递归结束, 这样防止循环
/**
* 类似下面这种
* var a = {b:1}
* a.c = a
* 资料: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value
*/
const hit = cache.filter(c => c.original === obj)[0]
if (hit) {
return hit.copy
} const copy = Array.isArray(obj) ? [] : {}
// 将copy首先放入cache, 因为我们需要在递归deepCopy的时候引用它
cache.push({
original: obj,
copy
})
Object.keys(obj).forEach(key => {
copy[key] = deepCopy(obj[key], cache)
}) return copy
}

使用JSON模块

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

测试例子:

var test={
a:"ss",
b:"dd",
c:[
{dd:"css",ee:"cdd"},
{mm:"ff",nn:"ee"}
]
};
var test1 = JSON.parse(JSON.stringify(test));//拷贝数组,注意这行的拷贝方法
console.log(test);
console.log(test1);
test1.c[0].dd="change"; //改变test1的c属性对象的d属性
console.log(test); //不影响test
console.log(test1);

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

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

<!--[if lt IE 7]>
<script src="具体放路径/json2.js"></script>
<![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. APP项目下载及运行

    1.首先下载Git 2.再下载安装node.js 3.dos窗口下载node.js依赖jar包 执行命令:npm install 4.从Git上down项目 5.运行项目 在项目根目录下 右键 打开 ...

  2. 【音乐欣赏】《Forget》 - The Tech Thieves

    曲名:Forget 作者:The Tech Thieves [00:00.000] 作曲 : Mark Emmanuel/Alia May Plesa-Topham [00:01.000] 作词 : ...

  3. Go_Json序列化

    1. json介绍 2. json格式说明 3. json序列化 3.1 结构体序列化 package main import ( "fmt" "encoding/jso ...

  4. 为什么安装了淘宝镜像,永用cnpm安装依赖包会报错,而用npm就不会?报错:cnpm : 无法加载文件 C:\Users\93457\AppData\Roaming\npm\cnpm.ps1。。。。

    cnpm - 解决 " cnpm : 无法加载文件 C:\Users\93457\AppData\Roaming\npm\cnpm.ps1,因为在此系统上禁止运行脚本.有关详细信息 ... ...

  5. 基于Aspectj表达式配置的Spring AOP

    AOP(Aspect-Oriented Programming, 面向切面编程):是一种新的方法论, 是对传统OOP(Object-Oriented Programming, 面向对象编程)的补充. ...

  6. Markdown编辑器软件安装及问题处理

    一.Markdown简介 MarkdownPad是Windows下的一个多功能Markdown编辑器 Markdown是一门编辑语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式,可以用来对 ...

  7. Springmvc-crud-07(springmvc标签错误)

    错误:springmvc标签错误 原因:1.在springmvc中的form标签中没有绑定modelAttribute属性 2.必须要获取到参数(可以创建map对象,进行存储参数,再用modelAtt ...

  8. Raid5(五块磁盘,三块做raid,两块做备份)

    1.在虚拟中再添加五块磁盘.  2.使用mdadm命令创建raid5,名称为“/dev/md5”. -C代表创建操作,-v显示创建过程,-a yes检查RAID名称,-n是用到的硬盘个数,-l是定义R ...

  9. SDNU_ACM_ICPC_2020_Winter_Practice_2nd

    A - [The__Flash]的矩阵 给你一个m×n的整数矩阵,在上面找一个x×y的子矩阵,使子矩阵中所有元素的和最大. Input输入数据的第一行为一个正整数T,表示有T组测试数据.每一组测试数据 ...

  10. 分布式事务 --- CAP 理论

    本文部分来自参考资料!!半原创 概述 介绍CAP理论,并简单地证明了三存二的定论. CAP 理论 1998年,加州大学的计算机科学家 Eric Brewer 提出,分布式系统有三个指标.分别为 : C ...