【JavaScript】面试手撕浅拷贝

【JavaScript】面试手撕浅拷贝

引入

浅拷贝和深拷贝应该是面试时非常常见的问题了,为了能将这两者说清楚,于是打算用两篇文章分别解释下深浅拷贝。

PS: 我第一次听到拷贝这个词,有种莫名的熟悉感,感觉跟某个英文很相似,后来发现确实Copy的音译,感觉这翻译还是蛮有意思的。🐶

什么是浅拷贝

行文至此,肯定会有朋友问,什么事浅拷贝呢?顾名思义,就是浅浅的copy一下。🐶

JavaScript中,对于浅拷贝分为两种情况。

  • 对于浅拷贝,如果待拷贝的数据是基础类型的属性(如NumberStringBoolean等基本类型),那么只需要将这个值直接复制过来即可
  • 对于浅拷贝,如果待拷贝的数据是引用类型的属性(如对象,数组),那么复制的则是对象的引用以及第一层的基础属性值

基础类型与引用类型的区别

谈到这,顺带谈一下基础类型引用类型的区别。

基础类型
  • 直接存储在栈内存中。
  • 存储的是实际的数据值。
  • 内存空间固定且较小。
引用类型
  • 对象(如数组,函数,对象等)的属性值存在堆内存中。
  • 栈内存中存储的是指向堆内存中对象的引用或指针,而非对象本身的内容。
  • 内存空间大小不固定,取决于对象结构的复杂性。

手动实现浅拷贝

因为值的拷贝可以直接赋值即可。我们这里实现下对象的浅拷贝。

对象的浅拷贝:复制对象的引用以及第一层属性值。

思路: 我们先构造一个新对象,然后将它的属性值等于原对象的属性值。这里新对象和原对象的属性依然会共享引用,但对于第一层的基础属性却不会共享了。所以我们实现的浅拷贝 是拷贝一层。

function shallowClone(obj) {const newObj = {};for (let prop in obj) {if (obj.hasOwnProperty(prop)) {newObj[prop] = obj[prop];}}return newObj;
}const test = { a: 1, b: 2 };
const newTest = shallowClone(test);
newTest.a = 2;
console.log('test: ',test,' newTest: ', newTest);
/*** 输入如下,第一层基础属性的值不会共享了* test:  { a: 1, b: 2 }  newTest:  { a: 2, b: 2 }*/

Js自带浅拷贝的方法

对于Js的浅拷贝,可以分为对象浅拷贝数组浅拷贝

对象浅拷贝

对于对象的浅拷贝有object.assgin拓展运算符实现,这里的浅拷贝都是拷贝一层。

Object.assign

Object.assign()ES6 中引入的一个方法,用于将一个或多个源对象的所有可枚举属性分配到目标对象上。

const original = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, original);
拓展运算符

注意:这种方式同样会创建一个新的对象,但对嵌套对象或数组只会进行浅拷贝。

const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };

数组浅拷贝

slice

slice()方法是用来从数组中提取一部分元素生成新数组的方法,它确实实现了数组的浅拷贝。

let originalArray = [1, 2, { a: 3 }, [4, 5]];
let copiedArray = originalArray.slice();// 浅拷贝后,原始数组和拷贝数组中基本类型元素是独立的
copiedArray[0] = 100; // 修改基本类型元素,不影响原数组
console.log(originalArray); // 输出:[1, 2, { a: 3 }, [4, 5]]
console.log(copiedArray); // 输出:[100, 2, { a: 3 }, [4, 5]]// 但是对于引用类型元素,修改其属性或内容会同时影响原数组和拷贝数组
copiedArray[2].a = 456;
copiedArray[3][0] = 7;console.log(originalArray); // 输出:[1, 2, { a: 456 }, [7, 5]]
console.log(copiedArray); // 输出:[100, 2, { a: 456 }, [7, 5]]

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

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

相关文章

局域网如何搭建服务器?

随着网络的普及和应用场景的不断拓展,局域网搭建服务器逐渐成为大家关注的话题。在日常生活和工作中,我们经常需要通过局域网和互联网进行文件共享、资源访问等操作,而搭建服务器则是实现这些功能的重要手段之一。本文将针对局域网搭建服务器…

SwiftUI 如何在运行时从底层动态获取任何 NSObject 对象实例

概览 众所周知,SwiftUI 的推出极大地方便了我们这些秃头码农们搭建 App 界面。不过,有时我们仍然需要和底层的 UIKit 对象打交道。比如:用 SwiftUI 未暴露出对象的接口改变视图的行为或外观。 从上图可以看到,我们 SwiftUI 代码并没有设置视图的背景色,那么它是怎么变成绿…

vscode 本地/远程添加python解释器

文章目录 1. 背景2. 增加python解释器 1. 背景 我们在使用 vscode 去远程调试代码时,如果环境存在多个 Python 版本(如用 conda 管理),没有选择正确的 Python 解释器会导致少包、库不适配等各种问题 2. 增加python解释器 windo…

鸿蒙系统适配的流程

鸿蒙系统适配的流程通常涉及以下关键步骤,以下是鸿蒙系统适配的一般流程,具体流程可能会根据项目的具体需求和开发团队的情况进行调整和优化。北京木奇移动技术有限公司,专业的软件外包开发公司,欢迎交流合作。 1. 准备工作&#…

盘点:国家智能算力中心

文章目录 1. Main2. My thoughtsReference 1. Main 按照《中国算力白皮书(2022年)》的定义,算力主要分为四部分:通用算力、智能算力、超算算力、边缘算力。通用算力以CPU芯片输出的计算能力为主;智能算力以GPU、FPGA、…

