Javascript Object.assgin()详解以及深浅拷贝

news2024/10/3 22:14:07

Object.assign() 方法是 JavaScript 中用于将所有可枚举属性的值从一个或多个源对象复制到目标对象的方法。它将返回目标对象。这是一种浅拷贝,也就是说,如果源对象中的属性是一个对象或数组,那么这个属性的引用将被复制,而不是对象的深层次拷贝。
语法
javascript
Object.assign(target, ...sources)
target: 目标对象,所有源对象的属性将被复制到这个对象上。
sources: 源对象,其可枚举属性会被复制到目标对象。
示例
基本用法
javascript
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);        // { a: 1, b: 4, c: 5 }
console.log(returnedTarget); // { a: 1, b: 4, c: 5 },与target相同,因为返回的就是target
对象属性的覆盖
如果目标对象与源对象中有同名属性,源对象的属性值会覆盖目标对象的属性值。
javascript
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

Object.assign(target, source);
console.log(target.b); // 4,被source中的b覆盖了
多个源对象
可以从多个源对象中复制属性到目标对象,后面的源对象属性会覆盖前面的同名属性。
javascript
const target = { a: 1, b: 2 };
const source1 = { b: 4, c: 5 };
const source2 = { c: 6, d: 7 };

Object.assign(target, source1, source2);
console.log(target); // { a: 1, b: 4, c: 6, d: 7 }
浅拷贝
Object.assign() 只会进行浅拷贝,如果源对象的属性是引用类型(如对象或数组),那么复制的是引用,不是值。
javascript
const target = {};
const source = { a: { b: 2 } };

Object.assign(target, source);
console.log(target.a === source.a); // true,说明复制的是引用
避免覆盖目标对象原有属性
如果你不想改变目标对象,可以先用空对象作为目标对象,然后将结果赋值给新的变量。
javascript
const source = { a: 1, b: 2 };
const targetCopy = Object.assign({}, source);

console.log(targetCopy); // { a: 1, b: 2 }
注意事项
Object.assign() 不会复制源对象的不可枚举属性。
Object.assign() 也不会复制对象上的属性描述符(如 writable, enumerable, configurable)。
对于值为 null 或 undefined 的源对象,Object.assign() 不会抛出错误,但也不会进行任何复制操作。
使用 Object.assign() 可以在需要合并对象或复制对象属性时非常有用,但了解其浅拷贝的特性以及如何处理引用类型的属性是很重要的。

 

JavaScript中的深拷贝是一个常见但重要的概念,它指的是创建一个新的对象,这个新对象与原始对象完全独立,拥有自己独立的内存地址,修改新对象不会影响原始对象。下面是对JavaScript深拷贝的详细解析:
一、深拷贝与浅拷贝的区别
浅拷贝:只复制对象的第一层属性,如果属性是基本类型,则复制其值;如果属性是引用类型(如对象、数组),则复制其引用地址,即新旧对象共享同一个引用。
深拷贝:不仅复制对象的第一层属性,还递归地复制对象的所有嵌套属性,生成一个新的、完全独立的对象副本。
二、深拷贝的必要性
深拷贝在需要确保对象独立性、避免数据共享和意外修改的场景中尤为重要。例如,在状态管理、数据处理和表单数据处理等场景中,深拷贝能确保数据的完整性和安全性。
三、深拷贝的常见方法
JSON.parse(JSON.stringify(obj))
这是实现深拷贝的一种简单方法,通过将对象序列化为JSON字符串,然后再解析这个字符串得到一个新的对象。这种方法简单易用,但存在局限性,如无法处理函数、undefined、Symbol等特殊类型,也无法拷贝对象的原型链和循环引用对象。
递归实现深拷贝
通过递归遍历对象,对每个属性进行深拷贝。这种方法能够处理各种复杂的数据结构,但需要手动处理循环引用等特殊情况。
示例代码:
javascript
   function deepClone(obj, hash = new WeakMap()) {
       if (typeof obj !== 'object' || obj === null) {
           return obj;
       }
       if (hash.has(obj)) {
           return hash.get(obj);
       }
       const target = Array.isArray(obj) ? [] : {};
       hash.set(obj, target);
       Reflect.ownKeys(obj).forEach(key => {
           const val = obj[key];
           if (typeof val === 'object' && val !== null) {
               target[key] = deepClone(val, hash);
           } else {
               target[key] = val;
           }
       });
       return target;
   }
   
