这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

在JavaScript中,Object.assign() 是一个用于合并对象属性的常见方法。然而,对于许多开发者来说,关于它是否执行深拷贝的认识可能存在一些混淆。先说答案Object.assign() 不属于深拷贝,我们接着往下看。

Object.assign() 概览

首先,让我们回顾一下 Object.assign() 的基本用法。该方法用于将一个或多个源对象的属性复制到目标对象,并返回目标对象。这一过程是浅拷贝的,即对于嵌套对象或数组,只是拷贝了引用而非创建新的对象。

const obj = { a: 1, b: { c: 2 } };
const obj2 = { d: 3 }; const mergedObj = Object.assign({}, obj, obj2); console.log(mergedObj);
// 输出: { a: 1, b: { c: 2 }, d: 3 }

浅拷贝的陷阱

浅拷贝的特性意味着如果源对象中包含对象或数组,那么它们的引用将被复制到新的对象中。这可能导致问题,尤其是在修改新对象时,原始对象也会受到影响。

const obj = { a: 1, b: { c: 2 } };
const clonedObj = Object.assign({}, obj);
clonedObj.b.c = 3; console.log(obj); // { a: 1, b: { c: 3 } }
console.log(clonedObj); // { a: 1, b: { c: 3 } }

在这个例子中,修改 clonedObj 的属性也会影响到原始对象 obj

因此,如果我们需要创建一个全新且独立于原始对象的拷贝,我们就需要进行深拷贝。而 Object.assign() 并不提供深拷贝的功能。

深拷贝的需求

如果你需要进行深拷贝而不仅仅是浅拷贝,就需要使用其他的方法,如使用递归或第三方库来实现深度复制。以下是几种常见的深拷贝方法:

1. 使用 JSON 序列化和反序列化

const obj = { a: 1, b: { c: 2 } };
const deepClonedObj = JSON.parse(JSON.stringify(obj));
deepClonedObj.b.c = 3; console.log(obj); // { a: 1, b: { c: 2 } }
console.log(deepClonedObj); // { a: 1, b: { c: 3 } }

这种方法利用了 JSON 的序列化反序列化过程,通过将对象转换为字符串,然后再将字符串转换回对象,实现了一个全新的深拷贝对象。

需要注意的是,这种方法有一些限制,例如无法处理包含循环引用的对象,以及一些特殊对象(如 RegExp 对象)可能在序列化和反序列化过程中失去信息。

2. 使用递归实现深拷贝

function deepClone(obj) {
if (obj === null || typeof obj !== 'object') {
return obj;
} const clonedObj = Array.isArray(obj) ? [] : {}; for (let key in obj) {
if (obj.hasOwnProperty(key)) {
clonedObj[key] = deepClone(obj[key]);
}
} return clonedObj;
} const obj = { a: 1, b: { c: 2 } };
const deepClonedObj = deepClone(obj);
deepClonedObj.b.c = 3; console.log(obj); // { a: 1, b: { c: 2 } }
console.log(deepClonedObj); // { a: 1, b: { c: 3 } }

这是一个递归实现深拷贝的方法。它会递归地遍历对象的属性,并创建它们的副本。这种方法相对灵活,可以处理各种情况。

但需要注意在处理大型对象或深度嵌套的对象时可能会导致栈溢出。

3. 使用第三方库

许多第三方库提供了强大而灵活的深拷贝功能,其中最常用的是 lodash 库中的 _.cloneDeep 方法。

const _ = require('lodash');

const obj = { a: 1, b: { c: 2 } };
const deepClonedObj = _.cloneDeep(obj);
deepClonedObj.b.c = 3; console.log(obj); // { a: 1, b: { c: 2 } }
console.log(deepClonedObj); // { a: 1, b: { c: 3 } }

使用第三方库的优势在于它们通常经过精心设计和测试,可以处理更多的边界情况,并提供更好的性能。

本文转载于:

