浅拷贝或深拷贝js数组或对象的方法

news2025/4/1 13:44:05

在js中,直接通过赋值操作拷贝数组,会导致新旧数组互相影响。
这是因为数组、对象等数据属于引用类型(Reference Type)数据。对引用类型数据进行赋值操作时,实际上拷贝的是其内存地址的引用(即指向堆内存中对应数据的地址指针),而不是其本身的值。直接赋值后,新旧变量存储着同一个地址指针,指向同一块内存空间。

const arr = [1,2,3];
const arr_copy = arr1;
arr_copy[1] = 2024; // arr_copy和arr都变成[2024,2,3]

如需实现真正的独立拷贝,避免新旧数组互相影响,需要创建新数组并一一复制旧数组的元素。
当拷贝顶层元素都是基本类型,没有引用类型的数组时,则只需要浅拷贝(Shadow Copy),使新旧数组的顶层元素独立即可。

浅拷贝数组

  1. 展开运算符
const arr_copy1 = [...arr];
  1. Array.from()
const arr_copy2 = Array.from(arr);
  1. Array.prototype.slice()
const arr_copy3 = arr.slice();

如果要拷贝类数组对象,由于它不是由 Array构造函数创建的,所以没有Array.prototype的slice方法,要用call借用。

const arrayLike = { 0: "a", 1: "b", length: 2 };
const arr_copy3 = Array.prototype.slice.call(arrayLike);
  1. Array.prototype.concat()
const arr_copy4 = arr.concat();
  1. Object.assign()
const arr_copy5 = Object.assign([], arr);
  1. Array.prototype.reudce()
const arr_copy6 = arr.reduce((prev, curr) => {
    prev.push(curr);
}, []);
  1. for / forEach / for…of 遍历
const arr_copy7 = [];
for (const value of arr) {
    arr_copy7.push(value);
}
// 或
for (const [idx, value] of arr.entries()) {
   arr_copy7[idx] = value;
}
  1. lodash.clone()
const _ = require('lodash');
const arr_copy4 = _.clone(arr);

浅拷贝对象

  1. 展开运算符
const obj_copy1 = {...obj};
  1. Object.assign()
    是用于 合并对象 或 浅拷贝对象 的方法。
const obj_copy2 = Object.assign({}, obj);

在这里插入图片描述

  1. for…in遍历
const obj_copy3 = {};
for (const key in obj) {
	if (obj.hasProperty(key)) { // 检查是否是对象自身的属性,过滤原型链上的属性
    	obj_copy3[key] = obj[key];
    }
}
  1. Object.keys()
const obj_copy4 = {};
Object.keys(obj).map(key => {
	obj_copy4[key] = obj[key];
});
  1. lodash.clone()
const _ = require('lodash');
const obj_copy5 = _.clone(obj);
  1. Object.create + Object.getPrototypeOf
const obj_copy6 = Object.create(Object.getPrototypeOf(obj));
Object.assign(obj_copy6, obj);

深拷贝数组or对象

若数组包含嵌套对象或数组,内层引用仍需深拷贝(Deep Copy),否则会导致新旧数组的内存元素互相影响。

const arr = [[1,2,3],[4,5,6]];
const arr_copy = [...arr];
arr_copy[0][0] = 2024; // arr_copy和arr都变成[[2024,2,3],[4,5,6]]

深拷贝数组的方法有以下几种:

  1. JSON.stringify + JSON.parse
    缺点:
    无法拷贝 function、undefined、Symbol、循环引用等。
    会丢失对象的原型链。
    遇到循环引用会抛出错误。
const arr_copy1 = JSON.parse(JSON.stringify(arr));
  1. 递归手动实现深拷贝
    灵活可控,支持复杂类型,可自行处理循环引用,面试常考
const deepClone = (obj, cache = new WeakMap()) => {
	if (obj === null || typeof obj === 'object') return obj;
	if (cache.has(obj)) return cache.get(obj); // 直接返回缓存
	if (obj instanceof Date) return new Date(obj.valueOf());
	if (obj instanceof Regex) return new Regex(obj);
	const copy = Array.isArray(obj) ? [] : {};
	cache.set(obj, copy); //缓存当前对象
	for (const key in obj) {
		if (obj.hasOwnProperty(key)) {
			copy[key] = deepClone(obj[key]);
		}
	}
    return copy;
};
const arr_copy3 = deepClone(arr);

