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

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

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

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

  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)) {

copy[key] = deepClone(obj[key]);

}

}

return copy;

}

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

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

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

总结

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

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

相关推荐
天蓝色的鱼鱼2 分钟前
你的项目真的需要SSR吗?还是只是你的简历需要?
前端·架构
恋猫de小郭29 分钟前
移动端开发稳了?AI 目前还无法取代客户端开发,小红书的论文告诉你数据
前端·flutter·ai编程
文心快码BaiduComate1 小时前
百度云与光本位签署战略合作:用AI Agent 重构芯片研发流程
前端·人工智能·架构
闲云一鹤1 小时前
nginx 快速入门教程 - 写给前端的你
前端·nginx·前端工程化
QCY2 小时前
「完全理解」1 分钟实现自己的 Coding Agent
前端·agent·claude
曲幽2 小时前
FastAPI压力测试实战:Locust模拟真实用户并发及优化建议
python·fastapi·web·locust·asyncio·test·uvicorn·workers
一拳不是超人2 小时前
Electron主窗口弹框被WebContentView遮挡?独立WebContentView弹框方案详解!
前端·javascript·electron
anyup2 小时前
🔥2026最推荐的跨平台方案:H5/小程序/App/鸿蒙,一套代码搞定
前端·uni-app·harmonyos
雮尘3 小时前
如何在非 Claude IDE (TARE、 Cursor、Antigravity 等)下使用 Agent Skills
前端·agent·ai编程
icebreaker3 小时前
Weapp-vite:原生模式之外,多一种 Vue SFC 选择
前端·vue.js·微信小程序