【一起学习Arcade】(6):属性规则实例_约束规则和验证规则

一、约束规则 约束规则用于指定要素上允许的属性配置和一般关系。 与计算规则不同,约束规则不用于填充属性,而是用于确保要素满足特定条件。 简单理解,约束规则就是约束你的编辑操作在什么情况下可执行。 如果出现不符合规则的操作&#…

解释一下前端框架中的虚拟DOM(virtual DOM)和实际DOM(real DOM)之间的关系。

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

leetcode日记(36)全排列

想思路想了很久……思路对了应该会很好做。 我的思路是这样的&#xff1a;只变化前n个数字&#xff0c;不断增加n&#xff0c;由2到nums.size()&#xff0c;使用递归直到得到所有结果 代码如下&#xff1a; class Solution { public:vector<vector<int>> permut…

正信法律:借款纠纷的民事起诉状怎么写

在借款纠纷中&#xff0c;当协商无果时&#xff0c;诉诸法律成为债权人追回债务的有效途径。而民事起诉状作为启动诉讼程序的法律文书&#xff0c;其撰写质量直接关系到案件的受理与判决。本文旨在简明扼要地阐述如何撰写一份规范的借款纠纷民事起诉状。 起诉状需包含以下几个关…

阿克曼转向车型导航末段位姿调整控制

1目标 分析RPP算法时控制器算法学习1-RPP受控纯追踪算法发现,在终点时如果角度还有较大偏差,该算法无法进行很好的调整,故开始尝试在末端接近目标点时,用自己的控制算法去调整位姿,姑且命名为TEA算法(Target-End-Adjust Algorithm for Ackermann) 2控制思路 step1. 将…

C# Onnx segment-anything 分割万物 一键抠图

目录 介绍 效果 模型信息 sam_vit_b_decoder.onnx sam_vit_b_encoder.onnx 项目 代码 下载 C# Onnx segment-anything 分割万物 一键抠图 介绍 github地址&#xff1a;https://github.com/facebookresearch/segment-anything The repository provides code for runn…

设计模式(十二)享元模式

请直接看原文: 原文链接:设计模式&#xff08;十二&#xff09;享元模式-CSDN博客 -------------------------------------------------------------------------------------------------------------------------------- 享元模式定义 享元模式是结构型设计模式的一种&am…

Kubernetes-1

学习Kubernetes第一天 k8s-11、什么是Kubernetes2、配置Kubernetes2.1、准备三台全新的虚拟机2.2、关闭防火墙和SElinux2.3、修改主机名2.4、升级操作系统(三台一起操作)2.5、配置主机hosts文件&#xff0c;相互之间通过主机名互相访问2.6、配置master和node之间的免密通道2.7、…

KMP算法和Manacher算法

KMP算法 KMP算法解决的问题 KMP算法用来解决字符串匹配问题: 找到长串中短串出现的位置. KMP算法思路 暴力比较与KMP的区别 暴力匹配: 对长串的每个位,都从头开始匹配短串的所有位. KMP算法: 将短字符串前后相同的部分存储在 n e x t next next数组里,让之前匹配过的信息指…

上传项目的全部依赖到maven私有仓库-nexus

背景 项目之前的私有仓库不能使用了&#xff0c;本地仓库可以&#xff0c;但是一旦clean就没了&#xff0c;所以在本地有依赖的时候可以自己搭建一个maven私有仓库然后将依赖全部上传上去 搭建&#xff1a;使用docker-compose方式搭建 docker-compose文件 version: "3…

Python算法100例-3.1 回文数

完整源代码项目地址&#xff0c;关注博主私信源代码后可获取 1.问题描述2.问题分析3.算法设计4.确定程序框架5.完整的程序6.问题拓展7.巧用字符串技巧 1&#xff0e;问题描述 打印所有不超过n&#xff08;取n<256&#xff09;的其平方具有对称性质的数&#xff08;也称回…

在国内如何申请US,visa卡?

随着跨境与AI的发展大家对美国虚拟卡的需求也越来越多&#xff0c;比如说亚马逊、ebay、Etsy、ChatGPTPLUS、midjourney、POE等等软件以及海淘的需要&#xff0c;所以我们需要用到美国虚拟卡的场景就越来越多 如何获得一张US 虚拟信用卡&#xff1f; 方法很简单&#xff0c;点…

一线大厂软件测试面试题及答案解析,2024最强版...

【软件测试面试突击班】2024吃透软件测试面试最全八股文攻略教程&#xff0c;一周学完让你面试通过率提高90%&#xff01;&#xff08;自动化测试&#xff09; 1、什么是兼容性测试?兼容性测试侧重哪些方面? 参考答案: 兼容测试主要是检查软件在不同的硬件平台、软件平台上…

CNAN知识图谱辅助推荐系统

CNAN知识图谱辅助推荐系统 文章介绍了一个基于KG的推荐系统模型&#xff0c;代码也已开源&#xff0c;可以看出主要follow了KGNN-LS 。算法流程大致如下&#xff1a; 1. 算法介绍 算法除去attention机制外&#xff0c;主要的思想在于&#xff1a;user由交互过的item来表示、i…

OpenShift AI - 部署并使用 LLM 模型

《OpenShift / RHEL / DevSecOps 汇总目录》 说明&#xff1a;本文已经在 OpenShift 4.15 RHODS 2.7.0 的环境中验证 文章目录 安装 OpenShift AI 环境安装 Minio 对象存储软件配置 Single Model Serving 运行环境创建项目和 Workbench准备模型和配置 Model Server访问 LLM 模…