JavaScript实现深度克隆

最新推荐文章于 2024-01-07 05:00:00 发布

Leisure_Time

最新推荐文章于 2024-01-07 05:00:00 发布

阅读量150

点赞数 1

分类专栏： JS 文章标签： JavaScript html5 clone

本文链接：https://blog.csdn.net/weixin_45615791/article/details/103730225

版权

JS 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

介绍：

JavaScript中赋值主要有两种赋值形式，一种是基本类型，另一种是引用类型（地址）。

一般对象或数组赋值的时候，都是地址引用，所以在修改新对象的时候，其实修改了在内存区地址上的值。

为了达到引用类型的效果，所以有深度克隆的概念。

实现方式一：

将每一个值取出来变成引用类型，然后赋值给对象或数组，这样就会在内存空间中开辟一个新的空间从而实现克隆的效果

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>clone</title>
	</head>
	<body>
		<script type="text/javascript">
			function testtype(target) {
				//获取对象的类型
				return Object.prototype.toString.call(target).slice(8, -1)
			}
			function clone(target) {
				let res, restype = testtype(target) //调用获取对象类型 并保存
				//判断数据 并初始化res
				if(restype === 'Array'){
					//前面保存的类型是数组 则res初始话为数组
					res = []
				}else if(restype === 'Object') {
					//相反， res初始化为对象
					res = {}
				}else {
					//如果都不是， 常见变量都是深拷贝， 直接返回
					return target
				}
				//便利对象
				for(let i in target) { //for in 的i如果是对象， 则是key， 如果是数组， 则是下标
					let val = target[i]
					//如果对象或者数组中再次嵌套了数组或对象 则进行递归遍历
					if(testtype(val) === 'Object' || testtype(val) === 'Array') {
						res[i] = clone(val) 
					}else {
						res[i] = val
					}
				}
				return res //最终将数据返回， 形成新数据
			}
			let arr1 = [1, 2, 3, 4, {name: 'zs', age: 18}]
			let arr2 = clone(arr1)//调用自己定义好的克隆方法
			arr2[4].name = 'ls'
			console.log(arr2, arr1)
		</script>
	</body>
</html>

效果图：

实现方式二：

利用JSON提供的stringify的方式，将整体转为基本类型，应为基本类型是不存在浅克隆的，所以相当于在内存空间中开辟了一个新的空间，然后在使用JSON.parse转回为数组或对象, 这样一个快速的深克隆就完成了

代码如下：

let arr1 = [1, 2, 3, 4, {name: 'zs', age: 18}]
let arr3 = JSON.parse(JSON.stringify(arr1))
arr3[4].name = 'ls'
console.log(arr3, arr1)

效果图：

Leisure_Time

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现深度克隆

介绍：JavaScript中赋值主要有两种赋值形式，一种是基本类型，另一种是引用类型（地址）。一般对象或数组赋值的时候，都是地址引用，所以在修改新对象的时候，其实修改了在内存区地址上的值。为了达到引用类型的效果，所以有深度克隆的概念。实现方式一：将每一个值取出来变成引用类型，然后赋值给对象或数组，这样就会在内存空间中开辟一个新的空间从而实现克隆的效果代码如下：&...
复制链接

扫一扫

专栏目录