前端面试:浅拷贝和深拷贝的区别?

news2024/11/19 17:51:36

 前些天发现了一个巨牛的人工智能学习博客,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转

那么大家晚上好,我是今天晚上的主讲老师,我是兔哥。

我们在面试中经常会被问到浅拷贝和深拷贝的区别,正好群里也有在问到这个问题,于是今天就专门写一篇博客来讲解一下哈。

1.浅拷贝

浅拷贝是指,对基本类型的值拷贝,以及对象类型的地址拷贝

怎么讲,什么是基本类型?

在js中,我们知道的基本类型有字符串,数字,布尔值。

当我们写这样的代码,就是浅拷贝。

var a = 1;
var b = a; //浅拷贝
b = 2;     //改变b的值,并不会影响到a,因为浅拷贝对基本类型而言就是值拷贝
console.log(a);

a还是1,和b没有关系。

这个道理,在对象中也一样适用。JavaScript中还有对象类型(也叫引用数据类型),对象类型的浅拷贝则只是拷贝了地址。

var p1 = {
    name: 'jack'
}

var p2 = p1;
p2.name = 'rose';

console.log(p1);

p2保存的是和p1一模一样的内存地址,就好像你去配了一把钥匙给张三,张三拿着钥匙一样可以去你家把冰箱里的酸奶喝了。

2.深拷贝

深拷贝是指,除了拷贝基本类型的值,还完全复刻了对象类型。

一个对象在内存中是固定存在的,我们如果要对其进行深拷贝,唯一的办法就是创建一个新的对象,里面的值完全复刻原来的对象。

还是刚才例子,我们稍加改造

var p1 = {
    name: 'jack'
}

var p2 = {
    name: p1.name
};
p2.name = 'rose';

这样一来,我们对p2进行改造,就不会影响到p1了。这就是深拷贝。

我们用这种方法实现深拷贝是可以的,但是如果属性太多,就会很繁琐。下面讲讲如何实现深拷贝的通用方法?

3.深拷贝 Object.assign()

Object.assign()是一种可以对非嵌套对象进行深拷贝的方法,如果对象中出现嵌套情况,那么其对被嵌套对象的行为就成了普通的浅拷贝。如果没有嵌套,是可以用这个方法的。

var p1 = {
    name: 'jack'
}

var p2 = {}

Object.assign(p2,p1);

还有一种类似的方法,就是用JSON进行转换

var p1 = {
    name: 'jack',
    age:12
}

var p2 = JSON.parse(JSON.stringify(p1));

p2.name = 'rose';

实际开发中,可能这种方式用的更多一些,比如把一些数据转成json存储到本地缓存,需要用到的时候,我们再反序列化。

4.深拷贝递归

function deepCopy(dest,src){
  var dest = dest || {};
  for(var key in src){
    //如果对象的属性又是对象,则递归处理
    if(typeof src[key] === "object"){ 
        dest[key]= (src[key].constructor === Array)?[]:{}; 
        deepCopy(dest[key],src[key]); 
    }else{
        dest[key]=src[key];  
    }
  }
  return dest;
}

测试:

var p1 = {
    name: 'jack',
    age:12,
    toy: {
        name:'car'
    }
}

var p2 = deepCopy({},p1);

可以看到,操作p2并不会影响到p1,这就是递归方式的深拷贝。 

今天的分享就到这里啦,也欢迎大家来我们的学习qun交流哦~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409155.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

百度低代码框架amis介绍及实例讲解

目录引言为什么用amis?官网这么说的amis不适合做什么?amis框架集成配置与组件概念实例:通过一个CRUD组件实现增删改查列表列表查询查看详情自定义操作按钮提交表单引言 目前低代码概念已经无人不知,随着新冠病毒的爆发&#xff0…

修改elementUI样式未生效问题(挂载到了body标签上)

修改挂载到body标签上elementUI样式问题 目录修改挂载到body标签上elementUI样式问题前言一、适用范围二、示例1.目标2.实现思路修改自带样式方法最后看效果总结前言 在使用element-ui库的时候,有时会需要修改它自带的css样式,组件模块化化编程时一般会…

【Vue3中的响应式原理】

Vue3响应式原理 在Vue2的响应式中,存在着新增属性,删除属性以及直接通过下标修改数组,但页面不会自动更新的问题。但是在Vue3中,这些问题都得以解决。 Vue2中的响应式原理 首先我们先看一下Vue2中的响应式原理,其次…

vantUI van-picker中的column使用,picker选择器展示对象数组里面的属性,自定义展示数据

项目场景: 需要VantUI实现的功能 问题描述 vant中的picker选择器,只能用这种数组,来展示数据 columns: [‘杭州’, ‘宁波’, ‘温州’, ‘绍兴’, ‘湖州’, ‘嘉兴’, ‘金华’, ‘衢州’], 往往我们的请求数据,都是这样的。对…

::before和::after是什么?

本文从最简单的开始,解释如何理解和使用::before和::after。然后再在实际使用场景中去应用它。 ::before和::after可以添加到选择器以创建伪元素的关键字。伪元素被插入到与选择器匹配的元素内容之前或之后。 content属性 1)::before和::after下特有的c…