https://juejin.cn/post/7325040809697591296

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--Object.assign 这算是深拷贝吗的更多相关文章

  1. Object.assign()的使用

    一.Object.assign()对象的拷贝 1 Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 2 Object.assign(ta ...

  2. js - object.assign 以及浅、深拷贝

    浅(引用)拷贝:共用同一内存地址,你改值我也变 譬如常用的对象赋值操作 深拷贝:深拷贝即创建新的内存地址保存值(互不影响) 譬如以下 const shallBasicCopy = obj => ...

  3. Object.assign()与深拷贝(一)

    深拷贝与浅拷贝 所谓深拷贝与浅拷贝,是围绕引用类型变量的拷贝进行的讨论. 在ECMAScript中,变量分为基本类型和引用类型两种.其本质区别是不可变性,基本类型是不可变的,而引用类型是可变的. 所谓 ...

  4. javascript学习总结之Object.assign()方法详解

    最近再写ES6的文章时候发现自己对Object.assign()方法不太了解,之前也没有接触过所以就就查阅了相关的资料,为了自己以后肯能会用到以及对知识进行巩固,所以在这里记录下自己学习的点点滴滴,毕 ...

  5. Object.assign()方法

    对象的扩展 1.ES6中,对象的属性和方法可简写:对象的属性值可不写,前提是属性名已经声明: var name = "zhangsan"; "; var obj = { ...

  6. es6 Object.assign

    ES6 Object.assign 一.基本用法 Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target).它至少需要两个对象作为参数,第一个参数是目 ...

  7. 浅谈Object.assign()

    Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.返回值为目标对象. 1 Object.assign 是 ES6 新添加的接口,主要的用途是用来合并多个 Ja ...

  8. vue android低版本 白屏问题 你是不是用了Object.assign ??

    问题描述 在部分比较低版本的手机中,发现apk安装后白屏,但是大部分手机都能安装. 本人在使用android4.4时候,也是安装后打开白屏. 原因: 代码写法不兼容 this.user = Objec ...

  9. Object.assign 的问题

    功能及问题 如下代码, 使用用户最后一次配置信息的同时,当用户关闭数据记录时提示用户确定关闭. export default { name: 'editPage', data() { return { ...

  10. Object.assign()解释整理

    链接:https://blog.csdn.net/wang252949/article/details/79106160 语法 Object.assign(target, ...sources) 参数 ...

随机推荐

  1. NC20573 [SDOI2011]染色

    题目链接 题目 题目描述 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色段数量(连续相同颜色被认为是同一段),如 ...

  2. NC24608 [USACO 2011 Ope S]Learning Languages

    题目链接 题目 题目描述 Farmer John's N (2 <= N <= 10,000) cows, conveniently numbered 1..N, are fluent i ...

  3. 从零开始手写 mybatis (三)jdbc pool 从零实现数据库连接池

    前景回顾 第一节 从零开始手写 mybatis(一)MVP 版本 中我们实现了一个最基本的可以运行的 mybatis. 第二节 从零开始手写 mybatis(二)mybatis interceptor ...

  4. Java设计模式-备忘录模式Memento

    介绍 备忘录模式(Memento Pattern)在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可将该对象恢复到原先保存的状态. 可以这里理解备忘录模式:现实生 ...

  5. 《系列二》-- 10、initialize-初始化bean

    目录 initializeBean 方法源码如下 二.重要操作 2.1 应用 Aware 2.2 applyBeanPostProcessorsBeforeInitialization: 2.3 in ...

  6. P4141 消失之物题解(写给每一位与我一样的新手玩家)

    消失之物 传送门: P4141 消失之物 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路 暴力稳了 但是 hack tle了 这时候我们要想办法优化 这是一个回退背包问题 首先 ...

  7. C++ 多线程的错误和如何避免(15)

    尽量不使用无锁架构,除非绝对必要 复杂性中有一些东西吸引了每一位工程师.与常规同步机制(如互斥锁.条件变量.异步等)相比,无锁编程听起来非常性感.然而,与我交谈过的每一位经验丰富的 C++ 开发人员都 ...

  8. 一次nginx返回422状态码的经历

    故事背景 后端使用Docker Compose部署一个代码片段管理应用:snibox,某天因为云服务卡死重启之后再次访问时,登录或退出都返回422状态码. 界面提示如下: 不过奇怪的是:直接通过IP+ ...

  9. 解决Spring boot 单元测试,无法读取配置文件问题。

    1.启动类上加上@EnableConfigurationProperties 2.springboot版本springboot 2.X版本在单元测试中读取不到yml配置文件的值这是个大坑,在项目中写单 ...

  10. 都说了别用BeanUtils.copyProperties,这不翻车了吧

    分享是最有效的学习方式. 博客:https://blog.ktdaddy.com/ 故事 新年新气象,小猫也是踏上了新年新征程,自从小猫按照老猫给的建议[系统梳理大法]完完整整地梳理完毕系统之后,小猫 ...