今天小编和大家一起探讨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/c++ 指针数组 和 数组指针

    看这个标题都要晕了,我们不妨把他拆开来理解,比较容易 指针数组:对象是一个数组,数组元素的类型是指针 指针数组的定义方式: 类型名 *数组名[数组长度]; 如: int *p[8]; 数组指针:对象是 ...

  2. 18张图带你入门最新版JumpServer

    环境要求 docker-ce Python3+ mysql5.6+ Redis 1 Ubuntu 安装 docker-ce 环境 参考文档 https://docs.docker.com/engine ...

  3. Github镜像网站

    https://hub.fastgit.org

  4. [基本运算符、流程控制之if判断、与用户交互、深浅拷贝]

    [基本运算符.流程控制之if判断.与用户交互] 基本运算符 1.算数运算符 python支持的算术运算符与数学上计算的符号使用是一致的 salary = 3.3 res = salary * 12 p ...

  5. 磁盘IO过高时的处理办法 针对系统中磁盘IO负载过高的指导性操作

    磁盘IO过高时的处理办法 针对系统中磁盘IO负载过高的指导性操作 主要命令:echo deadline > /sys/block/sda/queue/scheduler 注:以下的内容仅是提供参 ...

  6. 2.Python入门-计算机组成、指令和程序、标识符、变量、数据类型、对象和变量关系、运算符

    一.计算机的组成 计算机由两部分组成:硬件 和 软件 硬件包含:键盘.鼠标.显示器.CPU.主板.内存.硬盘 ... -硬件是看的见摸得着的 软件包含:系统软件(windows.macOS.Linux ...

  7. Docker存储(4)

    一.docker存储资源类型 用户在使用 Docker 的过程中,势必需要查看容器内应用产生的数据,或者需要将容器内数据进行备份,甚至多个容器之间进行数据共享,这必然会涉及到容器的数据管理 (1)Da ...

  8. 云计算OpenStack核心组件---horizon Web管理界面(9)

    一.horizon介绍 Horizon 为 Openstack 提供一个 WEB 前端的管理界面 (UI 服务 )通过 Horizone 所提供的 DashBoard 服务 , 管理员可以使用通过 W ...

  9. Scala 字符串插值器

    Scala 提供了三种创新的字符串插值方法:s,f和raw,使用他们我们可以方便快捷的组合字符串. s 字符串插值器 在任何字符串前加上s,就可以直接在串中使用变量了,在生成字符串的时候会隐式调用其t ...

  10. Java public 和 private 访问修饰符

    何为封装 从事面向对象编程的 Java 程序员,不可能不知道封装,它是面向对象编程的精髓,非常重要. 那什么是封装?字面意思就是把摆在外面的东西包起来. 一句话,封装就是对外隐藏内部细节. 那为何要封 ...