解释:
设置cache是为了避免遇到循环引用抛出错误。
遇到RegExp对象不直接返回原对象,而是返回新实例,是为了避免直接赋值引用类型数据,出现浅拷贝问题。
new Date(obj)等同于new Date(obj.valueOf()),都是获取原日期的时间戳并用该时间戳创建一个新 Date 对象。

const regExp = /abc/g;
const regExp_copy1 = regExp;
const regExp_copy2 = new RegExp(regExp);
regExp.source = "changed";
console.log(regExp_copy1.source); // 拷贝对象也被影响
console.log(regExp_copy2.source); // 拷贝对象没有被影响
  1. lodash.cloneDeep()
    稳定可靠,适合用于生产环境。
const _ = require('lodash');
const arr_copy2 = _.cloneDeep(arr);
  1. structuredClone
    原生支持,性能好,但兼容性有限,仅用于现代浏览器环境。
const arr_copy4 = structuredClone(arr);

深拷贝对象的方法与深拷贝数组相同。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2324447.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CKS认证 | Day3 K8s容器运行环境安全加固

一、最小特权原则(POLP) 1)最小特权原则 (Principle of least privilege,POLP) : 是一种信息安全概念,即为用户提供执行其工作职责所需的最 小权限等级或许可。 最小特权原则被广泛认为是网络安全的最佳实…

28_跨域

目录 promise promise的基本语法 async await try catch promise 静态方法 跨域 跨域的解决方案 1-cors ​编辑 2-jsonp方案 3-代理服务器 promise promise 是一个es6新增的语法 承诺的意思 作用:是专门用来解决回调地狱!!!! promise的基本语法 // 基本语法:// Pr…

Stable Diffusion太慢?国内Midjourney平替方案—商用合规部署

一、AI绘画商用核心痛点(为什么需要替代Stable Diffusion/Midjourney?) 1. 速度慢,高并发支持差 Stable Diffusion:单卡GPU生成1张图需3-10秒,并发超过10任务易崩溃Midjourney:排队制&#xf…

综述速读|086.04.24.Retrieval-Augmented Generation for AI-Generated Content A Survey

论文题目:Retrieval-Augmented Generation for AI-Generated Content: A Survey 论文地址:https://arxiv.org/abs/2402.19473 bib引用: misc{zhao2024retrievalaugmentedgenerationaigeneratedcontent,title{Retrieval-Augmented Generation…

JavaScript中的Math对象和随机数

目录 一、常用数学方法 1. 数值处理 2. 极值与运算 3. 三角函数(参数为弧度) 4. 对数与指数 5. 常量 二、随机数生成 Math.random() 1. 基础范围控制 2. 整数随机数 三、实际应用场景 1. 随机颜色生成 2. 数组随机排序 3. 概率控制 四、注…

lxd-dashboard 图形管理LXD/LXC

前言 LXD-WEBGUI是一个完全用AngularJS编写的Web应用程序,无需应用服务器、数据库或其他后端服务支持。只需要简单地托管静态HTML和JavaScript文件,就能立即投入使用。这个项目目前处于测试阶段,提供了直观的用户界面,帮助用户便捷地管理和控制LXD实例。 安装lxd-dashboa…

python纯终端实现图片查看器(全彩)(windows)

很多人作为命令行爱好者,无法在终端内直接查看图片是无法忍受的, 那就写一个! 先直接上代码 import os import sys from PIL import Image import numpy as np import colorama import msvcrt # Windows专用# 初始化colorama colorama.ini…

【动态规划篇】- 路径问题

