面试遇到的坑JS深拷贝和浅拷贝
首先要搞明白深拷贝和钱拷贝的区别要先搞明白 栈和堆的区别
一、栈
栈存储基础数据类型,如: String、Number、Boolean、Null、Underined,这些简单的基础数据类型能够直接存储在栈中。栈如果没有被使用就会被回收
二、堆
堆存储引用数据类型的是 Function、Array、Object,在栈内存中存储着指向堆的地址和C语言的指针有点像,基本类型在当前执行环境结束时销毁,而引用类型不会随执行环境结束而销毁,只有当所有引用它的变量不存在时这个对象才被垃圾回收机制回收。
三、深拷贝和浅拷贝
function copy(obj){
let result = {}
for(var key in obj){
result[key]=obj[key];
}
return result
}
var oldObj = {name: 'Tom', age: 18, colors:['blue','pink']}
var newObj = copy(oldObj)
上面这个代码 oldObj有两个基本属性 name、age 一个引用数据属性colors,但newObj拷贝后 name,age属性会被正常的拷贝,而colors属性,只会进行引用拷贝,这样会导致oldObj和newObj共用一个colors属性.这样就是所谓的浅拷贝。
const oldObj = {
name: '张三',
age: 20,
colors: ['yellow','orange']
} function deepClone(obj){
if (typeof obj !== 'object' || obj == null){
return obj;
}
let result;
if (obj instanceof Array){
result = []
} else {
result = {}
}
for(var key in obj) {
if (obj.hasOwnProperty(key)){
result[key] = deepClone(obj[key]);
} }
return result;
} const newObj = deepClone(oldObj);
newObj.name = '李四';
newObj.colors[0] = 'pink';
console.log(oldObj)
console.log(newObj)
上面这个代码 result[key] = deepClone(obj[key]); deepClone()的回调函数,是为了拷贝colors里面的数据,
面试遇到的坑JS深拷贝和浅拷贝的更多相关文章
- js 深拷贝和浅拷贝
js 深拷贝和浅拷贝 先举一下项目中遇到的两个例子: 例子1: var json = $.parseJSON(data.data);//data.data是接口返回的值var a = json.cha ...
- 老生常谈之js深拷贝与浅拷贝
前言 经常会在一些网站或博客看到"深克隆","浅克隆"这两个名词,其实这个很好理解,今天我们就在这里分析一下js深拷贝和浅拷贝. 浅拷贝 我们先以一个例子来说明 ...
- 关于JS深拷贝和浅拷贝
最近在前端开发中遇到一些问题,就是数组中的某个对象或某个对象的值改变之后,在不刷新页面的时候需要重新渲染值时,页面显示的还是原来的数据.比如: data{ A:[{id:1,num:1},{id:2, ...
- 在vue中子组件修改props引发的对js深拷贝和浅拷贝的思考
不管是react还是vue,父级组件与子组件的通信都是通过props来实现的,在vue中父组件的props遵循的是单向数据流,用官方的话说就是,父级的props的更新会向下流动到子组件中,反之则不行. ...
- [Python3 填坑] 009 深拷贝与浅拷贝
目录 1. print( 坑的信息 ) 2. 开始填坑 2.1 Python3.7 官方文档 2.2 赋值.切片与 copy() 分析 分析 分析 分析 2.3 copy 模块 分析 分析 2.4 小 ...
- JS 深拷贝和浅拷贝概念,以及实现深拷贝的三种方式
一.理解堆栈,基本数据类型与引用数据类型 1.堆栈 栈(stack):系统自动分配的内存空间,内存会由系统自动释放,用来存放函数的参数值,局部变量的值等,特点是先进后出. 堆(heap):系统动态分配 ...
- [转] js深拷贝和浅拷贝
一.数组的深浅拷贝 在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致 ...
- js深拷贝与浅拷贝
1 基础知识:基本类型与引用类型 JS中可以把变量分成两部分,基本类型和引用类型. 基本类型包括:Undefined.Null.Boolean.Number和String: 引用类型值可能由多个值构成 ...
- js深拷贝、浅拷贝
浅拷贝: 只针对当前对象的属性进行拷贝,若当前对象的属性是引用类型时,这个不考虑,不进行拷贝.若属性是引用类型,拷贝后引用的是地址,如果进行更改,会影响拷贝的原对象属性. 深拷贝:针对当前对象的数据的 ...
随机推荐
- P2089_烤鸡(JAVA语言)
题目背景 猪猪hanke得到了一只鸡 题目描述 猪猪Hanke特别喜欢吃烤鸡(本是同畜牲,相煎何太急!)Hanke吃鸡很特别,为什么特别呢?因为他有10种配料(芥末.孜然等),每种配料可以放1-3克, ...
- 使用C# (.NET Core) 实现单体设计模式 (Singleton Pattern)
本文的概念内容来自深入浅出设计模式一书 由于我在给公司做内培, 所以最近天天写设计模式的文章.... 单体模式 Singleton 单体模式的目标就是只创建一个实例. 实际中有很多种对象我们可能只需要 ...
- PAT (Advanced Level) Practice 1035 Password (20 分) 凌宸1642
PAT (Advanced Level) Practice 1035 Password (20 分) 凌宸1642 题目描述: To prepare for PAT, the judge someti ...
- 利用别名切换索引流程Elasticsearch 7.7
背景 公司里面现在有es集群,由于时间过长,es集群中的某个索引过大但是未删除,一直在写入的情况下,昨天写入突然停止了,发现是索引超时的问题,这时想到通过创建一个新的索引来进行索引切换 操作 es 集 ...
- .net 预处理指令符的使用
目录 什么是预处理指令符? 预处理指令符的使用 自定义指令符 使用Visual Studio快速定义指令符 定义指令符区域 什么是预处理指令符? 当C#编译器找到一条预处理指令#if,最后找到一条指令 ...
- day-02-循环
while 循环 why:大气循环, 吃饭,上课,睡觉,日复一日,歌曲列表循序环,程序中:输入用户名密码, what:while 无限循环. how: 基本结构: while 条件: 循环体 初识循环 ...
- OO第一单元总结与反思
OO第一单元总结与反思 目录 OO第一单元总结与反思 摘要 第一次作业 本次作业UML类图 本次作业度量分析 第二次作业 本次作业的UML类图 本次作业的度量分析 第三次作业 本次作业的UML类图: ...
- 算法:第一节课Master定理
1.ctex:要求用Tex编辑器进行作业的书写 2.与东大本科有差距,还需要多点努力才行. 3. 4.考试不考概念 5. 6.时间复杂度和空间复杂度 7.算法好坏的评价标准 8.基本运算 9.时间复杂 ...
- 一起来看Java设计思想之23种设计模式
目录 怎么使用设计模式 23种设计模式 创建型模式 结构型模式 行为型模式 总结 怎么使用设计模式 为什么要使用设计模式? 编写代码,写接口.写类.写方法 用设计模式做设计的作用是什么? 指导.规定如 ...
- 在Android、iOS、Web多平台使用AppGallery Connect性能管理服务
性能管理(App Performance Management,简称APM)是华为应用市场AppGallery Connect(简称AGC)质量系列服务中的其中一项,可以提供分钟级应用性能监控能力,支 ...