#今日说码栏目# 深拷贝与浅拷贝

news2024/10/5 14:34:26

 1、深拷贝

深拷贝的定义:在JS中,数据类型分为基本数据类型和引用数据类型两种,对于基本数据类型来说,它的值直接存储在栈内存中,而对于引用类型来说,它在栈内存中仅仅存储了一个引用,而真正的数据存储在堆内存中中。

深拷贝作用在引用类型上!例如:Object对象,Array数组
深拷贝不会拷贝引用类型的引用,而是将引用类型的值全部拷贝一份,形成一个新的引用类型,这样就不会发生引用错乱的问题,使得我们可以多次使用同样的数据,而不用担心数据之间会起冲突。

基本数据类型

var a = 1;
var b = a;
b = 2;
console.log(a); // 1
console.log(b); // 2

引用数据类型

var obj1 = {
    a:  1,
    b:  2,
    c:  3
}
var obj2 = obj1;
obj2.a = 5;
console.log(obj1.a);  // 5
console.log(obj2.a);  // 5

使用深拷贝的原因:我们希望在改变新的数组(或者原对象)的时候,不改变原数组(或者原对象)

深拷贝的四种方法

1、使用JSON.stringify() 使对象字符串化和  JSON.parse()  使字符串对象化  相互转换

①let _tmp = JSON.stringify(obj);//将对象转换为json字符串形式

②let result = JSON.parse(_tmp);//将转换而来的字符串转换为原生js对象

 var obj1 = {
    a: 1,
    b: 2,
    c: 3
}
var objString = JSON.stringify(obj1);
var obj2 = JSON.parse(objString);
obj2.a = 5;
console.log(obj1.a);  // 1
console.log(obj2.a); // 5

可以看到没有发生引用问题,修改obj2的数据,并不会对obj1造成任何影响
但是使用JSON.stringify()以及JSON.parse()它是不可以拷贝 undefined , function, RegExp 等等类型的

2、通过for in实现

function deepCopy1(obj) {
  let o = {}
  for(let key in obj) {
    o[key] = obj[key]
  }
  return o
}
 
let obj = {
  a:1,
  b: undefined,
  c:function() {},
}
console.log(deepCopy1(obj))

 3、递归 (自身调用自身)

使用递归的方式实现数组、对象的深拷贝

