js深拷贝与浅拷贝

 1.浅拷贝概念

浅拷贝是其属性与拷贝源对象的属性共享相同引用,当你更改源或副本时,也可能(可能说的是只针对引用数据类型)导致其他对象也发生更改。

特性

  • 会新创建一个对象,即obj===obj2返回fasle;
  • 对象中如果是基本数据类型会单独开辟一份空间存储,如果是引用数据类型则共用一个内存地址。即如果是基本数据类型新对象修改不会造成源对象值改变,但是如果是引用数据类型,修改会造成源对象属性同时被修改

2.var people1 = people不是浅拷贝

注意var people1 = people不是浅拷贝。只是对内存地址进行赋值,people1 === people 返回true,这种不是浅拷贝

// 这个种方式不是浅拷贝
var people = {name: 'allen'
}// 这里只是对内存地址进行赋值,people1 === people 返回true,这种不是浅拷贝
var people1 = people
people1.name = 'jason'

3.浅拷贝示例

浅拷贝:会新创建一个对象,对源对象的属性进行拷贝,使两者共享同一个地址。obj === obj2返回false。比如:var obj2 = Object.assign({}, obj)

说明:Object.assign()是浅拷贝,会生成一个新的对象浅拷贝对于基本数据类型a,会重新单独开辟一份空间进行存储, 而对于引用数据类型b拷贝的是其内存地址,所以obj2和obj对于拷贝后的b是共用一份内存地址。所以如果修改obj2中b的b1的值,则obj中的b1的值也会改变

4.浅拷贝的方法(Object.create(),Object.assign(),扩展运算符)

4.1Object.create()

创建一个对象,会将源对象放到新对象的原型上(即会将obj对象放到obj2的原型上),返回一个新的对象。

var obj = {a: 1}
var obj2 = Object.create(obj)
obj.a = 2 //修改基本数据类型,源对象也会改变
console.log(obj === obj2); //false
console.log(obj,obj2);

4.2 Object.assign()

将对象属性进行合并,并返回新的对象,遇到重名对象会进行覆盖

var obj = {a: 1,b: {b1: 1}
}
var obj2 = Object.assign({}, obj)
obj.a = 2
obj.b.b1 = 2console.log(obj === obj2);
console.log(obj, obj2);

结果:源对象基本数据类型值没有改变,引用数据用的同一个会改变

4.3扩展运算符

var obj = {a: 1,b: {b1: 1}
}var obj2 = {...obj};
obj2.a = 3;
obj2.b.b1 = 2;console.log(obj === obj2);
console.log(obj, obj2);

 结果:同上

5.深拷贝概念

深拷贝是指其属性与其拷贝的源对象的属性不共享相同的引用,当你更改源或副本时,可以确保不会导致其他对象也发生更改

6.深拷贝的方法

6.1JSON.parse(JSON.stringify())

原理:通过改变数据类型的形式进行深拷贝,JSON.stringify()将对象序列化成字符串,而JSON.parse()将字符串转为对象。注意不是JSON.stringify()是两个方法组合使用

var obj = {a: 1,b: {b1: 1}
}
var obj1 = JSON.parse(JSON.stringify(obj))
obj1.a = 2
obj1.b.b1 = 2
console.log(obj === obj2);
console.log(obj, obj2);

结果:基本数据类型和引用数据类型的改变都不会印象源对象 

6.2 Lodash.cloneDeep()

cdn地址 : https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js

import _ form "lodash";var obj = {a: 1,b: {b1: 1}
}
var obj1 = _.cloneDeep(obj)
obj1.a = 2
obj1.b.b1 = 2

7.深拷贝的原理

7.1主要考虑以下三个方面:

  1. 数据类型的划分
  2. 递归处理
  3. 循环引入的处理:循环引入即对象可以一直展开,无限嵌套,无限循环

7.1循环引入:

var obj = {};
obj.a = obj;
console.log(obj);