图文详解vue.js devtools插件使用方法

Vue.js devtools 背景简介 我们chrome插件网之前介绍过Vue.js devtools,是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码。做前端开发的IT工程师应该比较熟悉这款工具,可以边侧边栏窗格…

【前端写java接口】前端用java写一个简单的后端接口并和前端交互数据【以前端角度解释,详细注释,谁都看得懂】

先声明: 我不是做后端的,我是前端的,然后想要做一个后端的接口平常用来测试测试前端的页面,所以百度加上看看视频学了几天,简单的做一个,可能很多不专业的地方,后端小哥们别太严格哈&#xff0…

【react】什么是fiber?fiber解决了什么问题?从源码角度深入了解fiber运行机制与diff执行

壹 ❀ 引 我在[react] 什么是虚拟dom?虚拟dom比操作原生dom要快吗?虚拟dom是如何转变成真实dom并渲染到页面的?一文中,介绍了虚拟dom的概念,以及react中虚拟dom的使用场景。那么按照之前的约定,本文来聊聊react中另一…

Vue中实现清空数组和清空el-table

场景 要实现的效果是 那么就要用到怎样将这个el-table清空,即在vue中怎样将数组清空。 注: 博客:霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 …

JavaScript 教程 (详细 全面)

文章目录JavaScript 是什么?JavaScript 简介1. JavaScript 的历史2. JavaScript 与 ECMAScript 的关系3. 如何运行 JavaScript4. JavaScript 具有以下特点Node.js 是什么?Node.js 简介1. 运行时是什么?2. Node.js 的诞生3. Node.js 的组成4. …

uniapp实现上拉加载更多

目录 一、添加全部 1.在主页面中添加一列 2.改云函数 3.插件市场导入 加载中组件 二、实现上拉加载 1.云函数中可以接收参数 2.获取下拉事件 3.写触发这个下拉干嘛 在 显示加载中的组件里面 一、添加全部 1.在主页面中添加一列 data.unshift({name:全部}) //添加一列 …

尚品汇项目笔记(持续更新中)

项目网络教学视频链接:尚硅谷VUE项目实战,前端项目-尚品汇(大型\重磅)_哔哩哔哩_bilibili 目录 一、 使用vue-cli脚手架去初始化项目 二、项目的其他配置 三、项目路由分析 四、创建Header和Footer非路由组件 五、完成路由组件的搭建 六、利用【路…

uniapp使用iconfonts图标不显示以及颜色问题

在uniapp中使用阿里的iconfont图标遇到了图标无法显示出来的问题, 以及图标显示了但是为一个小正方形的问题, 同时包括图标颜色不显示的问题。 以下方式解决了这三个问题(适用class方式引入) 1,iconfont图标的引入…

C++实现爬虫,深入理解爬虫原理(最详细,最简单的教程)

前言: 我目前主要学习方向是c,看到网上基本上都是用python写的爬虫,我也试过,确实非常方便,几行代码就能解决,但却就是因为python封装的太好,过于简单,使得很多人包括我最开始的时候,都很难理解爬虫原理.所以就想着能不能用c实现一个简单的爬虫. 最后我成功实现C版爬虫从某图…

vue执行配置选项npm run serve的本质

vue执行配置选项npm run serve运行开发服务器的本质 目录 vue执行配置选项npm run serve运行开发服务器的本质 一、启动开发服务器、调用“工具链”、编译、并运行当前工程 二、npm run serve内部原理分析 三、vue编译运行过程 喜欢的,就收藏并点个赞&#xff…

前端解决跨域问题(9个方法)

什么是跨域? 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。 这里说明一下,无法跨域是浏览器对于用户安全的考虑,如果自己写个没有同源策略的浏览器&a…

微信小程序篇_01 微信小程序与Java后端接口交互

微信小程序与Java后端接口交互准备创建后端项目创建小程序项目本文主要介绍小程序前后端数据的交互,实践演示。 准备 创建后端项目 我这里就创建一个SpringBoot项目作为演示。 在创建项目中选择Spring Initializr 要勾选SpringWeb框架,当然你也可以…

在html页面以导入的方式使用axios进行异步请求

一、下载axios GitHub地址:https://github.com/axios/axios 注:该页面下面有官方的帮助文档内容。 下载zip包到本地后解压 在axios-1.x\dist\esm下找到axios.min.js文件 这个文件就是后面需要导入的文件 二、导入文件 首先在IDEA中的webapp文件夹下…

使用 Vue3 开发了四个月,回顾 emit 的用法

前言:不知不觉已经从 React 转 Vue3 开发四个多月了,但其实自从刚接触 vue 开始,就对 emit 这个指令似懂非懂。所以在项目中其实我还是很害怕去使用这个指令的,但是在有些场景又不得不使用,就只能看着同事的代码比葫芦…

Vue的环境配置

vue环境配置安装地址:安装 — Vue.js 一、Node官网地址:下载 | Node.js 中文网 查看node版本∶打开命令工具,执行"node -v"命令查看版本号。 二、git-bash命令行工具 git-bash命令行工具官网地址:Git 查看git版本&#…