深拷贝与浅拷贝`
提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加
深浅拷贝由基本类型和引用类型,而基本类型分为值,引用类型分为
引用类型的地址和引用类型的值
则涉及到js中变量的存储方式,js中变量的存储方式分为栈(stack)和堆(heap)
而栈(stack)中存放的为基本类型的值和引用类型的地址
堆(heap)中放的是引入类型的值
而深浅拷贝则是相当于引入类型来说
深拷贝:传的为引入类型的值 浅拷贝:传的为引入类型的地址==
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
深拷贝与浅拷贝的分类
基本类型和引入类型的区别
js变量的两种存储方式
栈(stack)和堆(heap)存放的类型
深拷贝传的为引入类型的值
浅拷贝传的为引入类型的地址
一、深拷贝与浅拷贝的分类
深浅拷贝由基本类型和引用类型,而基本类型分为值,引用类型分为
引用类型的地址和引用类型的值
二、使用步骤
1.数组的拷贝–浅拷贝
代码如下(示例):
var arr = [1, 2, 3]
console.log(arr);//Array(3)
var arr_1 = arr;
console.log(arr_1);//(3) [1, 2, 3]
arr_1.push(4)
console.log(arr_1);//(4) [1, 2, 3, 4]
console.log(arr);//(4) [1, 2, 3, 4]
// 打印arr_1和打印arr结果一致,所以更改arr_1也会更改arr
// 证明数组的拷贝为浅拷贝,传的地址
2.for 循环----深拷贝
代码如下(示例):
var arr_2 = [2, 3, 4]
var arr_3 = [];
for (var i = 0; i < arr_2.length; i++) { // console.log(arr_2[i]);//2,3,4
arr_3.push(arr_2[i])
}
console.log(arr_3);//(3)[2, 3, 4]
arr_3.unshift(1);
console.log(arr_3);//(4) [1, 2, 3, 4]
console.log(arr_2);//(3) [2, 3, 4]
// 经过arr_3.unshift(1)打印arr_3,结果不一样,则证明传的为值,并不会影响arr_2
// 则for循环为深拷贝,传的为引入类型的值
3.slice()----深拷贝
// slice()起到截取的作用,它会返回一个新数组,并不改变原数组
var arr_4 = [1, 2, 3];
var arr_5 = arr_4.slice(0);
console.log(arr_5);//3) [1, 2, 3]
arr_5.shift()
console.log(arr_5);//(2) [2, 3]
console.log(arr_4);//(3) [1, 2, 3]
/*则打印arr_5和arr_4结果不一样,将arr_4的值传给arr_5后,
针对于arr_5进行操作,并不会影响arr_4,
证明arr_4传给arr_5的为值,并不是地址
所以slice()为深拷贝*/
4.concat()----深拷贝
var arr_6 = [1, 2, 3];
var arr_7 = arr_6.concat()
console.log(arr_7);//(3) [1, 2, 3]
arr_7.pop()
console.log(arr_7);//(2) [1, 2]
console.log(arr_6);//(3) [1, 2, 3]
// 打印arr_6和arr_7结果并不一样,则证明.......同上面的slice()
// 传递的为值,为深拷贝
5.对象-----深拷贝
// var obj = {
name: "obj",
age: 18
}
var obj_1 = {};
// 针对对象遍历要用for in 循环
for (var k in obj) {
obj_1[k] = obj[k];
}
console.log(obj_1[k]);//18 异步
console.log(obj[k]);//18 异步
console.log(obj_1);//{name: 'obj', age: 18}
console.log(obj);//{name: 'obj', age: 18}
obj_1.age = 20;
console.log(obj_1);//{name: 'obj', age: 20}
console.log(obj);//{name: 'obj', age: 18}
// 打印obj和obj_1的结果并不相同,则证明................同上;
// 所以对象传递的为值,为深拷贝
附(常见的浅拷贝)
使用 Array.prototype.slice() 方法:
var shallowCopy = originalArray.slice();
2.使用 Array.prototype.concat() 方法:
var shallowCopy = [].concat(originalArray);
3.使用 ES6 的扩展运算符(…):
var shallowCopy = [...originalArray];
附(常见的深拷贝)
1.使用 JSON 对象的方法:
var deepCopy = JSON.parse(JSON.stringify(originalArray));
##2. 使用递归进行深拷贝:
function deepClone(source) {
if (typeof source !== 'object' || source === null) {
return source;
}
var target = Array.isArray(source) ? [] : {};
for (var key in source) {
if (source.hasOwnProperty(key)) {
target[key] = deepClone(source[key]);
}
}
return target;
}
var deepCopy = deepClone(originalArray);
总结
提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了深浅拷贝的使用,而且还提供了大量能使我们快速便捷地处理数据的函数和方法。