js中对象的拷贝(复制)

nest-object-deep-copy:一个纯Javascript函数执行真实对象的硬拷贝 深度复制嵌套对象 如果这个项目对您有帮助,请加星号支持 :red_heart: (谢谢!)。 什么 这是纯JavaScript函数,旨在从原始javascript对象创建真实的硬拷贝。 为什么 它只是一个纯函数,最终的导入大小仅为662个字节。 它给你真正的硬拷贝,避免使用传播经营者,Object.assign和JSON.parse(JSON.stringify(对象))的。 特征 JSON.parse(JSON.stringify(对象)) 传播算子/ Object.assign 嵌套对象深层复制 :check_mark: :cross_mark: :check_mark: :cross_mark: :check_mark: :check_mark: :cross_mark: :cross_mark: :check_mark: 循环参考 抛出错误 保留圆形参考 优雅地处理循环参考 const originalObject = { a : 'test' , f : 1 } ; originalObject . a = original 立即下载

一、场景

除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝

将一个对象赋值给另外一个对象。

var a = [1,2,3];
var b = a;
b.push(4); // b中添加了一个4
alert(a); // a变成了[1,2,3,4]  

自定义对象

var obj = {a:10};
var obj2 = obj;
obj2.a = 20; // obj2.a改变了,
alert(obj.a); // 20,obj的a跟着改变  

这就是由于对象类型直接赋值,只是将引用指向同一个地址,导致修改了obj会导致obj2也被修改

二、浅拷贝

所以,我们需要封装一个函数,来对对象进行拷贝,通过for in 循环获取基本类型,赋值每一个基本类型,才能真正意义上的复制一个对象

var obj = {a:10};
function copy(obj){
    var newobj = {};
    for ( var attr in obj) {
        newobj[attr] = obj[attr];
    }
    return newobj;
}
var obj2 = copy(obj);
obj2.a = 20;
alert(obj.a); //10  

这样就解决了对象赋值的问题。

三、深拷贝

但是这里存在隐患,如果obj中,a的值不是10,而是一个对象,这样就会导致在for in中,将a这个对象的引用赋值为新对象,导致存在对象引用的问题。

var obj = {a:{b:10}};
function copy(obj){
    var newobj = {};
    for ( var attr in obj) {
        newobj[attr] = obj[attr];
    }
    return newobj;
}
var obj2 = copy(obj);
obj2.a.b = 20;
alert(obj.a.b); //20  

因此,由于这个copy对象只是对第一层进行拷贝,无法拷贝深层的对象,这个copy为浅拷贝,我们需要通过递归,来拷贝深层的对象。将copy改造成递归即可

var obj = {a:{b:10}};
function deepCopy(obj){
    if(typeof obj != 'object'){
        return obj;
    }
    var newobj = {};
    for ( var attr in obj) {
        newobj[attr] = deepCopy(obj[attr]);
    }
    return newobj;
}
var obj2 = deepCopy(obj);
obj2.a.b = 20;
alert(obj.a.b); //10  
【用unity实现100个游戏之19】制作一个3D传送门游戏,实现类似鬼打墙,迷宫,镜子,任意门效果(附项目源码) 本文介绍了Unity中实现传送门效果的完整流程。通过第一人称角色控制器实现移动,使用PortalView脚本和自定义Unlit Shader渲染门内场景,巧妙利用相机位置和旋转同步实现动态视角。重点解决了近裁剪面问题,确保远距离渲染正确性。最后通过PortalTeleporter脚本实现传送功能,检测碰撞并计算相对位置进行瞬移。该方法无需复杂插件,代码简洁高效,适用于各类3D场景中的传送门实现。 阅读详情

相关推荐

Python爬虫实战:5分钟搞定慢慢买历史价格查询(附完整代码)

本文提供了一份Python爬虫实战指南,教你如何快速编写脚本自动查询慢慢买网站的商品历史价格。文章详细拆解了环境准备、接口分析、核心代码实现及常见问题应对,并附有完整代码,帮助读者将爬虫技术应用于日常比价,实现高效购物决策。

weixin_29053577的博客 1010

JS对象的引用,对象的拷贝

目录 一、场景 二、浅拷贝 三、深拷贝 一、场景 除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝 将一个对象赋值给另外一个对象。 var a = [1,2,3]; var b = a; b.push(4); // b中添加了一个4 alert(a...

weixin_30770495的博客 560

Clawdbot完 整安装与使⽤指南(保姆级教程)

