JS中的浅拷贝手段

news2024/10/9 4:22:45

1.slice方法

let arr = [1,2,3]
let newArr = arr.slice();
newArr[0] = 100;
console.log(arr);//[1,2,3]

当修改newArr的时候,arr的值并不改变,什么原因?因为这里newArr是arr浅拷贝后的结果,newArr和arr现在引用的已经不是同一块空间啦。

这就是浅拷贝!

但是浅拷贝还有潜在的问题:

let arr = [1,2,{val:4}];
let newArr = arr.slice();
newArr[2].val = 1000;
console.log(arr);//[1,2,{val:1000}]

不是已经不是同一块空间的引用了吗?为什么改变了newArr改变了第二个元素的val值,arr也跟着变了。
这就是浅拷贝的限制所在了,它只能拷贝一层对象,如果有对象的嵌套,那么浅拷贝将无能为力,但幸运的是,深拷贝就是为了解决这个问题而生的,它能解决无限极的对象嵌套问题,实现彻底的拷贝

2.手动实现浅拷贝

const shallowClone = target=>{
	if(typeof target==='object'&&target!==null){
		const cloneTarget = Array.isArray(target)?[]:{};
		for(let prop in target){
			if(target.hasOwnProperty(prop)){
				cloneTarget[prop] = target[prop];
			}
		}
		return cloneTarget;
	}else{
		return target;
	}
}

3.Object.assign

Object.assign()拷贝的是对象属性的引用,而不是对象本身。

let obj = {name:'sy',age:18};
const obj2 = Object.assign({},obj,{name:'sss'});
console.log(obj2);//{name:'sss',age:18}

4.concat浅拷贝数组

let arr = [1,2,3];
let newArr = arr.concat();
newArr[1] = 100;
console.log(arr);//[1,2,3]

5.展开运算符

let arr = [1,2,3]
let newArr = [...arr];//跟arr.slice()是一样的效果

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

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

相关文章

Java中常见的等待唤醒机制及实践

JDK自带的等待唤醒机制 在Java中,有一个JDK维度的等待唤醒机制。Object类的wait和notify,notifyAll 需要在synchronized同步代码块内并且对象必须获取到锁才能调用。否则会抛IllegalMonitorStateException异常。 当线程在尝试获取锁时失败,会被封装成节…

Mybatis-plus做了什么

Mybatis-plus做了什么 Mybatis回顾以前的方案Mybatis-plus 合集总览:Mybatis框架梳理 聊一下mybatis-plus。你是否有过疑问,Mybatis-plus中BaseMapper方法对应的SQL在哪里?它为啥会被越来越多人接受。在Mybatis已经足够灵活的情况下&…

《强烈推荐一个强大的书签管理工具》

在信息爆炸的时代,我们每天都会浏览大量的网页,收藏各种各样的书签。然而,随着书签数量的增加,管理起来也变得越来越困难。这时,一个强大的书签管理工具就显得尤为重要。今天,我要向大家推荐一款备受好评的…

EtherCAT学习笔记

文章目录 前言一、EtherCAT介绍二、EtherCA系统组成2.1 ESC(EtherCAT从站控制器)2.2 从站控制微处理器2.3 物理层器件2.4 其它应用层器件 三、EtherCAT数据帧结构3.1 寻址方式3.2 时钟3.3 通信模式 四、状态机和通信初始化五、应用层协议六、ESC概述6.1 EtherCAT从站控制芯片6.…

基于SpringBoot+Vue+MySQL的美食信息推荐系统

系统展示 用户前台界面 管理员后台界面 系统背景 在数字化时代,随着人们对美食文化的热爱与追求不断增长,美食信息推荐系统成为了连接食客与美食之间的重要桥梁。面对海量的美食信息,用户往往难以快速找到符合个人口味和需求的美食。因此&…

Java-数据结构-Lambda表达式 (✪ω✪)

文本目录: ❄️一、背景: ➷ 1、Lambda表达式的语法: ➷ 2、函数式接口: ❄️二、Lambda表达式的基本使用: ➷ 1、语法精简: ❄️三、变量捕获: ❄️四、Lambda在集合中的使用: …

Chromium 中js navigator对象c++实现分析

一、Navigator 对象 Navigator 对象包含有关浏览器的信息。 前端测试例子&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>接口测试</title> </head> <body><div id"example&q…

爱心表达公式

脚本公式 local r (math.sin(angle) * math.sqrt(math.abs(math.cos(angle)))) / (math.sin(angle) 1.4) - 2 * math.sin(angle) 2

IOT-Tree连接西门子PLC S7 200 Smart竟然如此简单

最近一个项目需要把用户现场控制柜接入到云端&#xff0c;控制柜使用西门子PLC Smart 200 SR40型号&#xff0c;已经运行多年&#xff0c;PLC通过以太网接口对接一个触摸屏。 按照我以往的经验&#xff0c;觉得触摸屏以太网接口已经被占用&#xff0c;那么只能通过剩余的RS485…

