ES6深拷贝与浅拷贝
今天小编和大家一起探讨js中深拷贝和浅拷贝,简单一点理解就是,对于引用数据类型,深拷贝是数据引用地址不同,在改变一个数据的时候,不会影响另一个数据。而浅拷贝刚好相反。两个数据引用的是同一个堆内存地址,一个数据改变的时候,会影响另一个相关的数据。
在之前的章节中,小编提起过关于对象的复制的方法,Object.assign(),但是这个方法只是针对对象的浅拷贝。大家也可以关注我的微信公众号,蜗牛全栈。
let target = {}
let source = {
a:1,
b:2
}
Object.assign(target,source)
console.log(target) // {a:1,b:2}
let target = {}
let source = {
a:{
b:{
c:1
}
},
e:2,
f:3
}
Object.assign(target,source)
console.log(target) // {a:{b:{c:1}},e:2,f:3}
let target = {
a:{
b:{
c:1
}
},
e:4,
f:5,
g:6
}
let source = {
a:{
b:{
c:1
}
},
e:2,
f:3
}
Object.assign(target,source)
console.log(target) // {a:{b:{c:1}},e:2,f:3} // 这里面没有将target中的g属性和值
深拷贝(基本数据类型)
let a = 5
let b = a
a = 6
console.log(a,b) // 6 5
浅拷贝(对象,两个数据相互影响。一个数据内容改变之后会影响另一个数据)
let obj1 = {
name:"lilei",
age:18
}
let obj2 = obj1
console.log(obj1) // {name:"lilei",age:18}
console.log(obj2) // {name:"lilei",age:18}
obj1.age = 30
console.log(obj1) // {name:"lilei",age:30}
console.log(obj2) // {name:"lilei",age:30}
深拷贝(对象)
方式一:
let obj1 = {
name:"lilei",
age:18
} let str = JSON.stringify(obj1)
let obj2 = JSON.parse(str) console.log(obj1) // {name:"lilei",age:18}
console.log(obj2) // {name:"lilei",age:18}
obj1.age = 30
console.log(obj1) // {name:"lilei",age:30}
console.log(obj2) // {name:"lilei",age:18}
方式二:
// 判断数据类型
let checkType = data => {
let t = Object.prototype.toString.call(data).slice(8,-1)
return t
}
// 只考虑对象和数组还有基本数据类型的深拷贝
let deepClone = target => {
let targetType = checkType(target)
let result
if(targetType === "Object"){
result = {}
}else if(targetType === "Array"){
result = []
}else{
return target
}
for(let i in target){
let value = target[i] // 每个属性对应的值
// 兼容引用数据类型中还存在引用数据类型的情况
let valueType = checkType(value)
if(valueType === "Object" || valueType === "Array"){
result[i] = deepClone(value) // 递归
}else{
result[i] = value
}
}
return result
}
附加:
一、JSON:JSON本质就是字符串,对象键不用引号,JSON需要用引号
JSON.stringify(obj) // 将对象转换成JSON格式字符串
JSON.parse(obj) // 将JSON字符串转换成对象
二、typeof只能判断基本数据类型,不能判断引用数据类型,比如对象和数组,返回的都是Object。可以用以下方式处理
let checkType = data => {
let t = Object.prototype.toString.call(data)
// let t = Object.prototype.toString.call(data).slice(8,-1) 截取对应数据类型,比如Object和Array
console.log(t)
}
checkType({}) // [Object Object]
checkType([]) // [Object Array]
ES6深拷贝与浅拷贝的更多相关文章
- 读懂javascript深拷贝与浅拷贝
1. 认识深拷贝和浅拷贝 javascript中一般有按值传递和按引用传递两种复制,按值传递的是基本数据类型(Number,String,Boolean,Null,Undefined),一般存放于内存 ...
- js中的深拷贝与浅拷贝
对象的深拷贝于浅拷贝 对于基本类型,浅拷贝过程就是对值的复制,这个过程会开辟出一个新的内存空间,将值复制到新的内存空间.而对于引用类型来书,浅拷贝过程就是对指针的复制,这个过程并没有开辟新的堆内存空间 ...
- JS 数据类型、赋值、深拷贝和浅拷贝
js 数据类型 六种 基本数据类型: Boolean. 布尔值,true 和 false. null. 一个表明 null 值的特殊关键字. JavaScript 是大小写敏感的,因此 null 与 ...
- javascript对象和数组之 深拷贝和浅拷贝
管是在面试中还是我们的项目中经常会用到数组或者对象的深拷贝,下面我就自己总结的分享给大家. 首先要知道什么是深拷贝?什么是浅拷贝? 深拷贝:源对象与拷贝对象互相独立,其中任何一个对象的改动都不会对另外 ...
- JavaScript的深拷贝和浅拷贝总结
深拷贝和浅拷贝 深拷贝:拷贝实例:浅拷贝:拷贝引用(原对象). 说深拷贝和浅拷贝之前,我先去了解了下高程书上的JavaScript的变量类型: 基本类型:undefined.null.Boolean. ...
- 探究JS中对象的深拷贝和浅拷贝
深拷贝和浅拷贝的区别 在讲深拷贝和浅拷贝的区别之前,回想一下我们平时拷贝一个对象时是怎么操作的?是不是像这样? var testObj1 = {a: 1, b:2}, testObj2=testObj ...
- JavaScript的深拷贝与浅拷贝
深拷贝和浅拷贝是在面试中经常遇到的问题.今天在这里总结一下. 深拷贝与浅拷贝的问题,涉及到JavaScript的变量类型,先来说说变量的类型,变量类型包括基本类型和引用类型. 基本类型:Undefin ...
- 理解JavaScript中的深拷贝和浅拷贝
, num2 = num1;console.log(num1) //1console.log(num2) //1num2 = 2; //修改num2console.log(num1) //1conso ...
- 详解javascript的深拷贝与浅拷贝
1. 认识深拷贝和浅拷贝 javascript中一般有按值传递和按引用传递两种复制,按值传递的是基本数据类型(Number,String,Boolean,Null,Undefined),一般存放于内存 ...
随机推荐
- ADB调试工具的使用
ADB(Android Debug Bridge)安卓调试桥,ADB工具是可以方便调试安卓应用的工具. ADB的安装 下载ADB工具,解压, 将ADB工具的目录加入系统环境变量中,打开CMD窗口,输入 ...
- flex布局的使用
一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ disp ...
- [Django框架 - 静态文件配置、request对象方法初识、 pycharm链接数据库、ORM实操增删改查、django请求生命周期]
[Django框架 - 静态文件配置.request对象方法初识. pycharm链接数据库.ORM实操增删改查.django请求生命周期] 我们将html文件默认都放在templates文件夹下 将 ...
- .NET平台系列8 .NET Core 各版本新功能
系列目录 [已更新最新开发文章,点击查看详细] .NET Core 自2016年6月27日发布第一个正式版本以来,它主打的跨平台和高性能特效吸引了许多开发者,包括Java.PHP等语言的开发者 ...
- [bug] idea编译后没有xml文件
原因 在maven中build 参考 https://www.cnblogs.com/lewskay/p/6422464.html https://blog.csdn.net/lovequanquqn ...
- [刷题] 349 Intersection of Two Arrays
查找问题 查找有无(只有键) 元素'a'是否存在 set(集合) 查找对应关系(键值对应) 元素'a'出现了几次 map(字典) set和map的底层实现是红黑树 常见操作 insert() find ...
- 获取显卡硬件信息lspci -vnn | grep VGA -A 12
lspci -vnn | grep VGA -A 12 lshw -C display lshw -c video | grep configuration glxinfo | grep OpenGL ...
- Win10屏幕亮度不能调节,调节无效怎么办?
Win10屏幕亮度不能调节,调节无效怎么办? 听语音 浏览:1027 | 更新:2019-11-22 11:43 1 2 3 4 5 6 7 分步阅读 一些用户在使用win10系统之后,出现了电脑屏幕 ...
- 【转载】基于RedHatEnterpriseLinux V7(RHEL7)下SPEC CPU 2006环境搭建以及测试流程(之一)——介绍、安装准备、安装、config文件以及运行脚本介绍
基于RedHatEnterpriseLinux V7(RHEL7)下SPEC CPU 2006环境搭建以及测试流程(之一)--介绍.安装准备.安装.config文件以及运行脚本介绍 其他 2018-0 ...
- keepalived绑定单播地址、非抢占模式及LVS的TCP模式的高可用
背景:keepalived默认是组播地址进行播放,且默认地址是224.0.0.18,如果配置多个keepalived主机,会导致虚拟IP地址存在冲突问题,这种问题怎么解决呢? 解决办法:就是将keep ...