Clawdbot 是⼀款开源个⼈ AI 智能体(Personal AI Agent),核⼼优势为本地部署+系统级执⾏+全渠道交互,可通过聊天⼯具(Telegram/WhatsApp 等)下达指令,⾃动完成⽂件整理、代码部署、⽇程同步等任务,所有数据本地存储,隐私零泄露。截⾄2026年 1 ⽉,GitHub 星标突破 4 万+,⽀持 Windows/Mac/Linux/云服务器多平台。

A1609926242的博客 1610

JavaScript深拷贝与浅拷贝

首先了解一下深拷贝与浅拷贝。在js中把一个对象的属性与方法复制给另一个对象,或者是将父对象的属性拷贝给子对象,称为拷贝。所谓浅拷贝(shallow copy),就是对象被拷贝时,实际上拷贝的只是该对象在内存中的位置指针(也可以说是该对象的引用)。在这种情况下,如果我们修改拷贝对象,就相当于修改了原对象。深拷贝(deep copy)实现方式与浅拷贝基本相同,但是它避免了修改原对象这一问题。首先也是通...

u012194956的博客 486

手把手教你搞定6脚三位一体数码管的驱动(附C语言源码与Visual Studio调试技巧)

本文详细解析了6脚三位一体数码管的驱动原理与实战技巧,包括引脚复用、动态扫描时序、Visual Studio模拟调试及单片机实现。通过C语言源码示例和调试技巧,帮助开发者快速掌握非标准数码管的驱动方法,提升硬件开发效率。

weixin_30613727的博客 591

从DDH到FastANI:原核生物分类黄金标准的进化史与技术对比

本文系统梳理了原核生物分类标准从DDH到FastANI的四次技术革命,详细解析了95%相似度阈值的科学依据及应用场景。通过对比DDH、16S rRNA、ANI和FastANI的技术特点与性能指标,为微生物研究者提供基因组分类的实战指南,并展望第三代测序时代的分类新挑战。

weixin_29275257的博客 413

JS在不改变旧对象的前提下进行对象copy的几种方式

我们js中的对象,会包含很多属性值和方法,当我们想把它的内部属性复制给一个新的对象时,我们如何去做呢? 你可能会说直接 b = a就可以了。 no no no,这样两个对象其实指针指向的还是一个内存中的对象,当b发生变化的时候,a也是变化的,这并不是我们想要的结果。 那么,以下面几种方法来看看具体实现过程吧。 如下,有一个person对象,其中包括几个基本的属性值 const person = { 'name': 'wangying', 'sex' : 'female', 'age' : 18, }

Jenn168的博客 1266

告别环境配置焦虑:在Win10的Ubuntu子系统里搞定CSAPP实验环境(附32/64位库编译指南)

本文详细介绍了如何在Win10的Ubuntu子系统中搭建CSAPP实验环境,包括WSL 2的安装与配置、32/64位库的编译指南以及高效开发工具链的设置。通过优化WSL性能和使用实用技巧,开发者可以轻松应对CSAPP实验中的环境配置问题,提升学习效率。

weixin_30443813的博客 296

ES6完整笔记整理

1.es简介 术语ECMAScript和我们平时表达的JavaScript实际是一个意思,在日常场合可以互换,ECMA组织(前身为欧洲计算机制造商协会)来制定和发布的脚本语言的规范。1997年ECMA发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。 ES的几个重要版本 ES5 : 09年发布(我们之前学的是ES5) ES6(ES2015) : 15年发布, 也称为ECMA2015 ES7(ES2016) :

Welcome to my csdn! 516

Docker 安装 CentOS7

本文主要介绍了docker 下安装centos7。访问 CentOS 镜像库地址:https://hub.docker.com/_/centos?tab=tags&page=1。可以通过 Sort by 查看其他版本的 CentOS 。默认是最新版本 centos:latest 。 使用以下命令来查看是否已安装了 centos7: 启动centos容器,并把docker上centos的22端口映射到本机60001端口(端口号可以自己指定) 3、进入到Centos容器 4.安装ssh服务和网络必须软件

折腾java的博客 1万+

【skill】漫剧 AI 视频创作的知识库 + API 调用手册

方案适用场景在对话中使用,自动触发注入到任何 LLM(Cursor/Windsurf/Claude API)Python 模块集成到自动化管线/批量生成GitHub 又限速了,不过前几轮搜到的已经够用了。根据搜索结果,结合已分析过的项目,给你整理完整对比 🐮。

