电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

JavaScript深拷貝方法structuredClone使用

瀏覽:242日期:2022-06-01 08:31:41
目錄
  • 正文
    • 淺拷貝與深拷貝
    • 使用 structuredClone 進行深拷貝

正文

對于深拷貝,最容易也應該是常見的方法是使用 JSON.parse() + JSON.stringify() ,還有一個借助第三方腳本庫 lodash ,其中方法 cloneDeep 可以實現深拷貝?,F在可以使用原生的 structuredClone() 方法。

淺拷貝與深拷貝

首先,先來了解一下淺拷貝和深拷貝的區別:

  • 淺拷貝:就是只拷貝對象的第一層。引用了更深層次的內容。可以使用擴展運算符 ... 或使用 Object.assign() 在 JavaScript 中實現淺拷貝。
  • 深拷貝:是指對象的所有層次都被復制。這是對象的真實副本??梢允褂?JSON.parse() + JSON.stringify() 執行此操作,現在,還可以使用原生方法 structuredClone() 執行此操作。

使用 structuredClone 進行深拷貝

原生 structuredClone() 方法使用結構化克隆算法創建給定值的深層拷貝。

結構化克隆算法用于復制復雜 JavaScript 對象的算法。通過來自 Worker 的 postMessage() 或使用 IndexedDB 存儲對象時在內部使用。它通過遞歸輸入對象來構建克隆,同時保持先前訪問過的引用的映射,以避免無限遍歷循環。

語法如下:

structuredClone(value)
structuredClone(value, { transfer })
  • value:被克隆的對象。可以是任何結構化克隆支持的類型。
  • transfer:為可選參數,是一個可轉移對象的數組,里面的 并沒有被克隆,而是被轉移到被拷貝對象上。

返回值:返回值是原始值的深拷貝。

下面是示例代碼:

const objProfile = { name: "DevPoint", detail: { age: 30 } };
const deepCopy = structuredClone(objProfile);
const shallowCopy = { ...deepCopy };
console.log(shallowCopy); // {"name": "DevPoint", "detail": {  "age": 35 } }
deepCopy.name = "天行無忌";
deepCopy.detail.age = 35;
console.log(objProfile); // {"name": "DevPoint", "detail": {  "age": 30 } }
console.log(deepCopy); // {"name": "天行無忌", "detail": {  "age": 35 } }

正如在此代碼片段中所見:

  • 更新第一層克隆對象的屬性后,原始屬性不會更新。
  • 在更深層次更新屬性后,原始屬性既不更新。發生這種情況是因為在這種情況下,還復制了更深層次。
  • 而對于淺拷貝對象 shallowCopy 來說,其值會隨著對象 deepCopy 的變化而變化,在項目開發中很容易帶來BUG

structuredClone() 現在可在所有主流瀏覽器和運行時(如 Node.jsDeno)的最新版本中使用。

以上就是JavaScript 中深拷貝方法structuredClone的詳細內容,更多關于JavaScript 深拷貝的資料請關注其它相關文章!