62. 不同路径 题目链接: 62. 不同路径 题目解析: 状态表示 dp[i][j]表示:以[i][j]为终点时,一共有多少种路径。 状态转移方程 以[i][j]最近的几步来分析问题,要么从[i-1][j]位置向下走一步到达[i][j],要么从[i][j-1…

《新凯来:半导体设备制造领域的“国家队”》

《新凯来:半导体设备制造领域的“国家队”》 一、SEMICON China 爆火出圈:31 款设备背后的 “深圳力量” 1.1 展会现象级热度 在 2025 年 SEMICON China 展会现场,新凯来展台成了整届展会当之无愧的 “顶流”,被来自全球各地的专…

AI大模型最新发布[update@202503]

OpenAI GPT-4o:多模态,“o”代表Omni,即全能的意思,凸显了其多功能的特性。 多模态交互,GPT-4o可以接受文本、音频和图像的任意组合作为输入,并生成文本、音频和图像的任意组合输出。实时推理能力&#x…

深入浅出 Embedding

1. 什么是 Embedding? Embedding(嵌入)是一种将高维数据映射到低维连续空间的技术,用于表达数据的语义关系。简单来说,它是一种向量化表示,将文本、图像、用户行为等信息转换为数值向量,使得相似的数据在向量空间中距离更近。 2. 如何理解 Embedding? 2.1 浅显易懂的…

java项目之基于ssm的乡镇自来水收费系统(源码+文档)

项目简介 乡镇自来水收费系统实现了以下功能: 乡镇自来水收费系统在Eclipse环境中,使用Java语言进行编码,使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务,其管理员管理水表,审核用户更换…

Spring AI MCP 架构详解

Spring AI MCP 架构详解 1.什么是MCP? MCP 是一种开放协议,它对应用程序向大语言模型(LLMs)提供上下文信息的方式进行了标准化。可以把 MCP 想象成人工智能应用程序的 USB-C 接口。就像 USB-C 为将设备连接到各种外围设备和配件提供了一种…

目标识别与双目测距(1)环境搭建:Ubuntu+yolov5+pcl库

环境情况 ubuntu 18.04 → 20.04(最终) 安装Ubuntu1804虚拟机系统 Anaconda:可参考我的另一篇文章 Python 3.6.13 → 3.8(最终)Anaconda3-2021.05 目标识别:YOLOv5相关 1、安装git sudo apt install gi…

OpenAI API - Agent

文章目录 代理概述模型工具知识与记忆防护栏编排入门 语音代理选择正确的架构语音到语音(多模态)架构链式架构 构建语音代理使用语音到语音架构进行实时处理将音频输入链接到文本处理 → 音频输出 代理 了解如何使用 OpenAI API 构建代理。 https://pl…

Strawberry perl的下载,查询版本号,配置Path环境变量,查找perl解释器的位置

Strawberry Perl 是一个适用于 Microsoft Windows 的 Perl 环境,包含运行和开发 Perl 应用程序所需的一切。它旨在尽可能接近 UNIX 系统上的 Perl 环境。 下载 官网: Strawberry Perl for Windows - Releases 各个版本: Strawberry Perl for Windows - Releases …

MySQL的基础语法2(函数-字符串函数、数值函数、日期函数和流程函数 )

目录 一、字符串函数 1.常见字符串函数 ​编辑 2.字符串函数的基本使用 3.字符串函数的数据库案例演示 二、数值函数 1.常见数值函数(如下): 2.数值函数的基本使用 3.数值函数的数据库案例演示 三、日期函数 1.常见的日期函数 2.日…

5G_WiFi_CE_杂散测试

目录 一、规范要求 1、法规目录: 2、限值: (1)带外发射杂散 (2)带内发射杂散 (3)接收杂散 二、测试方法 1、带外发射杂散 (1)测试条件 &#xff08…

大数据Spark(五十五):Spark框架及特点

文章目录 Spark框架及特点 一、Spark框架介绍 二、Spark计算框架具备以下特点 Spark框架及特点 一、Spark框架介绍 Apache Spark 是一个专为大规模数据处理而设计的快速、通用的计算引擎。最初由加州大学伯克利分校的 AMP 实验室(Algorithms, Machines, and Pe…

UI产品经理基础(六):如何解决用户的质疑?

在需求调查中遇到用户质疑“不专业”或“不了解需求”,本质上是用户对产品经理的信任缺失或沟通鸿沟导致的。要化解这种质疑,需从专业能力展示、沟通方式优化、用户参与感提升三个维度切入,结合具体场景采取针对性策略。以下是系统化的解决方…