function deepClone1(obj) {
  //判断拷贝的要进行深拷贝的是数组还是对象,是数组的话进行数组拷贝,对象的话进行对象拷贝
  var objClone = Array.isArray(obj) ? [] : {};
  //进行深拷贝的不能为空,并且是对象或者是
  if (obj && typeof obj === "object") {
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone1(obj[key]);
        } else {
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}

4.concat(数组的深拷贝)

使用concat合并数组,会返回一个新的数组。
对象是一个引用数据类型 普通的复制是一个浅拷贝

let arr_1 = [1, 2, false, 'a']
let arr_2 = [].concat(arr_1)

arr_1[1] = 3  //给下标为1的地址重新赋值为3

// arr_1中的数据更改,并不会影响arr_2
console.log(arr_1) // -> [1, 3, false, 'a']
console.log(arr_2) // -> [1, 2, false, 'a']

2、浅拷贝

浅拷贝的定义:自己创建一个新的对象,来接受你要重新复制或引用的对象值。如果对象属性是基本的数据类型,复制的就是基本类型的值给新对象;但如果属性是引用数据类型,复制的就是内存中的地址,如果其中一个对象改变了这个内存中的地址,肯定会影响到另一个对象。

浅拷贝的四种方法

1、Object.assign

Object.assign 是 对象的一个方法,该方法可以用于 JS 对象的合并等多个用途,其中一个用途就是可以进行浅拷贝。该方法的第一个参数是拷贝的目标对象,后面的参数是拷贝的来源对象(也可以是多个来源)。

const obj = {};
const source = {
  name: 'nordon',
  info: {
    age: 18
  }
};
 
Object.assign(obj, source);
console.log(obj); // {name: 'nordon', info: {…}}
source.info.age = 20;
console.log(obj);
console.log(source);

2、扩展运算符

const source = {
  name: 'nordon',
  info: {
    age: 18
  }
};
const obj = {...source};
 
Object.assign(obj, source);
source.info.age = 20;
console.log(obj);
console.log(source);

3、Array.prototype.concat

数组的 concat 方法其实也是浅拷贝,使用场景比较少,使用concat连接一个含有引用类型的数组时,需要注意修改原数组中的元素的属性,因为它会影响拷贝之后连接的数组

const arr = [1, 2, {name: 'nordon'}];
const newArr = arr.concat();
newArr[2].name = 'wy';
console.log(arr); 
console.log(newArr);

4、Array.prototype.slice

数组的 slice 方法其实也是浅拷贝,使用场景比较少,同concat

const arr = [1, 2, {name: 'nordon'}];
const newArr = arr.slice();
newArr[2].name = 'mike';

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

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

相关文章

【SpringBoot】MVC配置解决跨域但仍然存在跨域

文章目录1. 跨域问题出现与解决1. 跨域问题出现与解决 检查SpringBoot中的MVC配置。 public void addCorsMappings(CorsRegistry registry) {//允许跨域访问资源定义registry.addMapping("/**")//(只允许本地的指定端口访问)允许所有.allowedOrigins("*")…

数据结构之线性表中的单链表【详解】

文章目录前言:一、单链表1.单链表和顺序表的优缺点2.单链表的概念和学习3.单链表的各个接口的实现(详解每一步)3.1.先铺垫一下大致的思路3.2.然后这边我们看一下我们大致要实现的函数有哪些3.3.接下来我们就开始实现这些代码,并且…

用信号量实现进程同步与互斥(含代码分析)

信号量简单的来说就是一个变量,代表着系统中互斥资源的数量,通常用原语来实现对信号量机制的操作。 一对原语:wait(S)也称为P操作,singnal(S)也称为V操作。S表示信号量 对于wait原语本身的内部逻辑代码如下(这里以一…

黑苹果外接显示器最优解决方案

黑苹果无法外接显示器 黑苹果外接显示器解决方案 先给解决方案 电脑端 > 安装 PC端 Duet Display买个二手电视盒子40块钱左右,还带电源电视盒子 > 安装安卓端 Duet Display(U盘安装就行)电视盒子 > 用鼠标开启开发者模式双头USB&…

SpringBoot SpringBoot 原理篇 1 自动配置 1.12 bean 的加载控制【注解式】

SpringBoot 【黑马程序员SpringBoot2全套视频教程,springboot零基础到项目实战(spring boot2完整版)】 SpringBoot 原理篇 文章目录SpringBootSpringBoot 原理篇1 自动配置1.12 bean 的加载控制【注解式】1.12.1 问题引入1.12.2 bean的加载…

【JVM技术专题】「原理专题」全流程分析Java对象的创建过程及内存布局

前言概要 对应过程则是:对象创建、对象内存布局、对象访问定位的三个过程。 对象的创建过程 对象的创建方式 java中对象的创建方式有很多种,常见的是通过new关键字和反射这两种方式来创建。除此之外,还有clone、反序列化等方式创建。 通过n…

CSS @property,让不可能变可能

本文主要讲讲 CSS 非常新的一个特性,CSS property,它的出现,极大的增强的 CSS 的能力! 根据 MDN -- CSS Property,property CSS at-rule 是 CSS Houdini API 的一部分, 它允许开发者显式地定义他们的 CSS 自定义属性&…

vue项目分环境配置打包处理

vue项目分环境配置打包处理 目录 vue项目分环境配置打包处理 本地环境配置 生产环境配置 打包处理 打包配置处理(扩展) 本地环境配置 定义需要的变量,这里定义了各种变量标识,可参考使用,自定义项目需要的变量&…

设计问卷调查有哪些技巧?

调查问卷可以很好地帮助我们进行市场调研,所以想要做出一份有效的调查问卷,首先要确定问卷的主题。明确的主题就是定基调,可以让我们的后续过程更加顺利。然后我们再开始进行题目的设置和问卷的设计等动作。不过,在问卷设计的过程…

【js】【爬虫】fetch + sessionStorage 快速搭建爬虫环境及各种踩坑

文章目录导读需求开发环境fetch介绍为什么选择fetchfetch的封装使用数据存储数据访问封装多页面处理方案数据过大,拆分处理参考资料导读 需求 一说爬虫,很多人都会向导python,不过,真正省心的方案,应当是通过js控制获…

Reactive源码分析

Reactive用来绑定引用数据类型, 例如对象和数组等,实现响应式。 Reactive API 接口 export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>相关API包括readonly、createReactiveObject、shallowReadonly、isReactive、toReactive。源码运…

Eureka注册中心

文章目录一、认识服务提供者和服务调用者二、Eureka 的工作流程三、服务调用出现的问题及解决方法四、搭建 eureka-server五、注册 user-service、order-service六、在 order-service 完成服务拉取&#xff08;order 模块能访问 user 模块&#xff09;七、配置远程服务调用八、…

从入门到进阶!当下火爆的大数据技术及算法怎么还能不知道 一起来学习互联网巨头的大数据架构实践!

大数据被称为新时代的黄金和石油&#xff0c;相关技术发展迅猛,所应用的行业也非常广泛&#xff0c;从传统行业如医疗、教育、金融、旅游&#xff0c;到新兴产业如电商、计算广告、可穿戴设备、机器人等。大数据技术更是国家科技发展和智慧城市建设的基础。 当前“互联网”新业…

骨传导耳机是怎么传声的?骨传导耳机会伤害耳朵吗?

作为一个耳机发烧友&#xff0c;平时最喜欢的就是捣鼓耳机。这几年入手了几十款耳机&#xff0c;头戴式、入耳式、半入耳、有线无线都会接触一些来玩&#xff0c;其中还有骨传导耳机这个相对小众的款类。 说到骨传导耳机&#xff0c;我应该算是最早一批的用户了&#xff0c;很…

web网页设计—— 指环王:护戒使者(13页) 电影网页设计 在线电影制作 个人设计web前端大作业

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置&#xff0c;有div的样式格局&#xff0c;这个实例比较全面&#xff0c;有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 文章目录一、网页介绍一…

数据结构-ArrayList解析和实现代码

arrayList结构的实现是数组结构&#xff0c;数组没有扩容机制&#xff0c;arrayList的扩容机制采用的是复制数组&#xff0c;了解你会发现ArrayList虽然实现比较简单&#xff0c;但是设计还是很巧妙的。咱们先来简单实现下.. 咱们看下定义的全局变量 1.默认初始化空间为10&am…

docker 安装 Jenkins

一、Jenkins 安装 增加挂载目录和权限 # 增加挂载目录和权限mkdir /workspace/jenkins_homechown -R 1000:1000 /workspace/jenkins_home/创建容器 docker run --name jenkins -d \ -p 9999:8080 \ -p 8888:8888 \ -p 50000:50000 \ -v /workspace/jenkins_home:/var/jenkins…

[附源码]java毕业设计智慧教室预约

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

java检验mp4文件完整性的一个方法:使用ffmpeg

问题引入 最近笔者在写一个多线程下载视频文件的程序&#xff0c;打算让这个程序在我的空闲服务器上运行&#xff0c;但是几轮测试之后发现&#xff0c;有时候会存在下载的视频文件不完整的情况&#xff0c;这就导致了有些文件无法正常播放 问题排查 经过一周的排查后&#…

小白学流程引擎-FLowable(一) —FLowable是什么

小白学流程引擎-FLowable(一) | FLowable是什么 一、什么是流程引擎&#xff1f; 通俗的说&#xff0c;流程引擎就是多种业务对象在一起合作完成某件事情的步骤&#xff0c;把步骤变成计算机能理解的形式就是流程引擎。 流程引擎&#xff0c;用来驱动业务按照设定的固定流程…