突围 986

js 深拷贝 以及 两个对象结构一样,用第二个填充第一个

/*function deepCopy(obj) { let result = typeof obj.splice === "function" ? [] : {}; if (obj && typeof obj === 'object') { for (let key in obj) { if (obj[key] &&...

qq_37899792的博客 566

避坑指南!YOLO26模型导出/推理常见问题,99%的开发者都踩过

版本锁定:Ultralytics=8.4.2、OpenVINO=2024.0.0、Python=3.10,版本不一致是80%问题的根源;参数对齐:训练/导出/推理的imgsz、归一化、坐标映射必须完全一致,差一步就出错;算子统一:避免自定义算子,优先用YOLO26原生算子(C3k2/PSABlock),确保推理引擎兼容;分步验证:导出后先校验ONNX/IR模型→单图片推理→RTSP流推理→72小时稳定性测试,一步过易踩坑;工业级测试。

专注于Python爬虫开发,分享爬虫技巧、项目实战与反爬经验,使用Scrapy、BeautifulSoup等工具,解决数据抓取难题。 510

【JS】归纳总结现代javascript对象的引用和复制(浅拷贝与深拷贝)

在 JavaScript 中有 8 种基本的数据类型(注:7 种基本数据类型也称为原始类型 和 1 种引用类型) 1. `number` 用于任何类型的数字:整数或浮点数,在 `±(2^53-1)` 范围内的整数。 2. `bigint` 用于任意长度的整数。 3. `string` 用于字符串:一个字符串可以包含 0 个或多个字符,所以没有单独的单字符类型。 4. `boolean` 用于 `true` 和 `false`。 5. `null` 用于未知的值 —— 只有一个 `null` 值的独立类型。

余浩的博客 998

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

Js复制对象/克隆对象 Js浅拷贝与深拷贝 浅拷贝和深拷贝的实现方法

Js复制对象/克隆对象 Js浅拷贝与深拷贝 浅拷贝和深拷贝的实现方法 前言 学习Js克隆一个对象,作为准备工作,需要理解Js中的数据类型和按值传递:Js中的数据类型和按值传递 浅拷贝最后两种方法不理解的话,可以读es5替换函数中的this的方法 Js中的prototype、__proto__和constructor 1. 浅拷贝 1.1. 赋值和浅拷贝 概念: 浅拷贝是按位拷贝对象,它会创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是原始类型,拷贝的就是原始类型的值;如果属性是引用类型

神奇的兔子 2435

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

理解深拷贝与浅拷贝:JavaScript 中的对象复制方式

浅拷贝是指创建一个新的对象,但新对象的属性值仍然指向原始对象中的相同引用类型的内存地址。也就是说,如果对象中包含引用类型(例如数组或对象),那么它们在拷贝后依然指向相同的内存空间。因此,对这些引用类型的修改会影响原始对象。理解浅拷贝与深拷贝的区别对于 JavaScript 开发者至关重要。虽然两者看似相似,但它们的工作原理和适用场景却大相径庭。在实际开发中,应根据对象的复杂性和操作需求来选择合适的拷贝方式。希望通过这篇文章,你能够更清晰地了解浅拷贝与深拷贝,并能够在项目中正确应用它们,避免常见的坑。

一名热衷于技术的全栈开发者,专注于前端与后端的全面技术探索。在这里,我将分享我在技术领域的学习与成长,助力更多开发者的进步。 1461

JavaScript--对象的引用和复制(深浅拷贝)

对象的引用和复制 原始类型的复制: let a = "你好"; let b = a; 这个时候,,我们就有了两个独立的变量"你好",这就好比克隆羊一样,它们都有自己的身体,自己控制自己,一直羊翘翘了,也不会影响另一只羊。 而对象的克隆就不是这样,对象的克隆,并不是真正意义上的克隆。赋值的对象变量存储的不是对象本身,而是该对象中的"在内存中的地址",所以说是该对象的"引用"。所以说在复制对象的时候,只是引用被复制,而该对象并没有被复制,这就好比分身,他们都指向同一个本体,如果分身受到伤害,本体也会受

有一种陪伴叫做jay的博客 1587

Vue3/JavaScript 对象复制:浅拷贝与深拷贝

浅拷贝:用或...,适合简单对象。深拷贝:优先使用或 Lodash,复杂场景手动实现需谨慎。通过合理选择拷贝方式,可避免数据意外修改,提升代码健壮性。

BillKu的博客 982

js对象复制——浅拷贝、深拷贝

一、场景 除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝 将一个对象赋值给另外一个对象。 var a = [1,2,3]; var b = a; b.push(4); // b中添加了一个4 alert(a); // a变成了[1,2,3,4] 自定义对象 var obj = {a:10}; var obj2 = obj; obj2.a = ...

qq_40016476的博客 1252

常用的js对象复制(浅拷贝和深拷贝)

常用的js对象复制(浅拷贝和深拷贝) js中对象是引用数据类型,如果只是通过 objectB = objectA 简单的赋值,objectA 和 objectB 指向的是同一个地址,其实际的值是同一块东西,举个例子 let A = { a: 1 } let B = A B.a = 2 // 此时改变B中a的值 console.log(A) // { a: 2 } console.log(B...

Crayon。博客 690

javascript深拷贝与浅拷贝:对象复制的奥秘

深拷贝(Deep Copy)是指创建一个新对象,完全复制原对象的所有属性,包括嵌套的对象和数组,使得新对象与原对象完全独立,修改新对象不会影响原对象。浅拷贝(Shallow Copy)是创建一个新对象,只复制原对象的第一层属性,如果属性是基本类型则复制值,如果是引用类型则复制引用地址(即共享同一个内存空间)。

老衲爱洗头的博客 551

html——js 对象的深浅复制拷贝问题

1、js如果使用等于号直接赋值对象,那么对该对象是浅复制,当一个对象的值被修改,那么另一个对象的值也会被修改。 2、若要使用深复制,可以采用JSON.stringify/parse方法: let arr1 = [1,2,3,4]; let arr2 = JSON.parse(JSON.stringify(arr1)); arr2.push(5); console.log(arr1); //[1, ...

知北行的博客 511

js实现复制obj对象(深拷贝和浅拷贝)

今天和大家分享一个关于实现复制一个对象的方法 首先我们需要了解一个知识点,那就是es6的新方法 Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 语法:Object.assign(target, …sources) target 目标对象  sources 源对象  返回值是目标对象 注意:如果目标对象中的属性具有相同的键,则属性将...

dyx19971026的博客 3285

lodash深拷贝函数实现:解决JavaScript对象复制难题

在JavaScript开发中,对象复制是常见需求,但直接赋值会导致引用传递,修改副本会影响原对象。深拷贝(Deep Clone)能创建全新对象,实现真正的独立复制。lodash的`cloneDeep`函数提供了可靠的深拷贝解决方案,支持多种数据类型和复杂嵌套结构。 ## 深拷贝与浅拷贝的区别 | 拷贝类型 | 特点 | 适用场景 | lodash实现 | |---------|------|-...

gitblog_00949的博客 1122

JS深复制对象方法(深拷贝)

前言:在日常开发中需要复制一条数据。此时如果用变量等号赋值或者object.assign();方法,然后操作改变新赋值对象的值会影响原对象的值。此时深拷贝对象就应用而生。// 序列化:对象的类型转换成字符串类型。//反序列化:字符串类型的类型转换成对象。...

书中自有妍如玉的博客 1035

JavaScript对象复制:浅拷贝与深拷贝原理及工程实践

在JavaScript中,对象复制并非简单的值传递,而是涉及内存地址、引用类型与运行时行为的核心机制。理解原始值与引用值的区别,是掌握浅拷贝(如展开运算符、Object.assign)和深拷贝(如structuredClone、Lodash cloneDeep)的前提。浅拷贝仅隔离第一层属性,适用于React状态更新等不可变场景;深拷贝则需处理Date、RegExp、Map、Set及循环引用等复杂情况,保障数据完全独立,广泛用于表单快照、Undo/Redo、Web Worker通信等关键业务。本文结合内存模

weixin_29015801的博客 343

javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法

javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法前言在js中,数组和对象的复制如果使用=号来进行复制,那只是浅拷贝。如下图演示: 如上,arr的修改,会影响arr2的值,这显然在绝大多数情况下,并不是我们所需要的结果。 因此,数组以及对象的深拷贝就是javascript的一个基本功了。数组的深拷贝条条大道通罗马,实现数组的深拷贝,是有好几种方法的。举例如下:for 循环

FungLeo's Blog 13万+
上一篇: js中的快速排序
下一篇: js中的闭包
hp柠檬茶
博客等级 码龄11年 2粉丝 12原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值