【JS】中深拷贝浅拷贝的区别和实现方式

news/2025/2/12 12:47:36/

1、概念

  1. 赋值不属于拷贝
  2. JS的 深拷贝浅拷贝主要作用于多层数组或对象中,其中:

浅拷贝:

只对第一层 数组或对象进行复制,其它层复制的是原存储的内存地址(修改其它深层级会影响原对象)

深拷贝:

构造一个新的复合数组或对象,每一层级 都在堆内存中开辟了新的空间,与原数组或对象互相不影响。

2、实现方式

浅拷贝的实现方式:

  1. 针对对象:使用 Object.assign() 方法,例如:let newObj = Object.assign({}, oldObj);
  2. 针对数组或对象:使用扩展运算符(...)进行浅复制,例如:let newObj = {…oldObj};let newArr = […oldArr];
  3. 针对数组:使用数组的 slice() 方法进行浅复制,例如:let newArray = oldArray.slice()

深拷贝的实现方式

  1. JSON.parse(JSON.stringfy(obj))
    JSON.parse(JSON.stringify(obj)):将对象序列化为 JSON 字符串,再将字符串解析为新的对象。这种方式可以实现深拷贝,但有一些限制,例如无法复制函数、循环引用等不可序列化的属性;
  2. 手动递归拷贝
    使用递归的方式遍历对象的属性,逐一复制到新的对象中。这种方式可以实现深拷贝,但需要手动编写代码,并且不适用于嵌套层数较深的对象。
// 递归实现深拷贝
function deepClone(obj) {if (typeof obj !== 'object' || obj === null) {return obj;}let newObj = Array.isArray(obj) ? [] : {};for (let key in obj) {newObj[key] = deepClone(obj[key]);}return newObj;
}
  1. Lodash 的 _.cloneDeep() (使用第三方库)
    可以实现深拷贝,支持复制函数、循环引用等特殊属性,使用方便;

http://www.ppmy.cn/news/997021.html

相关文章

时间计算:时间戳加减指定的分钟数__Niyyy_记

在开发中多多少少会遇到时间的计算,以下只是一个简单的例子。 将时间戳加减指定的分钟数,并将结果转换为年月日时分秒格式: function addMinutes(timestamp, minutes) {var date new Date(timestamp);date.setTime(date.getTime() minute…

系统架构设计师_备考第1天

文章目录 前言一、软考历史与体系二、考试价值与意义三、软考报名与交费四、考试介绍五、综合备考策略 前言 从今天开始,会认真备考系统架构设计师,希望95天后,拿下软考证书。 提示:以下是本篇文章正文内容,下面案例可…

Rust基础入门【1】

“Why Rust”,installation & “Hello, World”,primitive types,string & &str,array & vector,mutability,enum,match,condition & statement Very brief history of Rust Rust main feature Dev. Env. primitive types sized?, string, vec mu…

python数学建模_1: 输入矩阵解决多供给地与多需求地的资源分配最优化问题

输入矩阵解决多供给地与多需求地的资源分配的线性最优化问题, 输入: 供给地的数目及其资源量,需求地的数目及其需求量,供给地的地理位置,需求地的地理位置 (编写函数计算供给地和需求地的距离,按两点间距…

nodejs的字符串文字(‘‘)和模板文字(``)性能比较

nodejs的字符串文字(‘’)和模板文字()性能比较 js支持两种方式定义字符串: 使用 const str "Hello " "world!";使用 const worldText "world!" const str Hello ${worldText};我们可能不会太关注这些,应该都是怎…

ffmpeg和ffplay 推送和播放RTP流

ffmpeg 推送rtp流,保存成sdp文件,再用vlc播放sdp 下面这个是把abc.mp4文件推送到rtp://127.0.0.1:5004\abc.mp4端口,同时输出sdp文件到test_rtp_h264.sdp -an参数的作用是只推送视频, 没推送音频. ffmpeg -re -i d:\\abc\\abc.mp4 -an -f rtp rtp://12…

浅谈webpack

文章目录 Webpackwebpack的工作原理webpack的构建流程Webpack的基本功能有哪些Webpack常用配置 Webpack Webpack是一个现代的JavaScript应用程序静态模块打包工具。它是一个用于构建和打包前端资源的工具,可以将多个模块和资源(如JavaScript、CSS、图片…