使用Lodash的cloneDeep方法
Lodash是一个非常流行的JavaScript工具库,其中的cloneDeep函数提供了强大的深拷贝功能,能够处理对象中的大多数复杂情况,包括循环引用。使用这种方法需要引入Lodash库。
示例代码:
javascript
   const _ = require('lodash');
   let obj1 = {name: "Alice", info: {age: 25}};
   let obj2 = _.cloneDeep(obj1);
   obj2.info.age = 30;
   console.log(obj1.info.age); // 输出: 25
   
使用structuredClone方法
structuredClone是一个新的API,它使用结构化克隆算法来实现深拷贝。该算法能够处理大多数复杂数据结构,如日期、正则表达式、循环引用等。不过,需要注意的是,较旧的浏览器版本可能不支持此方法。
示例代码:
javascript
   let obj1 = {name: "Alice", date: new Date(), info: {age: 25}};
   let obj2 = structuredClone(obj1);
   obj2.info.age = 30;
   console.log(obj1.info.age); // 输出: 25
   
四、注意事项
在使用深拷贝时,需要根据实际场景和数据结构选择合适的方法。
对于包含循环引用的对象,简单的递归方法可能无法正常工作,此时应考虑使用Lodash的cloneDeep或structuredClone方法。
深拷贝可能会增加程序的复杂性和性能开销,特别是在处理非常大的对象时,因此应谨慎使用。
综上所述,JavaScript中的深拷贝是一个重要的概念,掌握多种深拷贝方法对于开发高质量的应用程序至关重要。

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

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

相关文章

《深度学习》OpenCV 背景建模 原理及案例解析

目录 一、背景建模 1、什么是背景建模 2、背景建模的方法 1)帧差法(backgroundSubtractor) 2)基于K近邻的背景/前景分割算法BackgroundSubtractorKNN 3)基于高斯混合的背景/前景分割算法BackgroundSubtractorMOG2 3、步骤 1)初…

利士策分享,年前如何合理规划,轻松搞点小钱?

利士策分享,年前如何合理规划,轻松搞点小钱? 随着春节的日益临近,不少人开始为过年期间的开销而犯愁。 如何在年前合理规划,轻松搞点小钱,成了大家热议的话题。 别担心,这里有几个既实用又不伤…

华为OD机试 - 分班问题(Java 2024 E卷 200分)

华为OD机试 2024E卷题库疯狂收录中,刷题点这里 专栏导读 本专栏收录于《华为OD机试(JAVA)真题(E卷D卷A卷B卷C卷)》。 刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加…

华为OD机试 - 密室逃生游戏(Python/JS/C/C++ 2024 E卷 100分)

华为OD机试 2024E卷题库疯狂收录中,刷题点这里 专栏导读 本专栏收录于《华为OD机试真题(Python/JS/C/C)》。 刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,…

杀疯啦-yolov11+deepsort的目标跟踪实现

目录 yolov11介绍——实时端到端物体检测 概述 主要特征 支持的任务和模式 性能指标 总结 deepsort介绍: yolov11结合deepsort实现目标跟踪 效果展示 训练与预测 UI设计 其他功能展示 完整代码实现UI界面 yolov11介绍——实时端到端物体检测 概述 YOLO…

IDEA 使用技巧与插件推荐

目录 前言1. IDEA 使用技巧1.1 快捷键优化与应用1.2 高效调试与日志分析1.3 代码模板与片段的自定义 2. 插件推荐2.1 MyBatisX2.2 Lombok2.3 CheckStyle-IDEA2.4 Key Promoter X2.5 GitToolBox2.6 Rainbow Brackets 3. IDEA 性能优化3.1 内存与堆栈设置3.2 禁用不必要的插件3.3…

论文翻译 | Language Models are Few-Shot Learners 语言模型是少样本学习者(中)

3 结果 在图3.1中,我们展示了第2节描述的8个模型的训练曲线。对于这个图表,我们还包括了6个额外的超小型模型,参数数量少至100,000。正如[KMH20]中观察到的,当有效利用训练计算时,语言建模性能遵循幂律。在将这个趋势再…

FreeRTOS篇15:中断管理

一.中断优先级 任何中断的优先级都大于任务! 在我们的操作系统,中断同样是具有优先级的,并且我们也可以设置它的优先级,但是他的优先 级并不是从 015 ,默认情况下它是从 515 ,0~4 这 5 个中断优先级不是 F…

【逐行注释】PF(Particle filter,粒子滤波)的MATLAB代码(附源代码)

