当前位置: 首页 > news >正文

【js】js中深拷贝与浅拷贝:

文章目录

        • 一、浅拷贝(修改新对象会改到原对象)
            • 【1】通过= 直接赋值
            • 【2】Object.assign()方法
        • 二、深拷贝(修改新对象不会改到原对象)
            • 【1】通过JSON对象来实现深拷贝
            • 【2】 Object.create()方法
            • 【3】使用扩展运算符实现深拷贝
        • 三、要点:


一、浅拷贝(修改新对象会改到原对象)

只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存,修改新对象会改到原对象

【1】通过= 直接赋值
var obj1 = {name: '诸葛亮',gender: '男',age: 20
};
var obj2 = obj1;obj2.age = 30;
console.log(obj2);  //name: '诸葛亮', gender: '男', age: 30
console.log(obj1);  //name: '诸葛亮', gender: '男', age: 30
【2】Object.assign()方法
var obj1 = {name: '诸葛亮',gender: '男',age: 20
};
var obj2=Object.assign(obj1)obj2.age = 30;
console.log(obj2.age);  // age: 30
console.log(obj1.age);  // age: 30 

二、深拷贝(修改新对象不会改到原对象)

会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象

【1】通过JSON对象来实现深拷贝

JSON.stringify() 方法将一个 JavaScript 值(对象或者数组)转换为一个 JSON 字符串。
JSON.parse() 方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。返回值为Object 类型, 对应给定 JSON 文本的对象/值。
该方法的原理是先将引用类型的对象转换为基础类型的字符串,然后将其从字符串再重新转换为对应的引用类型对象,在进行转换为引用对象的时候,会为对象的每个属性重新分配堆内存,即进行了深拷贝

var obj3 = {number: 1111,city: '西安'
}
var obj4 = JSON.parse(JSON.stringify(obj3));obj4.city = '深圳';
console.log(obj3.city);  //'西安'
console.log(obj4.city);  //'深圳'
【2】 Object.create()方法
var obj3 = {number: 1111,city: '杭州'
}
var obj4 = Object.create(obj3)obj4.city = '深圳';
console.log(obj3.city);  //'杭州'
console.log(obj4.city);  //'深圳'
【3】使用扩展运算符实现深拷贝

// 当value是基本数据类型,比如String,Number,Boolean时,是可以使用拓展运算符进行深拷贝
// 当value是引用类型的值,比如Object,Array,引用类型进行深拷贝也只是拷贝了引用地址,所以属于浅拷贝

var obj3 = {number: 1111,city: '杭州'
}
var obj4 = { ...obj3, number: 2021 }console.log(obj3.number);  //1111
console.log(obj4.number);  //2021

三、要点:

深浅拷贝,都是进行复制,那么区别主要在于复制出来的新对象和原来的对象是否会互相影响,改一个,另一个也会变。
新旧对象共享内存,修改其中一个则会影响另外一个,则为浅拷贝
新旧对象不共享内存,修改其中一个不会影响另一个,则为深拷贝

相关文章:

【js】js中深拷贝与浅拷贝:

