介绍:
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)
效果图: