JavaScript的深拷贝
javaScript的拷贝有浅拷贝和深拷贝。拷贝我们一般拷贝对象,获取对象的内容(字段、函数)都给复制一遍
浅拷贝:一般只是简单的赋值
//浅拷贝
var obj1={name:"cat"};
var obj2=obj1;//直接赋值给obj2
obj2.name="pig";//修改
console.log(obj1.name); // pig
console.log(obj2.name); // pig
//obj2与obj1所应用的是同一个对象,只是简单复制对象内容
console.log(obj1 === obj2);//true
由上可知这种直接赋值式的浅复制是复制了同一个内存地址,所以有一个修改了其他也会被修改,因为它们同在一个地址里面。
深拷贝:复制对象的内容创建一个新的对象内容
//深拷贝1、利用 JSON 对象中的 parse 和 stringify
var obj3 = {
name: "cat",
show:function(){
console.log(this.name);
}
};
var obj4 = JSON.parse(JSON.stringify(obj3));
obj4.name = "pig";
console.log(obj3.name); // cat
console.log(obj4.name); // pig
obj3.show();//cat
//obj4.show(); //函数被丢失,出错
但是我们函数对象没有复制过来,它出错了。为了解决这种问题,我们又有了另外一种深复制——利用递归
递归方法:
//递归方法,进行深拷贝
function deepClone(obj) {
//传进来的参数如果是数组选择[],如果不是数组选择{}
let objClone = Array.isArray(obj) ? [] : {};
//判断传进来的是不是object类型,如果是基本类型就直接返回。
if(obj && typeof obj === "object") {
for(key in obj) {//枚举遍历
if(obj.hasOwnProperty(key)) {//判断obj是否有该名称的属性或对象
//判断ojb子元素是否为对象,如果是,递归复制
if(obj[key] && typeof obj[key] === "object") {
objClone[key] = deepClone(obj[key]);
} else {//当递归到子元素不是对象时、简单复制
//如果不是,简单复制
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
我们直接调用这个 递归函数就可以进行深拷贝了
var obj5 = {
name: "cat",
show: function() {
console.log("名称:"+this.name);
}
};
var obj6 = deepClone(obj5); //调用方法进行复制 obj6.name = "pig"; console.log(obj5.name); // cat
console.log(obj6.name); // pig obj5.show(); // cat
obj6.show(); // pig
JavaScript的深拷贝的更多相关文章
- javascript对象深拷贝,浅拷贝 ,支持数组
javascript对象深拷贝,浅拷贝 ,支持数组 经常看到讨论c#深拷贝,浅拷贝的博客,最近js写的比较多, 所以也来玩玩js的对象拷贝. 下面是维基百科对深浅拷贝的解释: 浅拷贝 One meth ...
- javascript浅拷贝深拷贝理解记录
javascript的深拷贝和浅拷贝问题几乎是面试必问的问题.好记性不如烂笔头,特此来记录一下自己对深拷贝浅拷贝的理解. 顾名思义,拷贝就是copy复制,在js中可以浅而理解为对一个对象或者数组的复制 ...
- JavaScript实现深拷贝(深复制) 面试题
1.两种方法实现深拷贝(深复制) (1)方法一:兼容性好,请仔细看代码(网上大部分代码有Bug) (2)方法二:需要对象满足JSON数据格式.JOSN数据格式:http://www.cnblogs.c ...
- JavaScript中深拷贝实现
JavaScript 中深拷贝实现 拷贝时候涉及到: 1.循环结构 2.判断数组 Array 还是对象 Object 函数实现 /** * 获取满足条件的数组中的第一个元素 * @param ...
- 也来玩玩 javascript对象深拷贝,浅拷贝
经常看到讨论c#深拷贝,浅拷贝的博客,最近js写的比较多, 所以也来玩玩js的对象拷贝. 下面是维基百科对深浅拷贝的解释: 浅拷贝 One method of copying an object is ...
- JavaScript的深拷贝的实现
JavaScript的数据类型 简单数据类型 string number boolean function null undefined 复杂数据类型 String Number Boolean Fu ...
- 【javascript】浅谈javaScript的深拷贝
前言: 最开始意识到深拷贝的重要性是在我使用redux的时候(react + redux), redux的机制要求在reducer中必须返回一个新的对象,而不能对原来的对象做改动,事实上,当时 ...
- JavaScript之深拷贝和浅拷贝
前言 工作中会经常遇到操作数组.对象的情况,你肯定会将原数组.对象进行‘备份’当真正对其操作时发现备份的也发生改变,此时你一脸懵逼,到时是为啥,不是已经备份了么,怎么备份的数组.对象也会发生变化.如果 ...
- javascript浅拷贝深拷贝详解
一.浅拷贝 浅拷贝在现实中最常见的表现在赋值上面,例如 <!DOCTYPE html> <html lang="en"> <head> < ...
- 【javascript】详解javaScript的深拷贝
前言: 最开始意识到深拷贝的重要性是在我使用redux的时候(react + redux), redux的机制要求在reducer中必须返回一个新的对象,而不能对原来的对象做改动,事实上,当时 ...
随机推荐
- Sqlserver2008[索引]
SQL索引有两种:聚集索引.非聚集索引 目的:提高sqlserver 系统的性能,加快数据的查询速度与减少系统的响应时间 注意点:一个表只能有一个聚集索引,但可以有多个非聚集索引 索引的存储机制: 聚 ...
- ERROR: Cannot uninstall 'wrapt'. It is a distutils installed project and thus we cannot accurately determine which files belong to it which would lead to only a partial uninstall.
pip install imagededup 时,报错:Cannot uninstall 'wrapt'. It is a distutils installed project and thus w ...
- 1203 forms组件
目录 昨日内容 多对多三种创建方式 1.全自动 好处 缺点 2.纯手动 好处 缺点 3.半自动through='',through_fields=(外键字段) 好处 缺点 forms组件 1.简单引入 ...
- window.frameElement
地址:MDN web docs 比如有一个iframe的src是xxx.htmframeElement的作用就是在xxx.htm中获得这个引用它的iframe objet这样你就可以在xxx.htm改 ...
- [hdoj6483][莫队+线段树/ST]
A Sequence Game Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
- java.lang.NoClassDefFoundError: org/apache/poi/ss/usermodel/Workbook] with root cause
一.问题描述 使用POI上传excel,本地可正常运行,开发服务器上报错. 二.异常信息如下: 2019-05-05 17:00:22,349 ERROR [http-nio-8080-exec-7] ...
- [CSS] The :empty Pseudo Selector Gotchas
The :empty pseudo selector selects empty elements. We can use this to display useful messages instea ...
- Soda Theme sublime 自定义编辑器主题
1.Soda ThemeSublime Text 3中较为常用的一款自定义编辑器主题,用过的人都说好.Soda Theme包含代码着色.标签.图标,拥有light和dark两种颜色主题便于用户在不同时 ...
- mysql删除完全重复数据保留一条
CREATE TABLE tmp AS (SELECT DISTINCT * FROM oa_organization);--将不重复的数据存入新建临时表tmp DELETE FROM oa_orga ...
- 【luogu1251】餐巾计划问题--网络流建模,费用流
题目描述 一个餐厅在相继的 N 天里,每天需用的餐巾数不尽相同.假设第 iii 天需要 ri块餐巾( i=1,2,...,N).餐厅可以购买新的餐巾,每块餐巾的费用为 p 分;或者把旧餐巾送到快洗部 ...