標簽: JavaScript
主站蜘蛛池模板: 板材品牌-中国胶合板行业十大品牌-环保板材-上海声达板材 | 酒吧霸屏软件_酒吧霸屏系统,酒吧微上墙,夜场霸屏软件,酒吧点歌软件,酒吧互动游戏,酒吧大屏幕软件系统下载 | 液压油缸-液压站生产厂家-洛阳泰诺液压科技有限公司 | 一体化污水处理设备_生活污水处理设备_全自动加药装置厂家-明基环保 | 合肥花魁情感婚姻咨询中心_挽回爱情_修复婚姻_恋爱指南 | 胶原检测试剂盒,弹性蛋白检测试剂盒,类克ELISA试剂盒,阿达木单抗ELISA试剂盒-北京群晓科苑生物技术有限公司 | 刺绳_刀片刺网_刺丝滚笼_不锈钢刺绳生产厂家_安平县浩荣金属丝网制品有限公司-安平县浩荣金属丝网制品有限公司 | PSI渗透压仪,TPS酸度计,美国CHAI PCR仪,渗透压仪厂家_价格,微生物快速检测仪-华泰和合(北京)商贸有限公司 | 合肥注册公司|合肥代办营业执照、2024注册公司流程 | 移动厕所租赁|移动卫生间|上海移动厕所租赁-家瑞租赁 | 湖南自考_湖南自学考试网| 宽带办理,电信宽带,移动宽带,联通宽带,电信宽带办理,移动宽带办理,联通宽带办理 | 碎石机设备-欧版反击破-欧版颚式破碎机(站)厂家_山东奥凯诺机械 高低温试验箱-模拟高低温试验箱订制-北京普桑达仪器科技有限公司【官网】 | 手术示教系统-数字化手术室系统-林之硕医疗云智能视频平台 | 展厅设计公司,展厅公司,展厅设计,展厅施工,展厅装修,企业展厅,展馆设计公司-深圳广州展厅设计公司 | 神超官网_焊接圆锯片_高速钢锯片_硬质合金锯片_浙江神超锯业制造有限公司 | 宁波普瑞思邻苯二甲酸盐检测仪,ROHS2.0检测设备,ROHS2.0测试仪厂家 | 螺旋压榨机-刮泥机-潜水搅拌机-电动泥斗-潜水推流器-南京格林兰环保设备有限公司 | 精密冲床,高速冲床等冲压设备生产商-常州晋志德压力机厂 | 涡街流量计_LUGB智能管道式高温防爆蒸汽温压补偿计量表-江苏凯铭仪表有限公司 | 橡胶电子拉力机-塑料-微电脑电子拉力试验机厂家-江苏天源 | IWIS链条代理-ALPS耦合透镜-硅烷预处理剂-上海顶楚电子有限公司 lcd条形屏-液晶长条屏-户外广告屏-条形智能显示屏-深圳市条形智能电子有限公司 | 实验室装修_实验室设计_实验室规划设计- 上海广建净化工程公司 | 右手官网|右手工业设计|外观设计公司|工业设计公司|产品创新设计|医疗产品结构设计|EMC产品结构设计 | 【甲方装饰】合肥工装公司-合肥装修设计公司,专业从事安徽办公室、店面、售楼部、餐饮店、厂房装修设计服务 | 通风天窗,通风气楼,屋顶通风天窗,屋顶通风天窗公司 | 安徽千住锡膏_安徽阿尔法锡膏锡条_安徽唯特偶锡膏_卡夫特胶水-芜湖荣亮电子科技有限公司 | 温州中研白癜风专科_温州治疗白癜风_温州治疗白癜风医院哪家好_温州哪里治疗白癜风 | 上海logo设计 | 压装机-卧式轴承轮轴数控伺服压装机厂家[铭泽机械] | 自清洗过滤器-全自动自清洗过反冲洗过滤器 - 中乂(北京)科技有限公司 | 论文查重_免费论文查重_知网学术不端论文查重检测系统入口_论文查重软件 | 济南保安公司加盟挂靠-亮剑国际安保服务集团总部-山东保安公司|济南保安培训学校 | 磁力反应釜,高压釜,实验室反应釜,高温高压反应釜-威海自控反应釜有限公司 | 上海新光明泵业制造有限公司-电动隔膜泵,气动隔膜泵,卧式|立式离心泵厂家 | 天津蒸汽/热水锅炉-电锅炉安装维修直销厂家-天津鑫淼暖通设备有限公司 | CPSE安博会| 解放卡车|出口|济南重汽|报价大全|山东三维商贸有限公司 | 华禹护栏|锌钢护栏_阳台护栏_护栏厂家-华禹专注阳台护栏、楼梯栏杆、百叶窗、空调架、基坑护栏、道路护栏等锌钢护栏产品的生产销售。 | 筛分机|振动筛分机|气流筛分机|筛分机厂家-新乡市大汉振动机械有限公司 | 扒渣机厂家_扒渣机价格_矿用扒渣机_铣挖机_撬毛台车_襄阳永力通扒渣机公司 |