数组和对象的深拷贝和浅拷贝的方法

数组和对象的深拷贝、浅拷贝方法有所不同,以下是常见的实现方式:

一、浅拷贝方法(数组和对象通用/专用)

浅拷贝只复制表层数据,嵌套的引用类型仍共享内存。

  1. 数组的浅拷贝
  • 扩展运算符(...): const arrCopy = ...originalArr;

  • Array.prototype.slice(): const arrCopy = originalArr.slice();

  • Array.prototype.concat(): const arrCopy = \[\].concat(originalArr);

  1. 对象的浅拷贝
  • 扩展运算符(...): const objCopy = {...originalObj};

  • Object.assign(): const objCopy = Object.assign({}, originalObj);

二、深拷贝方法(数组和对象通用/专用)

深拷贝会复制所有嵌套数据,原数据和拷贝数据完全独立。

  1. 通用方法(数组和对象均可)
  • JSON.parse(JSON.stringify()):

简单易用,但有局限性(不支持函数、Symbol、循环引用等)。

示例: const deepCopy = JSON.parse(JSON.stringify(original));

  • 递归实现:

自定义函数遍历所有属性,对引用类型递归拷贝,可处理复杂场景。

示例:

function deepClone(obj) {

if (obj === null || typeof obj !== 'object') return obj;

let copy = Array.isArray(obj) ? \[\] : {};

for (let key in obj) {

if (obj.hasOwnProperty(key)) {

copykey = deepClone(objkey);

}

}

return copy;

}

  1. 其他工具方法
  • Lodash库的_.cloneDeep():

成熟可靠,支持各种数据类型(推荐实际开发使用)。

示例: const deepCopy = _.cloneDeep(original);

总结

  • 浅拷贝适合无嵌套的简单数据,实现简单(扩展运算符、slice等)。

  • 深拷贝适合有嵌套引用类型的数据,复杂场景推荐用 Lodash 的 _.cloneDeep ,简单场景可临时用 JSON.parse(JSON.stringify()) (注意其局限性)。

相关推荐
我命由我123458 小时前
CesiumJS 笔记 - 获取容器中心点、Cartesian3 clone 方法、修改 Cartesian3 对象的高度
前端·javascript·css·前端框架·html·html5·js
Hopebearer_9 小时前
页面突然只剩 DOM?一次静态资源版本错配排查
前端·部署
东风破_10 小时前
ESLint 是什么?为什么你的项目需要它?
前端·后端·代码规范
圣殿骑士-Khtangc11 小时前
Go字符串高效拼接性能对比与底层原理分析
服务器·前端·golang
BigTopOne12 小时前
【ijkplayer】 硬解码流程
前端
kyriewen12 小时前
DeepSeek Harness开源第一天我就上手了——和Claude Code的差距比想象中大
前端·ai编程·deepseek
捡田螺的小男孩13 小时前
什么是 Skill?手把手带你写一个简单有用的 Skill!
前端·后端·程序员
IT_陈寒13 小时前
Redis集群这个坑,差点让我通宵
前端·人工智能·后端
90后的晨仔13 小时前
uni-app 路由跳转与页面导航 —— 终极详解(对标 iOS / Android / 鸿蒙三端原生)
前端
Heo14 小时前
大厂前端调试不能只会debugger
前端·javascript·面试