通过一个实际的例子,介绍 Java 的自动装箱与拆箱机制

Java 中 1000 1000 返回 false&#xff0c;但 100 100 返回 true&#xff0c;这一现象背后隐藏了 Java 对于对象和基本类型的内存管理机制。为了理解这个现象&#xff0c;我们需要从 Java 的自动装箱与拆箱机制、对象引用和数值缓存策略等角度深入探讨。让我们一步一步通过 J…

电脑怎么卸载软件?学会这6个卸载软件技巧就够了(精选)

电脑怎么卸载软件&#xff1f;在日常的办公生活中&#xff0c;我们需要下载一些工具来辅助工作&#xff0c;当不需要这些工具的时候&#xff0c;我们就需要卸载这些软件了。很多小伙伴表示卸载软件卸载不干净&#xff0c;还是回残留一些文件&#xff0c;或者是卸载不了&#xf…

Verilog开源项目——百兆以太网交换机(九)表项管理模块设计

Verilog开源项目——百兆以太网交换机&#xff08;九&#xff09;表项管理模块设计 &#x1f508;声明&#xff1a;未经作者允许&#xff0c;禁止转载 &#x1f603;博主主页&#xff1a;王_嘻嘻的CSDN主页 &#x1f511;全新原创以太网交换机项目&#xff0c;Blog内容将聚焦整…

新型僵尸网络针对 100 个国家发起 30 万次 DDoS 攻击

近日&#xff0c;网络安全研究人员发现了一个名为 Gorilla&#xff08;又名 GorillaBot&#xff09;的新僵尸网络恶意软件家族&#xff0c;它是已泄露的 Mirai 僵尸网络源代码的变种。 网络安全公司 NSFOCUS 在上个月发现了这一活动&#xff0c;并称该僵尸网络在今年 9 月 4 日…

【Java 循环控制实例详解【While do... while】】

Java 循环控制详解【While & do… while】 在 Java 中&#xff0c;循环控制是程序设计中非常重要的部分&#xff0c;主要包括 while 循环和 do...while 循环。本文将详细介绍这两种循环的基本语法、执行流程及相关示例。 1. while 循环控制 基本语法 循环变量初始化; wh…

在uniapp中实现长按聊天对话框可以弹出对话框然后可以删除该条对话,单击可以进入该条对话框的对话页面

效果展示 效果描述 长按【大于1s】某一条对话框会弹出一个对话框&#xff0c;点击确定按钮就可以将当前对话框从列表中进行删除&#xff0c;如果点击取消则不做额外操作。 如果只是点击了一下&#xff0c;时间【小于1s】的情况下会直接引入到与该用户的对话框详情页面。 代码…

ai绘画变现方式全解析,教你如何通过AI绘画赚钱

*AI绘画变现方式全解析&#xff0c;教你如何通过AI绘画赚钱* *为什么选择AI绘画&#xff1f;* 你是否曾经梦想过成为一名画家&#xff0c;但现实却让你无从下手? 或者你已经是一位艺术家&#xff0c;但苦于作品没能带来足够的收入&#xff1f;随着AI技术的飞速发展&#xff…

IDEA没有代码自动提示问题的解决

一、问题描述 如图&#xff0c;博主输入new Hash 没有提示出HashMap之类的api 原因在于&#xff1a;不小心打开了idea的省电模式&#xff0c;在这个模式下&#xff0c;idea是不会为我们提供自动提示的 二、问题解决 在File中找到 Power Save Mode选项&#xff0c;将它关闭即…

【西电电路实验】1. 仪器的使用(电子线路 III 电院)

文章目录 前言一、实验原理二、实验过程1. [高频信号源DSG3030 数据手册](https://www.rigol.com/Images/DSG3000_DataSheet_CN_tcm4-3558.pdf)2. [信号源 SDS 2320X 数据手册](https://www.siglent.com/u_file/download/24_05_29/SDS2000X%20HD_Datasheet_CN02A.pdf#:~:textSD…

MySQL多表查询:标量子查询

先看我的emp表结构 emp表 子查询基本语法 select * from t1 where column1 (select column1 from t2);例子1&#xff1a;查询"销售部" 的所有员工信息 这个可以先拆解为两个 a.查询"销售部"的部门ID select id from dept where name 销售部; b. 根…

2024重生之回溯数据结构与算法系列学习(11)【无论是王道考研人还是IKUN都能包会的;不然别给我家鸽鸽丟脸好嘛?】

欢迎各位彦祖与热巴畅游本人专栏与博客 你的三连是我最大的动力 以下图片仅代表专栏特色 [点击箭头指向的专栏名即可闪现] 专栏跑道一 ➡️ MYSQL REDIS Advance operation 专栏跑道二➡️ 24 Network Security -LJS ​ ​ ​ 专栏跑道三 ➡️HCIP&#xff1b;H3C-SE;CCIP——…