浅拷贝
如果数组中没有引用类型,那么我们可以直接使用浅拷贝的方法。
比如
var source_array = [1,2,3,'four',5,'six',7,'eight'];
var copy_arr = [];
下面的方法都是浅拷贝方法:
- 方法一、for循环
for (let i = 0; i < source_array.length; i++) {
const element = source_array[i];
copy_arr.push(element)
}
console.log(copy_arr)
- 方法二、concat
var copy_arr1 = []
copy_arr1 = source_array.concat()
console.log(copy_arr1)
- 方法三、slice方法
var copy_arr2 = []
copy_arr2 = source_array.slice(0)
console.log(copy_arr2)
- 方法四、...拓展运算符
var copy_arr3 = [];
[...copy_arr3] = source_array
console.log(copy_arr3)
- 方法五、Array.from
var copy_arr4 = []
copy_arr4 = Array.from(source_array)
console.log(copy_arr4)
- 方法六、Array.of
var copy_arr5 = []
copy_arr5 = Array.of(...source_array)
console.log(copy_arr5)
- 方法七、Object.assign
var copy_arr6 = [];
copy_arr6 = Object.assign([],source_array,[]);
console.log(copy_arr6)
我们可以随意改变原始的值然后看下新的值有没有改变
console.log(copy_arr)
console.log(copy_arr1)
console.log(copy_arr2)
console.log(copy_arr3)
console.log(copy_arr4)
console.log(copy_arr5)
console.log(copy_arr6)
如果原始的值包含一个引用类型比如
如果数组里边包含引用类型
比如:
var source_array = [{key: 12},2,3,4,5,6,7,8];
我们使用简单的浅拷贝就不行了,如果改变新的数组的值,依然会影响到原来的数组
source_array[0].key = 9
此时此刻我们使用上边的浅拷贝方法,发现新的值也被改了。这个就是我们使用浅拷贝的缺点。
深拷贝
深拷贝:即便数组内部包含了对象、数组或者函数等引用类的类型也可以拷贝
- 方法一、下面是我们写的一个函数
let cloneObj = function(obj){
let str, newobj = obj.constructor === Array ? [] : {};
if(typeof obj !== 'object'){
return;
} else if(JSON || window.JSON){
str = JSON.stringify(obj), //系列化对象
newobj = JSON.parse(str); //还原
} else {
for(var i in obj){
newobj[i] = typeof obj[i] === 'object' ?
cloneObj(obj[i]) : obj[i];
}
}
return newobj;
};
let oldArr = [{value0: {value1: 12}},{key0: {key1: {key2: 'ceshi'}}}];
let newArr = cloneObj(oldArr);
console.log(newArr)
newArr = [{value0: {value1: 45}},{key0: {key1: 'gaibian'}}];
console.log(oldArr)
console.log(newArr)
- 方法二、
let oldArr1 = [{value0: {value1: 12}},{key0: {key1: {key2: 'ceshi'}}}];
let newArr1 = JSON.parse(JSON.stringify(oldArr1))
console.log(newArr1)
newArr1 = [{value0: {value1: 45}},{key0: {key1: 'gaibian'}}];
console.log(oldArr1)
console.log(newArr1)