文章目录 一、浅拷贝(修改新对象会改到原对象)【1】通过 直接赋值【2】Object.assign()方法 二、深拷贝(修改新对象不会改到原对象)【1】通过JSON对象来实现深拷贝【2】 Object.create(&#xf…...

大文件上传demo,前端基于Uppy,后端基于koa

前言 文件上传基本上所有的管理系统之类的项目都有这么一个功能。因为使用了Element,可以方便的使用 其提供的Upload组件,对于普通上传来说基本上就够用了。但是有时候会涉及到大文件上传的需求,这时就会面临一些问题:比如文件上…...

typeScript--[函数定义]

一.TypesScript 函数的定义 函数的定义包括两种类型:函数声明和函数表达式。 1.函数声明 function hello(): string {return "hello" } 2.函数表达式 var hello1 function (): string {return "hello" } 二.函数之可选参数 参数后面的限…...

Spring初始化项目

1、官网用法 访问地址:https://start.spring.io idea配置:https://start.spring.io 2、阿里巴巴加速 访问地址:https://start.aliyun.com/bootstrap.html idea配置:https://start.aliyun.com 3、区别 官网阿里巴巴版本最新稍…...

Opencv 图像金字塔----高斯和拉普拉斯

原文:图像金字塔----高斯和拉普拉斯 图像金字塔是图像中多尺度表达的一种,最初用于机器视觉和图像压缩,最主要用于图像的分割、融合。 高斯金字塔 ( Gaussian pyramid): 高斯金字塔是由底部的最大分辨率图像逐次向下采样得到的一系列图像…...

gitLab(git)误提交命令

1.先使用下面命令查看一下分支上已提交的信息 git log 2.回退到之前的版本 git reset —hard 你要删除的提交哈希码(一般是离这个命令最近的一串数字) 3.覆盖掉远端的版本信息,使远端的仓库也回退到相应的版本 注意:切换到你提…...

Rust个人学习笔记2

一定要牢记Rust是基于表达式的语言&#xff0c;除了声明语句和表达式语句外&#xff0c;其他的都是表达式。所以if也是表达式&#xff0c;它可以被用作右值。 条件控制 if-else。cpp和python得结合。 fn main() {let number 34;if number < 0 {println!("number &l…...

深入浅出Android同步屏障机制

原文链接 Android Sync Barrier机制 诡异的假死问题 前段时间&#xff0c;项目上遇到了一个假死问题&#xff0c;随机出现&#xff0c;无固定复现规律&#xff0c;大量频繁随机操作后&#xff0c;便会出现假死&#xff0c;整个应用无法操作&#xff0c;不会响应事件&#xff…...

工程管理系统简介 工程管理系统源码 java工程管理系统 工程管理系统功能设计

鸿鹄工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离构建工程项目管理系统 1. 项目背景 一、随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性&#xff0c;公司对内部工程管…...

Python 专栏目录索引

文章目录 Python 环境搭建Python 语法 变量、print、注释和运算符Python 的基本结构Python 中的文件和文件夹操作Python 中常用库Python 常见问题及解决方案Python 应用实例 Python 环境搭建 vscode搭建Python环境 Python 语法 变量、print、注释和运算符 python语法 变量、…...

SSM学习

技术架构 crm的技术架构: 视图层(view):展示数据&#xff0c;跟用户交互。 html, css,js,jquery,bootstrap(ext / easyUI),jsp控制层(Controller):控制业客处理流程(接收请求,接收参数,封装参数;根据不同的请求调用业务 (servlet, ) springMVC ( , webwork,strutsl,struts2)业…...

.net项目部署Docker

1、项目生成的bin目录下创建Dockerfile文件 #运行环境描述&#xff0c;此处是用的Net5构建镜像 FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build #复制文件到 docker容器中的app文件夹中 COPY . /app #设置工作目录为 app 文件夹&#xff0c;要和上面一致哦 WORKDIR /app #设…...

Ubuntu无法加载exfat的USB存储设备

当接入设备USB存储设备提示&#xff1a; 不能挂在63GB 卷 Error mounting /dev/sdb1 at /media/ubuntu/83C9-26F4: Command-line mount -t "exfat" -o "uhelperudisks2,nodev,nosuid,uid1000,gid1000,iocharsetutf8,namecase0,errorsremount-ro,umask0077"…...

【计算机网络】网络编程接口 Socket API 解读(2)

Socket 是网络协议栈暴露给编程人员的 API&#xff0c;相比复杂的计算机网络协议&#xff0c;API 对关键操作和配置数据进行了抽象&#xff0c;简化了程序编程。 本文讲述的 socket 内容源自 Linux 发行版 centos 9 上的 man 工具&#xff0c;和其他平台&#xff08;比如 os-x …...

【黄啊码】PHP如何防止重复提交

防抖&#xff08;Debounce&#xff09;是一种防止重复提交的策略&#xff0c;它通过延迟一定时间来合并连续的操作&#xff0c;以确保只执行一次。 以下是几种防抖的实现方法以及对应的代码示例&#xff1a; 1. 前端 JavaScript 实现&#xff1a; 在前端使用 JavaScript 实现…...

2594. 修车的最少时间

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;二分枚举答案 写在最后 Tag 【二分枚举答案】【数组】 题目来源 2594. 修车的最少时间 题目解读 给你一个表示机械工能力的数组 ranks&#xff0c;ranks[i] 表示第 i 位机械工可以在 r a n k s [ i ] ∗ n 2 ranks[…...

vue 使用qrcode生成二维码并可下载保存

安装qrcode npm install qrcode --save代码 <template><div style"display: flex; flex-direction: column; align-items: center; justify-content center;"><div>查看溯源码&#xff0c;<a id"saveLink" style"text-decorati…...

网络融合的发展思路

虽然移动和固定网的融合代表了下一代网络的发展方向&#xff0c;但是目前移动和固定网的 发展还是独立的&#xff0c;有着各自的演进方式&#xff0c;要实现两个网络的完全融合是一个长期 的、逐步发展的过程。 网络融合的体系结构首先应坚持网络分层和功能分离的原则&#…...

报考浙江工业大学MBA项目如何选择合适的辅导班?

浙江工业大学MBA项目每年有数百人报考&#xff0c;在浙江省内除了浙大以外算是人数比较多的一个项目。2023级的招生中第一志愿也通过复试刷掉了百来人&#xff0c;在省内其实作为第一志愿报考的风险在逐渐增大&#xff0c;考生们如果坚持报考&#xff0c;则在针对联考初试的备考…...

算法训练第五十八天

总结&#xff1a;今日事单调栈的开端&#xff0c;还是挺巧妙的。 496. 下一个更大元素 I - 力扣&#xff08;LeetCode&#xff09; 代码&#xff1a; class Solution { public:vector<int> nextGreaterElement(vector<int>& nums1, vector<int>& …...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

uniapp 小程序 学习(一)

利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 &#xff1a;开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置&#xff0c;将微信开发者工具放入到Hbuilder中&#xff0c; 打开后出现 如下 bug 解…...

EasyRTC音视频实时通话功能在WebRTC与智能硬件整合中的应用与优势

一、WebRTC与智能硬件整合趋势​ 随着物联网和实时通信需求的爆发式增长&#xff0c;WebRTC作为开源实时通信技术&#xff0c;为浏览器与移动应用提供免插件的音视频通信能力&#xff0c;在智能硬件领域的融合应用已成必然趋势。智能硬件不再局限于单一功能&#xff0c;对实时…...

Git 命令全流程总结

以下是从初始化到版本控制、查看记录、撤回操作的 Git 命令全流程总结&#xff0c;按操作场景分类整理&#xff1a; 一、初始化与基础操作 操作命令初始化仓库git init添加所有文件到暂存区git add .提交到本地仓库git commit -m "提交描述"首次提交需配置身份git c…...

Linux中INADDR_ANY详解

在Linux网络编程中&#xff0c;INADDR_ANY 是一个特殊的IPv4地址常量&#xff08;定义在 <netinet/in.h> 头文件中&#xff09;&#xff0c;用于表示绑定到所有可用网络接口的地址。它是服务器程序中的常见用法&#xff0c;允许套接字监听所有本地IP地址上的连接请求。 关…...

初级程序员入门指南

初级程序员入门指南 在数字化浪潮中&#xff0c;编程已然成为极具价值的技能。对于渴望踏入程序员行列的新手而言&#xff0c;明晰入门路径与必备知识是开启征程的关键。本文将为初级程序员提供全面的入门指引。 一、明确学习方向 &#xff08;一&#xff09;编程语言抉择 编…...

python数据结构和算法(1)

数据结构和算法简介 数据结构&#xff1a;存储和组织数据的方式&#xff0c;决定了数据的存储方式和访问方式。 算法&#xff1a;解决问题的思维、步骤和方法。 程序 数据结构 算法 算法 算法的独立性 算法是独立存在的一种解决问题的方法和思想&#xff0c;对于算法而言&a…...