Js数据类型及其在内存中的存放，深复制浅复制

最新推荐文章于 2024-10-11 12:47:27 发布

OpenUeyes

最新推荐文章于 2024-10-11 12:47:27 发布

阅读量649

点赞数 1

分类专栏： Javascript

本文链接：https://blog.csdn.net/z_m_s/article/details/80166234

版权

Javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Js数据类型分三类

1.基本数据类型包括：Undefined、Null、Boolean、Number和String（注意都是大写），基本数据类型存放存放于栈内存。栈，只允许在一段进行插入或者删除操作的线性表，是一种先进后出的数据结构，动态分配的空间由程序猿分配释放，若程序员不释放，程序结束时可能由操作系统回收，分配方式倒是类似于链表。（题外话：队列：先进先出FIFO）

2.一种引用数据类型：Object类型。包括：Object、Array、Function、return的Data等。引用类型的存储需要内存的栈区和堆区共同完成，栈区内存保存变量标识符和指向堆内存中该对象的指针，也可以说是该对象在堆内存的地址，而堆内存中存储这个对象如下图所示：（堆由操作系统自动分配释放！）

3.此外ECMAScript支持任何创建自定义类型的机制，而所有值最终都将是上述6种数据类型之一。

深复制和浅复制

深复制和浅复制是针对引用类型而言的。简单实用等号来实现的可视为浅复制，浅复制前后俩对象指向同一个内存，故对其中之一进行修改会影响另一个对象，这种情况是我们不希望的，所以有深复制的迫切需求。

实现数组深复制的方法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		 var arr = ["apple","banana","orange"];
		//浅复制
		var arr1 = arr;
		console.log('浅复制');
		console.log('arr1:' + arr1);
		arr1.push("pair");
		console.log('影响原数组arr:' + arr);
		//for循环实现深复制
		function deepCopy(arr) {
			var newarr = [];
			for (var i=0; i< arr.length; i++) {
				newarr.push(arr[i])
			}
			return newarr
		}
		var arr2 = [];
		arr2 = deepCopy(arr);
		console.log('for循环实现深复制');
		console.log('arr2:' + arr2);
		arr2.push("newfruit");
		console.log('修改新数组arr2:'+ arr2);
		console.log('不会影响原数组arr:' + arr);
		//slice(0)
		var arr3 = arr.slice(0);
		console.log('slice(0)实现深复制');
		console.log('arr3:' + arr3);
		arr3.push("slice");
		console.log('修改新数组arr3:'+ arr3);
		console.log('不会影响原数组arr:' + arr);
		//concat()
		var arr4 = arr.concat();
		console.log('concat实现深复制');
		console.log('arr4:' + arr4);
		arr4.push("concat");
		console.log('修改新数组arr4:'+ arr4);
		console.log('不会影响原数组arr:' + arr);
		//ES6扩展运算符...实现数组的深拷贝
		var [...arr5] = arr;
		console.log('ES6...实现深复制');
		console.log('arr5:' + arr5);
		arr5.push("...");
		console.log('修改新数组arr5:'+ arr5);
		console.log('不会影响原数组arr:' + arr);
	</script>
</html>

运行结果如下：

关于ES6 ...运算符后续继续学习

实现对象深复制的方法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		var obj1 = {
			name : 'zmm',
			age: '18'
		}
		console.log(obj1);
		//for循环深复制
		function copyObj(obj) {
		  let res = {}
		  for (var key in obj) {
		    res[key] = obj[key]
		  }
		  return res
		};
		var obj2 = copyObj(obj1);
		console.log('for循环实现对象深复制');
		console.log(obj2);
		obj2.home = 'bj'
		console.log(obj2);
		console.log(obj1);
		//转换成json再转换成对象实现对象的深拷贝
		var obj3 = JSON.parse(JSON.stringify(obj1));
		console.log('JSON方法实现对象深复制');
		console.log(obj3);
		obj3.ff = 'json';
		console.log(obj3);
		console.log(obj1);
	</script>
</html>

运行结果如下：