文章目录 程序设计1. 介绍2. 系统模型3. 算法步骤 源代码运行结果 程序设计 1. 介绍 粒子滤波是一种用于动态系统状态估计的先进方法,广泛应用于机器人定位、目标跟踪和金融预测等领域。该算法通过一组粒子及其权重来表示系统状态的概率分布,能够有效处…

JavaSE——面向对象8:Object类详解(==与equals的区别、hashCode、toString方法)

目录 一、与equals()的区别 (一)是一个比较运算符 (二)equals是Object类中的方法,只能判断引用类型 (三)equals方法重写练习 1.练习1 2.练习2 3.练习3 二、hashCode方法 三、toString方法 1.默认返回:全类名(包名类名)哈希值的十六进制 (1)不…

VS编译器实用调试技巧

一.什么是bug bug本意是"昆虫"或"虫子],现在一般是指在电脑系统或程序中,隐藏着的一些未被发现的缺陷或问题,简称程序漏洞。“Bug"的创始人格蕾丝.赫柏(Grace Murray Hopper)&#xff…

算法笔记(七)——哈希表

文章目录 两数之和判定是否互为字符重排存在重复元素存在重复元素 II字母异位词分组 哈希表:一种存储数据的容器; 可以快速查找某个元素,时间复杂度O(1); 当频繁查找某一个数时,我们可以使用哈希表 创建一个容器&#…

堆的代码和基础知识

堆的向上和向下调整-CSDN博客 1.堆的基础知识 2.堆的代码 Heap.h #pragma once #include<stdio.h> #include<assert.h> #include<stdlib.h> #include<stdbool.h> #include<time.h>// typedef int HPDataType; typedef struct Heap {HPDataTy…

电场磁场,能量密度和平均值(定义式是用实数场计算的,不能直接将定义式里面修改为复数场)

能量密度的定义式&#xff0c;都是实数场 平均能量密度&#xff0c;里面的是复数表示的场。具体推导类似坡印廷矢量 、

4.6章节python中空语句pass保留字作用

在Python中&#xff0c;pass 是一个空语句&#xff0c;它什么也不做。它通常用作占位符&#xff0c;在需要语法上需要一个语句但程序逻辑上不需要执行任何操作的地方。 1.占位符&#xff1a;在编写代码时&#xff0c;如果你还没有决定某个部分应该做什么&#xff0c;可以先用 p…

[深度学习][python]yolov11+bytetrack+pyqt5实现目标追踪

【算法介绍】 YOLOv11、ByteTrack和PyQt5的组合为实现高效目标追踪提供了一个强大的解决方案。 YOLOv11是YOLO系列的最新版本&#xff0c;它在保持高检测速度的同时&#xff0c;通过改进网络结构、优化损失函数等方式&#xff0c;提高了检测精度&#xff0c;能够同时处理多个…

android RadioButton 设置颜色无效

原因好像是 RadioButton 自动被渲染为 MaterialRadioButton 设置颜色使用这个属性 app:buttonTint“color/black” material-components-android/docs/components/RadioButton.md at master material-components/material-components-android (github.com)https://github.…

【MySQL】SQL介绍+基础+DDL+数据备份+还原

目录 一、DDL建库建表 1. 数据库 2. 内部4特征 3. 外部4特征 4. 数据库结构 5. SQL语句分类&#xff08;重点&#xff09; 6. 注意 7. 数据库表的字段类型 8. 存储引擎 9. 数据库表的操作 二、三范式 1. 什么是范式 2. 约束作用 3. 三范式 4. 第一范式&#xff…

Python从入门到高手4.2节-掌握循环控制语句

目录 4.2.1 理解循环控制 4.2.2 for循环结构 4.2.3 循环结构的else语句 4.2.4 while循环结构 4.2.5 循环结构可以嵌套 4.2.6 国庆节吃好玩好 4.2.1 理解循环控制 我们先来搞清楚循环的含义。以下内容引自汉语词典: 循环意指往复回旋&#xff0c;指事物周而复始地运动或变…

Sharp.js:简单而又实用的图像处理库

前言 在现代Web开发中&#xff0c;图像处理是一个不可或缺的部分。 前端开发者经常需要处理图像&#xff0c;以确保它们在不同的设备和分辨率上都能保持良好的显示效果。 sharp.js是一个高性能的Node.js模块&#xff0c;它利用了libvips库&#xff0c;提供了快速且高效的图像…