百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

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标记、属性、属性值都不区分大小写;任何空格或回车键在代码中都无效,插入空格或回车有...

基于Visual Studio C#语言开发上位机,做定制设计后有多好看

...

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中动态添加事件还是一个比较困难的问题,为此,本文将从入门到精通,介绍...