对象可以一直展开,无限嵌套,无限循环

 8.手动实现深拷贝

 8.1方式一:简单实现(只判断数据基本类型和针对对象数据结构)

  • 判断数据类型,特殊类型直接返回;
  • 遍历对象进行递归处理; 
        function deepClone(obj) {console.log(typeof obj);// 判断如果为null,不等于字符串的object,function, 为Date类型,RegRex类型则直接返回if (obj === null || typeof obj !== 'object' || typeof obj === 'function' || obj instanceof Date || obj instanceof RegExp) {return obj;}if (obj instanceof Object) {const newObj = {};for (let key in obj) {newObj[key] = deepClone(obj[key]);}// 注意是最后return不是在for循环中returnnewObj[key]return newObj;}}var obj = {a: 1,b: {b1: 1}}var obj2 = deepClone(obj);obj2.a = 2;obj2.b.b1 = 2console.log(obj === obj2);console.log(obj, obj2);

 

8.2 方式二(增强): 针对Map、Set、Array等结构进行深拷贝处理

  •  判断数据类型,特殊类型直接返回;
  • 遍历对象进行递归处理; 
  • 对Map,Set,Array数据结构进行处理
  • 注意Map,Set,Array各自不同遍历及修改的方法
        function deepClone(obj) {// 判断如果为null,不等于字符串的object,function, 为Date类型,RegRex类型则直接返回if (obj === null || typeof obj !== 'object' || typeof obj === 'function' || obj instanceof Date || obj instanceof RegExp) {return obj;}if (obj instanceof Set) { //对于Set数据结构(for of 循环;newSet.add(val)) const newObj = new Set();for (let val of obj) {newObj.add(deepClone(val));}return newObj;} else if (obj instanceof Map) { //对于Map数据结构(for of循环 map.set(key,val))const newObj = new Map();for (let [key, val] of obj) {newObj.set(key, deepClone(val));}return newObj;} else if (obj instanceof Array) { //对于数组数据结构(使用forEach进行循环push进行添加)const newObj = [];obj.forEach(item => {newObj.push(deepClone(newObj[item]));});return newObj} else if (obj instanceof Object) {const newObj = {};for (let key in obj) {newObj[key] = deepClone(obj[key]);}// 注意是最后return不是在for循环中returnnewObj[key]return newObj;} else {return obj;}}var newMap = new Map();newMap.set('key1', 12);newMap.set('key2', 13);var newSet = new Set();newSet.add('11');newSet.add('22');var obj = {a: 1,b: {b1: 1},c: {c1: [1, 2, 3]},d: newMap,f: newSet}var obj2 = deepClone(obj);obj2.a = 2;// 基本数据类型修改值obj2.b.b1 = 2// 数组改变值obj2.c.c1 = [2, 3, 4];// map集合修改key1obj2.d.set('key1','更改后的key1');// Set集合增加一个obj2.f.add('set集合增加的值');console.log(obj === obj2);console.log(obj, obj2);

8.3 方式三(循环引用的处理)

  •  判断数据类型,特殊类型直接返回;
  • 遍历对象进行递归处理; 
  • 对Map,Set,Array数据结构进行处理
  • 注意Map,Set,Array各自不同遍历及修改的方法

如果有循环引用,使用方式二深拷贝处理,会一直循环导致内存溢出。map = new WeakMap()用于判断是否已经有过相同引用

        function deepClone(obj, map = new WeakMap()) {// 判断如果为null,不等于字符串的object,function, 为Date类型,RegRex类型则直接返回if (obj === null || typeof obj !== 'object' || typeof obj === 'function' || obj instanceof Date || obj instanceof RegExp) {return obj;}// 循环引入处理(如果obj下的key的值为obj本身,则循环将obj的值设置到map的key中)// WeakMap的key只能是对象,Set、Map、Array、Object每个都设置map.set(obj,newObj);是因为每种数据结构都有可能存在循环引用if (map.get(obj)) {return map.get(obj);}if (obj instanceof Set) { //对于Set数据结构(for of 循环;newSet.add(val)) const newObj = new Set();map.set(obj, newObj);for (let val of obj) {newObj.add(deepClone(val, map));}return newObj;} else if (obj instanceof Map) { //对于Map数据结构(for of循环 map.set(key,val))const newObj = new Map();map.set(obj, newObj);for (let [key, val] of obj) {newObj.set(key, deepClone(val, map));}return newObj;} else if (obj instanceof Array) { //对于数组数据结构(使用forEach进行循环push进行添加)const newObj = [];map.set(obj, newObj);obj.forEach(item => {newObj.push(deepClone(newObj[item], map));});return newObj} else if (obj instanceof Object) {const newObj = {};map.set(obj, newObj); //此处设置后,后面newObj即使更改,map内存地址使用的是一个所以map的值也会跟着变for (let key in obj) {newObj[key] = deepClone(obj[key], map);}// 注意是最后return不是在for循环中returnnewObj[key]return newObj;} else {return obj;}}// 循环引入var obj3 = {};obj3.a = obj3;var obj4 = deepClone(obj3);obj4.b = obj4;console.log(obj3 === obj4);console.log(obj3, obj4);

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

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

相关文章

渗透测试漏洞挖掘技巧

文章目录 一、使用.json进行敏感数据泄漏二、如何查找身份验证绕过漏洞三、在Drupal上找到隐藏的页面四、遗忘的数据库备份五、电子邮件地址payloads六、HTTP主机头:localhost七、通过篡改URI访问管理面板八、通过URL编码空格访问管理面板九、篡改URI绕过403十、Byp…

【Spring源码分析】Bean的元数据和一些Spring的工具

Bean的元数据和一些Spring工具 一、BeanDefinition1、认识 BeanDifinition2、AbstractBeanDefinition3、GenericBeanDefinition测试 二、BeanDefinition 注册器三、加载BeanDefinition四、包扫描过程分析包扫描过程总结 五、内省 API六、反射工具Bean 的创建批量构造Resolvable…

c++视觉处理---仿射变换和二维旋转变换矩阵的函数

仿射变换cv::warpAffine cv::warpAffine 是OpenCV中用于执行仿射变换的函数。仿射变换是一种线性变换,可用于执行平移、旋转、缩放和剪切等操作。下面是 cv::warpAffine 函数的基本用法: cv::warpAffine(src, dst, M, dsize, flags, borderMode, borde…

【学习笔记】Spring Security 01 认识Spring Security的重要特征(Features)

Spring Security 零、概述 Spring Security(简称SS)是一个高可用的、可自定义的身份认证和鉴权控制的框架。 类似的框架还有Shiro。 需求场景: 现今流行的web开发中,安全的第一位。 原本的鉴权开发流程:springweb自…

【ROS】使用vscode浏览navigation2源码时,提示:没有那个文件或目录

1、问题描述 使用vscode浏览navigation2源码时,头文件下面有波浪线,并提示:没有那个文件或目录。比如没有:geometry_msgs/msg/polygon.h 错误信息: 无法打开源文件 “geometry_msgs/msg/polygon.h” (dependency of “nav2_controller/controller_server.hpp”)C/C++(16…

【C++】异常处理之throw、catch、try、局部资源管理、标准异常库

一、抛出异常 异常处理机制两个主要成分: 异常的鉴定与发出;异常的处理方式。 C通过throw表达式产生异常: inline void Triangular_iterator:: check_integrity() {if(_index>Triangular::max_elems){throw iterator_overflow(_index,…

解决react使用css module无法重写bootstrap样式的问题

react使用css module虽然能够解决样式污染,但是同时也失去了写css样式的灵活性,特别是:在.module.css文件中当子元素是非变量的静态class类(比如bootstrap), 此时使用css选择器对该子元素的样式不会起作用的 比如下面…

什么是API网关?——驱动数字化转型的“隐形冠军”

什么是API网关 API网关(API Gateway)是一个服务器,位于应用程序和后端服务之间,提供了一种集中式的方式来管理API的访问。它是系统的入口点,负责接收并处理来自客户端的请求,然后将请求路由到相应的后端服…

为什么Excel插入图片不显示,点击能够显示

今天在做Excel表格时,发现上传图片后不能显示,但是点击还是能够出现图片的 点击如下 点击能看到,但是不显示?那么只需鼠标右键点击浮动即可显示

CSS 滚动驱动动画 animation-range

animation-range 语法 normallength-percentagetimeline-range-name 具名时间线范围 named timeline rangecovercontainentry 和 entry-crossingexit 和 exit-crossing 兼容性 animation-range 这个属性可同时对 scroll progress timeline 和 view progress timeline 这两种不…

了解华为交换机路由器的基本命令

什么是CLI:使用户与设备交互的界面,用户输入对应的命令,设备会回复我们输入的内容,回车车后设备会执行对应命令,达到管理、配置、查看的目的。 CLI界面分为三种操作视图: 用户试图:设备登陆后…

【java|golang】多字段排序以及排序规则

奖励最顶尖的 K 名学生 给你两个字符串数组 positive_feedback 和 negative_feedback ,分别包含表示正面的和负面的词汇。不会 有单词同时是正面的和负面的。 一开始,每位学生分数为 0 。每个正面的单词会给学生的分数 加 3 分,每个负面的词…

selenium打开火狐浏览器

项目上需求为:甲方OA 系统是IE系统,需要从IE系统点个按钮打开火狐浏览器单点登录跳转到我们的系统 前期解决方案为:打开浏览器就行了,然后就用的是打开本地浏览器,但是由于B/S架构,有别人远程访问我的ip来…

如何使用ChatPPT生成PPT文档

简介 ChatPPT是一个基于人工智能的PPT生成工具,可以帮助用户快速生成高质量的PPT文档。ChatPPT使用自然语言处理技术,可以根据用户的指令生成PPT内容、设计和排版。 使用方法 ChatPPT提供了两种使用方式:在线体验版和Office插件版。 在线…

【博客搭建】1、拾壹博客本地启动遇到的问题和需要注意的坑

一、后端(blog)启动 1、修改application.yml中的数据库链接与密码,Redis账号密码,即可启动成功; 2、运行之前先导入sql; 3、 如需上传文件保存至本地(例如相册的照片),需…

【竞赛题目】木块(C语言详解)

" 木块 " 是【第二届全国高校计算机技能竞赛】里的一道竞赛题目,博主觉得很新颖想推荐给大家; 题目描述 为了提高词汇量,小理得到了一套四块木块,其中每块都是一个立方体,六面各写着一个字母。他正在通过将…

神经网络中卷积和池化的区别

1、什么叫卷积? 卷积层是用一个固定大小的矩形区去席卷原始数据,将原始数据分成一个个和卷积核大小相同的小块,然后将这些小块和卷积核相乘输出一个卷积值(注意这里是一个单独的值,不再是矩阵了)。 卷积的…

YOLOv5算法改进(11)— 主干网络介绍(MobileNetV3、ShuffleNetV2和GhostNet)

前言:Hello大家好,我是小哥谈。主干网络通常指的是深度学习中的主干模型,通常由多个卷积层和池化层组成,用于提取输入数据的特征。在训练过程中,主干网络的参数会被不断优化以提高模型的准确性。YOLOv5算法中的主干网络可以有多种替换方案,为了后面讲解的方便,本篇文章就…

CVE-2017-12615 Tomcat远程命令执行漏洞

漏洞简介 2017年9月19日,Apache Tomcat官方确认并修复了两个高危漏洞,漏洞CVE编号:CVE-2017-12615和CVE-2017-12616,其中 远程代码执行漏洞(CVE-2017-12615) 当 Tomcat 运行在 Windows 主机上,…

加持智慧医疗,美格智能5G数传+智能模组让就医触手可及

智慧医疗将云计算、物联网、大数据、AI等新兴技术融合赋能医疗健康领域,是提高医疗健康服务的资源利用效率,创造高质量健康医疗的新途径。《健康中国2030规划纲要》把医疗健康提升到了国家战略层面,之后《“十四五”全面医疗保障规划》等一系…