js中的数组拷贝(浅拷贝,深拷贝) js深拷贝数组对象
liuian 2024-12-23 12:10 38 浏览
问题
写代码时需要拷贝一个内容会变化的数组,使用了=赋值,slice(),concat()方法都不行,修改了原数组后拷贝数组也变了,原因是这个数组内容是object,而object是引用类型,需要使用深拷贝,最后使用var newArr = JSON.parse(JSON.stringify(arr));解决
浅拷贝&深拷贝
- 浅拷贝:如果数组元素是基本类型,就会拷贝一份,互不影响,而如果是对象或者数组,就会只拷贝对象和数组的引用,无论对新旧数组的哪一个进行了修改,两者都会发生变化。
- 深拷贝:完全的拷贝一个对象,即使嵌套了对象,两者也相互分离,修改一个对象的属性,也不会影响另一个。
var arr = [{name: 'wens'},{age: '26'}]; //原数组
var newArr1 = arr; //浅拷贝
var newArr2 = arr.slice(); //浅拷贝
var newArr3 = arr.concat(); //浅拷贝
var newArr4 = JSON.parse(JSON.stringify(arr)); //深拷贝
arr[0].name = 'leon';
arr[1].age = '27';
console.log(arr);
console.log(newArr1);
console.log(newArr2);
console.log(newArr3);
console.log(newArr4);
运行结果:
浅拷贝
1.使用=直接赋值
var newArr = arr;
缺点:由于数组是引用类型,修改了arr或者newArr中的一个会影响全部
2.使用slice()
var newArr = arr.slice();
3.使用concat()
var newArr = arr.concat();
slice()和concat()缺点:当数组内部属性值为引用对象时,使用slice和concat对对象数组的拷贝,整个拷贝还是浅拷贝,拷贝之后数组各个值的指针还是指向相同的存储地址。简单来说就是:
数组中的值如果是引用类型,对其进行增删改,会影响用slice复制的数组,
但是如果数组中的值是基本类型,就不会影响
深拷贝
1.使用JSON.stringify和JSON.parse
不仅可拷贝数组还能拷贝对象(但不能拷贝函数)
var newArr = JSON.parse(JSON.stringify(arr));
缺点:JSON.stringify()有一些局限,比如对于RegExp类型和Function类型则无法完全满足,而且不支持有循环引用的对象。
2.深拷贝的一个通用方法
实现思路:拷贝的时候判断属性值的类型,如果是对象,继续递归调用深拷贝函数
var deepCopy = function(obj) {
// 只拷贝对象
if (typeof obj !== 'object') return;
// 根据obj的类型判断是新建一个数组还是一个对象
var newObj = obj instanceof Array ? [] : {};
for (var key in obj) {
// 遍历obj,并且判断是obj的属性才拷贝
if (obj.hasOwnProperty(key)) {
// 判断属性值的类型,如果是对象递归调用深拷贝
newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
}
}
return newObj;
}
相关推荐
- Html中Css样式Ⅱ_html+css+
-
元素的定位(方式五种定位方式):静态定位:position:static;相对定位:position:relative;绝对定位:position:absolute;固定定位:position...
- HTML 标签和属性值的基本格式_html标签及属性的语法规则
-
HTML:HyperTextMarkupLanguage超文本标记语言HTML代码不区分大小写,包括HTML标记、属性、属性值都不区分大小写;任何空格或回车键在代码中都无效,插入空格或回车有...
- C#中使用Halcon开发视觉检测程序教程
-
一、环境准备1.安装Halcon从Halcon官方网站下载适合你操作系统的安装包,按照安装向导完成安装。安装过程中,记住安装路径,后续配置环境时会用到。2.配置VisualStudio项目打开V...
- 【开源】C#功能强大,灵活的跨平台开发框架 - Uno Platform
-
前言今天给广大网友分享一个基于C#开源、功能强大、灵活的跨平台开发框架,她就是:UnoPlatform。通过UnoPlatform,开发者可以利用单一代码库实现多平台兼容,极大地提高了开发效率和...
- C# 的发展简史_c#的发展前景
-
1.C#的诞生和初期(2000-2005)2000年:在微软的PDC大会上,由AndersHejlsberg首次公开展示了C#语言。2002年:微软发布了.NETFramework1.0,其...
- Visual Studio 2010-C#跟西门子1200(Sharp7)窗体控制②-启动按钮
-
VisualStudio2010--C#跟西门子1200(Sharp7)窗体控制②--启动按钮上期回顾(上期主要是新建窗体应用程序,添加sharp7的类库并引用,建立一个button按钮):本期将...
- Visual Studio窗口布局混乱后的恢复与优化指南
-
在使用VisualStudio进行开发时,我们常因误操作(如拖拽窗口、关闭面板、多显示器切换)导致界面布局混乱,代码编辑器、解决方案资源管理器、属性面板等组件“错位”,严重影响开发效率。本文将针对布...
- 使用Visual Studio 2017为AutoCAD创建一个c#模板
-
本教程的目标是展示如何在VisualStudio2017中创建AutoCAD的c#项目模板,该模板允许在调试模式下从VisualStudio加载DLL来自动启动AutoCAD。本文展示的示例使用...
- IT科技-续3Visual Studio2019-C#实战练习
-
上次完成了登录页面的窗体设计,本次完成管理界面的设计。第一步ComBox控制深度操作点击编辑选项,加入预定选项,完成操作。第二步复制Buttons控件依次为保存、删除、重置、编辑按钮属性设置,参考...
- 如何在 C# 中将文本转换为 Word 以及将 Word 转换为文本
-
在现代软件开发中,处理文档内容是一个非常常见的需求。无论是生成报告、存储日志,还是处理用户输入,开发者都可能需要在纯文本与Word文档之间进行转换。有时需要将文本转换为Word,以便生成结构化的...
- 简短的C#入门教程 # C# 入门教程 C#(读作...
-
简短的C#入门教程#C#入门教程C#(读作CSharp)是一种由Microsoft开发的多范式编程语言,它具有广泛的应用,特别是在Windows平台上。本教程将介绍C#的基础知识,以帮助您入门这...
- JavaScript中this指向各种场景_前端中this的指向
-
在JavaScript中,this的指向是一个核心概念,其值取决于函数的调用方式,而非定义位置(箭头函数除外)。以下是this指向的常见场景及具体说明:1.全局作用域中的this在全局作用域(非...
- 微信WeUI设计规范文件下载及使用方法
-
来人人都是产品经理【起点学院】,BAT实战派产品总监手把手系统带你学产品、学运营。WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信Web开发量身设计,可以令用户的使用感知...
- JavaScript技术:如何动态添加事件?
-
随着前端技术的不断发展,JavaScript已经成为了不可或缺的一部分,它可以让网页变得更加流畅和美观。但是,在JavaScript中动态添加事件还是一个比较困难的问题,为此,本文将从入门到精通,介绍...
- 一周热门
-
-
【验证码逆向专栏】vaptcha 手势验证码逆向分析
-
Python实现人事自动打卡,再也不会被批评
-
Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控
-
一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案
-
再见Swagger UI 国人开源了一款超好用的 API 文档生成框架,真香
-
网页转成pdf文件的经验分享 网页转成pdf文件的经验分享怎么弄
-
C++ std::vector 简介
-
飞牛OS入门安装遇到问题,如何解决?
-
系统C盘清理:微信PC端文件清理,扩大C盘可用空间步骤
-
10款高性能NAS丨双十一必看,轻松搞定虚拟机、Docker、软路由
-
- 最近发表
-
- Html中Css样式Ⅱ_html+css+
- HTML 标签和属性值的基本格式_html标签及属性的语法规则
- 基于Visual Studio C#语言开发上位机,做定制设计后有多好看
- C#中使用Halcon开发视觉检测程序教程
- 【开源】C#功能强大,灵活的跨平台开发框架 - Uno Platform
- C# 的发展简史_c#的发展前景
- Visual Studio 2010-C#跟西门子1200(Sharp7)窗体控制②-启动按钮
- Visual Studio窗口布局混乱后的恢复与优化指南
- 使用Visual Studio 2017为AutoCAD创建一个c#模板
- IT科技-续3Visual Studio2019-C#实战练习
- 标签列表
-
- python判断字典是否为空 (50)
- crontab每周一执行 (48)
- aes和des区别 (43)
- bash脚本和shell脚本的区别 (35)
- canvas库 (33)
- dataframe筛选满足条件的行 (35)
- gitlab日志 (33)
- lua xpcall (36)
- blob转json (33)
- python判断是否在列表中 (34)
- python html转pdf (36)
- 安装指定版本npm (37)
- idea搜索jar包内容 (33)
- css鼠标悬停出现隐藏的文字 (34)
- linux nacos启动命令 (33)
- gitlab 日志 (36)
- adb pull (37)
- python判断元素在不在列表里 (34)
- python 字典删除元素 (34)
- vscode切换git分支 (35)
- python bytes转16进制 (35)
- grep前后几行 (34)
- hashmap转list (35)
- c++ 字符串查找 (35)
- mysql刷新权限 (34)