js对象的浅拷贝与深拷贝
浅拷贝和深拷贝都是对于JS中的引用类型而言的,浅拷贝就只是复制对象的引用(堆和栈的关系,原始(基本)类型Undefined,Null,Boolean,Number和String是存入堆,直接引用,object array 则是存入桟中,只用一个指针来引用值,如果拷贝后的对象发生变化,原对象也会发生变化。只有深拷贝才是真正地对对象的拷贝。
1、浅拷贝
默认是浅拷贝,只是将地址进行了复制,示例如下:
//浅拷贝
var obj1={name:"cat"};
var obj2=obj1; obj2.name="pig"; console.log(obj1.name);
console.log(obj2.name);
结果:pig

2、深拷贝
深拷贝就是对目标的完全拷贝,不像浅拷贝那样只是复制了一层引用,就连值也都复制了。
只要进行了深拷贝,不会相互影响。
方法一:利用 JSON 对象中的 parse 和 stringify;
注:如果对象中含有一个函数时(很常见),就不能用这个方法进行深拷贝
var obj1 = {
name: "cat",
show:function(){
console.log(this.name);
}
};
var obj2 = JSON.parse(JSON.stringify(obj1));
obj2.name = "pig";
console.log(obj1.name);
console.log(obj2.name);
obj1.show();
obj2.show(); //函数被丢失
方法二:利用递归来实现每一层都重新创建对象并赋值
//对象
var obj1 = {
name: "cat",
show:function(){
console.log(this.name);
}
}; //这种深拷贝函数不会丢失
function deepClone(obj) {
let objClone = Array.isArray(obj) ? [] : {};
if(obj && typeof obj === "object") {
for(key in obj) {
if(obj.hasOwnProperty(key)) {
//判断ojb子元素是否为对象,如果是,递归复制
if(obj[key] && typeof obj[key] === "object") {
objClone[key] = deepClone(obj[key]);
} else {
//如果不是,简单复制
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
var obj3=deepClone(obj1);
//输出cat
obj3.show();
js对象的浅拷贝与深拷贝的更多相关文章
- JS数组和对象的浅拷贝和深拷贝
共勉~ 在许多编程语言中,传递参数和赋值是通过值的直接复制或者引用复制完成的.在JavaScript中,对于值是直接进行复制还是引用复制在语法上是没有区别的,完全是根据值的类型来决定的. 在JavaS ...
- js 数组的浅拷贝和深拷贝
1.背景介绍 javascript分原始类型与引用类型.Array是引用类型,直接用"="号赋值的话,只是把源数组的地址(或叫指针)赋值给目的数组,指向的是同一个内存地址,其中一个 ...
- js中的浅拷贝和深拷贝
说说最近所学:浅拷贝和深拷贝也叫做浅克隆和深克隆,深浅主要针对的是对象的"深度",常见的对象都是"浅"的,也就是对象里的属性就是单个的属性,而"深&q ...
- 浅谈JS中的浅拷贝与深拷贝
前端工程师应该都比较熟悉浅拷贝和深拷贝的概念,在日常业务代码的过程中,特别是做数据处理的时候,经常行的会遇到,比如如何在不修改原对象的基础上,重新生成一个一模一样的对象,加以利用,又或是,如何巧妙地运 ...
- Java对象的浅拷贝和深拷贝&&String类型的赋值
Java中的数据类型分为基本数据类型和引用数据类型.对于这两种数据类型,在进行赋值操作.方法传参或返回值时,会有值传递和引用(地址)传递的差别. 浅拷贝(Shallow Copy): ①对于数据类型是 ...
- Python中的可变对象与不可变对象、浅拷贝与深拷贝
Python中的对象分为可变与不可变,有必要了解一下,这会影响到python对象的赋值与拷贝.而拷贝也有深浅之别. 不可变对象 简单说就是某个对象存放在内存中,这块内存中的值是不能改变的,变量指向这块 ...
- JS中的浅拷贝与深拷贝
浅拷贝与深拷贝的区别: 浅拷贝: 对基本类型和引用类型只进行值的拷贝,即,拷贝引用对象的时候,只对引用对象的内存地址拷贝,新旧引用属性指向同一个对象,修改任意一个都会影响所有引用当前对象的变量. 深拷 ...
- js中值的基本类型与引用类型,以及对象引用,对象的浅拷贝与深拷贝
js有两种类型的值:栈:原始数据类型(undefinen,null,boolead,number,string)堆:引用数据类型(对象,函数和数组)两种类型的区别是:储存位置不同,原始数据类型直接存储 ...
- 面试题常考&必考之--js中的对象的浅拷贝和深拷贝(克隆,复制)(下)
这里主要是讲深拷贝: 深拷贝:个人理解就是拷贝所有的层级 1.像对象里再放数组和对象这些叫引用值.开始我们先判断大对象中是否有引用值(数组和小对象), 然后在判断引用值是数组还是对象 2.开始啦: 1 ...
随机推荐
- Flex 和 Bison 使用方法
背景知识 在学编译原理的时候,同时在做南京大学的编译原理课程实验,这里是链接,整个实验的效果是实现一个完整的 C-- 语法的编译器.C-- 语法是他们老师指定的一种类 C 语言. Flex 和 Bis ...
- 如何实现一个MVVM
说一说我对于mvvm模型的理解吧 我第一次接触mvvm也是在学习vue的时候,在我看来vue和react都是数据驱动视图,但是vue属于标准的mvvm模型,react是从组件化演变而来 不多废话,直接 ...
- Can't connect to MySQL server on 'localhost' (10061),连接Navicat报错问题解决
今天,装了Mysql 1.1.7后,连接Navicat 时报错,后来找了一阵,发现问题所在. 原因是我在安装时把默认端口号3306修改成了3303, 连接时,把默认端口也修改下就好啦.
- vue proxyTable代理 解决开发环境的跨域问题
如果我们项目请求的地址为 htttp://xxxx.com/a/b/c 可以设置代理为: dev:{ assetsSubDirectory: 'static',// 静态资源文件夹 assetsPub ...
- CSP-S 46 题解
改完题了,就稍写一下题解,顺便反思一下! 其实这次考试挺水的,然而我也挺水的,看了考试结束后的成绩,就吃-*了! T1 set 这个我考试的时候实在是没有想到如何去判断-1,然后我就觉得这神仙题没法解 ...
- [转载]2.7 UiPath Flowchart的介绍和使用
一.Flowchart的介绍 用于更复杂的业务逻辑. 与序列不同的是, 流程图提供了多个分支逻辑运算符, 可以使用流程图创建复杂的业务流程并以多种方式连接每个活动. 二.在UiPath 使用Flowc ...
- 微信小程序云开发获取文件夹下所有文件
上周一个高中同学让我帮他做个图片展示的公众号,因为一直在加班的原因,所以一时忘了,昨晚想起来就赶紧加班加点的帮他弄了下,遇到了个问题,记录一下. 他的需求是要有个后台给他上传图片并且将图片归类,前端公 ...
- Microsoft Visual C++ 14.0 is required问题解决
当我们在windows下安装包或者软件时会出现: Microsoft Visual C++ b'v14.0 is required 错误解决办法 直接下载安装visualstudio: https:/ ...
- docker项目——搭建飞机大战小游戏
项目2:搭建打飞机小游戏,验证数据持久化(最底下有链接) 第一步:拉取镜像 [root@localhost docker-image]# docker load < httpd_img.tar. ...
- PHP 从另一个角度来分析 Laravel 框架的依赖注入功能
从根本上说,依赖注入不是让对象创建一个依赖关系,也不是让工厂对象去创建对象,而是将所需的依赖变成一个外部对象,使之成为一个"某些人的问题” 你为"某些人的问题”注入了类的依赖关系. ...