JavaScript深拷贝和浅拷贝

对于原始数据类型,并没有深浅拷贝的区别,深浅拷贝都是对于引用数据类型而言,如果我们要赋值对象的所有属性都是引用类型可以用浅拷贝

 浅拷贝:只复制一层对象,当对象的属性是引用类型时,实质复制的是其引用,当引用值发生改变时,也会跟着改变
深拷贝:深拷贝是另外申请了一块内存,内容和原来一样,更改原对象,拷贝对象不会发生改变

1、 浅拷贝实现

 for in 遍历实现
let shallCopy => obj=>{let rst={}for(let key in obj){//只复制本身的属性(非继承过来的属性)枚举属性if(obj.hasOwnProperty(key)){rst[key]=obj[key]}}return rst}let start ={name:'古力娜扎',age:'22',friend:{name:'邓超'}}let copyStart=shallCopy(start)copyStart.name="热巴"copyStart.friend.name='黄渤'// 拷贝的第一层层如果是引用类型,拷贝的其实是一个指针,所以拷贝对象改变会影响原对象console.log(start.name,opyStart.friend.name) //古力娜扎 黄渤
Object.assign(target,source) (适用于对象)

可以把 n 个源对象拷贝到目标对象中去(拷贝的是可枚举属性)

let start = {name: '古力娜扎',age: '22',friend: {name: '邓超'}
}
let returnedTarget = Object.assign({}, start)
 扩展运算符...
let start = { name: '刘亦菲' }
let newStart = { ...start }
newStart.name = '迪丽热巴'
console.log(start.name) // 刘亦菲
 slice(适用于数组)
let a = [1, 2, 3, 4]
let b = a.slice()
b[0] = 9
console.log(a) //[1,2,3,4]

3 、深拷贝实现

JSON.parse(JSON.string(obj))
let obj = {name: '小明',dog: ['小花', '旺财']
}let obj1 = JSON.parse(JSON.stringify(obj))
obj1.name = '小华'
obj1.dog[0] = '小白'
console.log(obj) //  {name: "小明", dog: ['小花', '旺财']}
// 原数组并没有改变,说明实现了深拷贝let richGirl = [{name: '开心',car: ['宝马', '奔驰', '保时捷'],deive: function() {},age: undefined}
]let richBoy = JSON.parse(JSON.stringify(richGirl))
console.log(richBoy)
/*1. 当属性值为undefined或函数,则序列化的结果会把函数或 undefined丢失2. 对象中存在循环引用的情况也无法正确实现深拷贝3. Symbol,不能被JSON序列化4. RegExp、Error对象,JSON序列化的结果将只得到空对象5. 会丢失对象原型*/
 递归实现深拷贝
let deepClone = obj => {let newObj = Array.isArray(obj) ? [] : {}if (obj && typeof obj === 'object') {for (let key in obj) {if (obj.hasOwnProperty(key)) {if (obj[key] && typeof obj[key] === 'object') {newObj[key] = deepClone(obj[key])} else {// 如果不是对象直接拷贝newObj[key] = obj[key]}}}}return newObj
}let richGirl = {name: '开心',car: ['宝马', '奔驰', '保时捷'],deive: function() {},age: undefined
}let richBoy = deepClone(richGirl)richBoy.deive = '渣男开大G'
richBoy.name = '小明'
richBoy.car = ['哈罗单车', '膜拜']
richBoy.age = 20console.log(richGirl)
console.log(richBoy)

4、 第三方库实现拷贝

//cloneDeep: 深拷贝  clone:浅拷贝,此例子介绍深拷贝
const _ = require('lodash') //全部引入
const cloneDeep = require('lodash/cloneDeep') //引入单个方法,用的方法少建议用这种方式引入
let obj = {name: '开心',car: ['宝马', '奔驰', '保时捷'],deive: function() {},age: undefined
}
const newObj = cloneDeep(obj)
newObj.name = '不开心'
newObj.car[0] = '自行车'
console.log(obj, newObj) // 原对象不会改变

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

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

相关文章

【办公软件】Outlook启动一直显示“正在启动”的解决方法

早上打开电脑Outlook2016以后,半个多小时了,一直显示这个界面: 解决办法 按WIN R键打开“运行”,输入如下命令: outlook.exe /safe 然后点击“确定” 这样就进入了Outlook的安全模式。 点击“文件”->“选项”-…

第6节:Vue3 调用函数

在Vue3中&#xff0c;你可以使用setup函数来调用函数。 <template><button click"handleClick">点击我</button> </template><script> import { ref } from vue;export default {setup() {// 创建一个响应式的引用const count ref(0…

nbcio-vue下载安装后运行报错,diagram-js没有安装

更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; https://gitee.com/nbacheng/nbcio-boot 前端代码&#xff1a;https://gitee.com/nbacheng/nbcio-vue.git 在线演示&#xff08;包括H5&#xff09; &#xff1a; http://122.227.135.243:9888 根据…

047:vue加载循环倒计时 示例

第047个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…

基于java web的网上书城系统的设计与实现论文

摘 要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff0c;商品交易当然也不能排除在外&#xff0c;随着商品交易管理的不断成熟&#xff0c;它彻底改变了过去传统的经营管理方式&#xff0c;不仅使商品…

32、Bean的生产顺序是由什么决定的?

Bean的生产顺序是由什么决定的? BeanDefinition的注册顺序是有什么决定的? Bean在生产之前有个临时状态:BeanDefinition;存储着bean的描述信息。由BeanDefinition决定着Bean的生产顺序。会按照BeanDefinition的注册顺序来决定Bean的生产顺序。因为所有的BeanDefinition存…

Lua字符串(包含任意字符,如中文)任意位置截取

常规的截取只需要lua自带的api就可以解决问题:如 string.sub 但是当字符串之中含有中文或者符号的时候,这些接口就麻爪了,当然lua后续更新有可能支持,至少本少当前的Lua版本是不支持的。 废话少说,直接上代码和测试用例 -- 判断utf8字符byte长度 function stringTool.ch…

统信UOS_麒麟KYLINOS上跨架构下载离线软件包

原文链接&#xff1a;统信UOS/麒麟KYLINOS上跨架构下载离线软件包 hello&#xff0c;大家好啊&#xff0c;今天给大家带来一篇在统信UOS/麒麟KYLINOS上跨架构下载离线软件包的实用教程。在我们的日常工作中&#xff0c;可能会遇到这样的情况&#xff1a;需要为不同架构的设备下…

【总结】机器学习中的15种分类算法

目录 一、机器学习中的分类算法 1.1 基础分类算法 1.2 集成分类算法 1.3 其它分类算法&#xff1a; 二、各种机器学习分类算法的优缺点 分类算法也称为模式识别&#xff0c;是一种机器学习算法&#xff0c;其主要目的是从数据中发现规律并将数据分成不同的类别。分类算法通…

鸿蒙OS应用开发之数据类型

前面学习了一个简单的例子,这是多年来学习应用程序开发的经典路径,在这里也是这种待遇,通过这样的学习明白了一个简单应用是怎么样构成的,知道它是怎么运行输出的。在这个基础之上,你还是不会开发应用程序的,因为你还没有学习鸿蒙应用的开发语言基础,所以在这里要学习一…

nvue页面用法uniapp

1.介绍 Nvue是一个基于weex改进的原生渲染引擎&#xff0c;它在某些方面要比vue更高性能&#xff0c;在app上使用更加流畅&#xff0c;但是缺点也很明显&#xff0c;没有足够的api能力&#xff0c;语法限制太大&#xff0c;所以nvue适用于特定场景&#xff08;需要高性能的区域…

排序算法——桶排序/基数排序/计数排序

桶排序 是计数排序的升级版。它利用了函数的映射关系&#xff0c;高效与否的关键就在于这个映射函数的确定。桶排序 (Bucket sort)的工作的原理&#xff1a; 假设输入数据服从均匀分布&#xff0c;将数据分到有限数量的桶里&#xff0c;每个桶再分别排序&#xff08;有可能再使…

pve(proxmox)宿主机奔溃无法进入系统,lxc容器和虚拟机迁移,无备份,硬盘未损坏,记录数据找回过程及思考

pve的主机突然CPU满载,然后远程断电后pve就无法启动了,之前一直上面的虚拟机和容器也没有备份,折腾了两天总算找回来了记录一下处理过程和思路,方便后续查找。 一、隐患分析 1.周四突然手欠,由于之前家里的pve主机老给我发邮件,提示我硬盘有问题,但可以正常使用,我从…

【使用apache snakeyaml 管理yml文件】

使用apache snakeyaml 管理yml文件 1. 一个Yaml工厂2.Yaml工具类3. 测试类4. 完成 &#xff01; OK 1. 一个Yaml工厂 public class YamlFactory {public static YamlUtil get(){return new YamlUtil();} }2.Yaml工具类 Slf4j public class YamlUtil {private Yaml yaml;publi…

想进阶JAVA高级程序员吗?多线程必学

❤️作者主页&#xff1a;小虚竹 ❤️作者简介&#xff1a;大家好,我是小虚竹。2022年度博客之星评选TOP 10&#x1f3c6;&#xff0c;Java领域优质创作者&#x1f3c6;&#xff0c;CSDN博客专家&#x1f3c6;&#xff0c;华为云享专家&#x1f3c6;&#xff0c;掘金年度人气作…

【SpringSecurity】-- 认证、授权

文章目录 SpringSecurity简介快速入门1.准备工作1.2引入SpringSecurity 认证1.登录校验流程2.原理2.1SpringSecurity完整流程2.2认证流程详解 3.解决问题3.1思路分析3.2准备工作3.3.实现3.3.1数据库校验用户3.3.2密码加密存储3.3.3登录接口3.3.4认证过滤器3.3.5退出登录 授权1.…

输入一组数据,以-1结束输入[c]

我们新手写题时总能看到题目中类似这样的输入 没有给固定多少个数据&#xff0c;我们没有办法直接设置数组的元素个数&#xff0c;很纠结&#xff0c;下面我来提供一下本人的方法&#xff08;新手&#xff0c;看到有错误或者不好的地方欢迎大佬指出&#xff0c;纠正&#xff0…

c语言中的 *, , ** 符合代表什么意思

在C语言中&#xff0c;“&”主要有两个用途。 取地址运算符&#xff1a;C语言中&#xff0c;"&"用来返回一个变量的内存地址。例如&#xff0c;假设我们定义了一个整数变量 int a 10;&#xff0c;那么 &a 就代表了这个变量所在的内存地址。 位运算符&a…

【开源】基于Vue和SpringBoot的衣物搭配系统

项目编号&#xff1a; S 016 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S016&#xff0c;文末获取源码。} 项目编号&#xff1a;S016&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 衣物档案模块2.2 衣物搭配模块2.3 衣…

HarmonyOS鸿蒙操作系统架构开发

什么是HarmonyOS鸿蒙操作系统&#xff1f; HarmonyOS是华为公司开发的一种全场景分布式操作系统。它可以在各种智能设备&#xff08;如手机、电视、汽车、智能穿戴设备等&#xff09;上运行&#xff0c;具有高效、安全、低延迟等优势。 目录 HarmonyOS 一、HarmonyOS 与其他操…