一文带你浅析JavaScript数组中的深复制与浅复制

青灯夜游
Freigeben: 2021-12-20 16:35:15
nach vorne
1841 Leute haben es durchsucht

在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份。下面本篇文章带大家了解一下JavaScript数组中的深复制与浅复制,希望对大家有所帮助!

一文带你浅析JavaScript数组中的深复制与浅复制

介绍数组的深复制与浅复制,首先给大家回顾回顾数据类型

数据类型

1、基本数据类型::numberstringbooleannullundefined

  • 存储方式: 基本数据类型存储在栈内存
    变量存储的就是

2、引用数据类型:function 数组 对象(下篇介绍)

  • 存储方式: 引用数据类型存储在堆内存
    变量存储的是地址。【相关推荐:javascript学习教程

至于存储方式我们来分析分析:

先给大家介绍介绍栈内存与堆内存,作为了解:

  • 栈内存:引擎执行代码时工作的内存空间,除了引擎,也用来保存基本值和引用类型值的地址。

  • 堆内存:用来保存一组无序且唯一的引用类型值,可以使用栈中的键名来取得。

我们再来看:

var a = 2; var b = a; b++;//3 console.log(a); //2
Nach dem Login kopieren

分析分析,将a的值赋值给b,接着改变b的值,a的值没有受到影响。但是引用数据类型,那就不是这样了,赋值的是地址。

var arr = [1,2,3] ; var arr2 = arr ; arr2.push(4) ; console.log(arr); // arr发生了改变
Nach dem Login kopieren

分析分析,arr复制的是地址,何为地址,可以比作成一个房间,arr和arr2都是指向的这个房间,改变这个房间的结构,arr和arr2都会受到影响。如下图

1.png

了解上面后,接着重点

深复制与浅复制

  • 数组的浅复制:只复制了地址 (共享地址)
  • 数组的深复制:复制值
    遍历(把原数组中的值存入新的数组) var arr2 = [] ;
    slice() 截取数组中的所有值,得到的是一个新数组。 就是要在堆内存中开辟一个新的空间。

数组的浅复制:

只复制了地址 (共享地址)

var arr = [1,2,3,4,5] ; // 数组的浅复制 --- 只是复制了地址 var arr2 = arr ; //改变其中一个数组,两个数组都会改变,
Nach dem Login kopieren

还是很简单理解浅复制的。

数组的深复制:

复制数组中的值

1、定义一个新的空数组,遍历原数组并赋值给新数组

var arr = [1, 2, 3, 4, 5] var arr3 = []; arr.forEach(function(v) { arr3.push(v) }) console.log(arr3); arr3.push('a'); console.log(arr, arr3);//arr[1,2,3,4,5],arr3[1,2,3,4,5,'a']
Nach dem Login kopieren

改变新数组中的值,原数组不会改变

2、slice()截取数组中的所有值,得到的是一个新数组

var arr3 = arr.slice() ; console.log(arr3); arr3.push('a') ; console.log(arr3);//[1,2,3,4,5,'a'] console.log(arr);//[1,2,3,4,5]
Nach dem Login kopieren

改变新数组中的值,原数组不会改变

在这里提一嘴:

基本数据类型传递是值 ,引用数据类型传递的是地址(形参和实参共享地址)

难点难点,多维数组的深复制,以上提到的都是一维数组的深复制和浅复制

二维数组:二维数组本质上是以数组作为数组元素的数组,即“数组的数组”,例如:arr=[[1,2,3],[1,2],[1,2,3,4]]
分析以下代码,为二维数组的遍历,变量i,j代表的就是,下标为i元素(也就是数组)中的第 j+1个元素。

var arr = [ [1, 2, 3], [4, 5, 6], [2, 3, 4] ] for (var i in arr) { for (var j in arr[i]) { console.log(arr[i][j]); } }
Nach dem Login kopieren

多维数组:三维及其以上的数组

多维数组的深复制

多维数组的深复制可不像一维数组那样好判断,因为你无法判断数组中的元素是否又是数组,数组中有数组,无止境,哈哈,所以就需要用到前面提到的递归
用到的方法:Array.isArray(arr[i])判断数组,返回布尔值。

思路:判断多维数组的元素是否是数组,是的话,继续遍历这个数组,在判断,如果不是,就可以用一维数组的判断方式来实现深复制。

Nach dem Login kopieren

更多编程相关知识,请访问:编程视频!!

Das obige ist der detaillierte Inhalt von一文带你浅析JavaScript数组中的深复制与浅复制. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:juejin.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!