今天小编和大家一起探讨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深拷贝与浅拷贝的更多相关文章

  1. 读懂javascript深拷贝与浅拷贝

    1. 认识深拷贝和浅拷贝 javascript中一般有按值传递和按引用传递两种复制,按值传递的是基本数据类型(Number,String,Boolean,Null,Undefined),一般存放于内存 ...

  2. js中的深拷贝与浅拷贝

    对象的深拷贝于浅拷贝 对于基本类型,浅拷贝过程就是对值的复制,这个过程会开辟出一个新的内存空间,将值复制到新的内存空间.而对于引用类型来书,浅拷贝过程就是对指针的复制,这个过程并没有开辟新的堆内存空间 ...

  3. JS 数据类型、赋值、深拷贝和浅拷贝

    js 数据类型 六种 基本数据类型: Boolean. 布尔值,true 和 false. null. 一个表明 null 值的特殊关键字. JavaScript 是大小写敏感的,因此 null 与 ...

  4. javascript对象和数组之 深拷贝和浅拷贝

    管是在面试中还是我们的项目中经常会用到数组或者对象的深拷贝,下面我就自己总结的分享给大家. 首先要知道什么是深拷贝?什么是浅拷贝? 深拷贝:源对象与拷贝对象互相独立,其中任何一个对象的改动都不会对另外 ...

  5. JavaScript的深拷贝和浅拷贝总结

    深拷贝和浅拷贝 深拷贝:拷贝实例:浅拷贝:拷贝引用(原对象). 说深拷贝和浅拷贝之前,我先去了解了下高程书上的JavaScript的变量类型: 基本类型:undefined.null.Boolean. ...

  6. 探究JS中对象的深拷贝和浅拷贝

    深拷贝和浅拷贝的区别 在讲深拷贝和浅拷贝的区别之前,回想一下我们平时拷贝一个对象时是怎么操作的?是不是像这样? var testObj1 = {a: 1, b:2}, testObj2=testObj ...

  7. JavaScript的深拷贝与浅拷贝

    深拷贝和浅拷贝是在面试中经常遇到的问题.今天在这里总结一下. 深拷贝与浅拷贝的问题,涉及到JavaScript的变量类型,先来说说变量的类型,变量类型包括基本类型和引用类型. 基本类型:Undefin ...

  8. 理解JavaScript中的深拷贝和浅拷贝

    , num2 = num1;console.log(num1) //1console.log(num2) //1num2 = 2; //修改num2console.log(num1) //1conso ...

  9. 详解javascript的深拷贝与浅拷贝

    1. 认识深拷贝和浅拷贝 javascript中一般有按值传递和按引用传递两种复制,按值传递的是基本数据类型(Number,String,Boolean,Null,Undefined),一般存放于内存 ...

随机推荐

  1. C#-Socket(TCP)

    //提示,线程里面不要给控件赋值 LinkSocket.Send(result, length, 0); 自己挂起 private void button1_Click(object sender, ...

  2. 13.PHP_ThinkPHP

    ThinkPHP 先把百度百科上对这个框架的介绍粘贴过来: ThinkPHP是为了简化企业级应用开发和敏捷WEB应用开发而诞生的.最早诞生于2006年初,2007年元旦正式更名为ThinkPHP,并且 ...

  3. [CTF]思维导向图

    [CTF]思维导向图 ---------------来自大佬的CTF思维导向图 Angel_Kitty https://www.cnblogs.com/ECJTUACM-873284962/ 给信息安 ...

  4. 网络原理常用CMD命令字

    1. 运行"ipconfig/all"命令,将命令运行结果截图贴上来,并指出本机IP地址和网关IP 2. 运行"ping"命令,目标参数分别是 邻居IP.com ...

  5. ATK&CK红队评估实战靶场 (一)的搭建和模拟攻击过程全过程

    介绍及环境搭建 靶机地址:http://vulnstack.qiyuanxuetang.net/vuln/detail/2 官方靶机说明: 红队实战系列,主要以真实企业环境为实例搭建一系列靶场,通过练 ...

  6. Zookeeper详细使用解析!分布式架构中的协调服务框架最佳选型实践

    Zookeeper概念 Zookeeper是分布式协调服务,用于管理大型主机,在分布式环境中协调和管理服务是很复杂的过程,Zookeeper通过简单的架构和API解决了这个问题 Zookeeper实现 ...

  7. SQLFlow数据流分析工具的job功能介绍

    SQLFlow是一款专业的数据血缘关系分析工具,在大型数据仓库中,完整的数据血缘关系可以用来进行数据溯源.表和字段变更的影响分析.数据合规性的证明.数据质量的检查等. 一.SQLFlow 是怎样工作的 ...

  8. Envoy :V3APi 开启 TLS

    方案架构 本次实例与官方Envoy front_proxy Example相似,首先会有一个Envoy单独运行.ingress的工作是给其他地方提供一个入口.来自外部的传入连接请求到这里,前端代理将会 ...

  9. Chm文件阅读软件测试需求

    转发: .Chm文件阅读软件测试需求 . xchm问题太多就不考虑了: kchm是问题少一些 windows打开是乱码就不去考虑 必须在windows打开正常的再在龙芯上打开 1windows打开是乱 ...

  10. DOCKER学习_015:Docker网络补充

    1 Docker容器使用LINK方式互通 在前面的网络实验中,当同一主机的两个Docker容器,使用Bridge网桥互通时,我们必须使用docker inspect Dockerid查找出Docker ...