js深拷贝与浅拷贝

什么是深拷贝:

var num1 = 100;
var num2 = num1;
num2=1000;
console.log(num1);    //100
console.log(num2);    //1000

虽然前面num2=num1,但后面给num2重新赋值,并没有改变num1的值,这就是深拷贝.

什么是浅拷贝:

var arr1 = [1,2];
var arr2 = arr1;
arr2.push(3)
console.log(arr1);    //[1,2,3]
console.log(arr2);    //[1,2,3]

这里arr1的值会跟随arr2的值改变而改变,这就是浅拷贝

浅拷贝解决方法:

方法一:

var arr1 = [1,2];
//concat()方法会创建一个拷贝当前数组的副本然后把参数添加到副本末尾
var arr2 = [].concat(arr1)
arr2.push(3)
console.log(arr1);    //[1,2]
console.log(arr2);    //[1,2,3]

方法二:

var arr1 = [1,2];
//如果slice不传参数会返回一个新的数组,并包含所有元素
var arr2 = arr1.slice();
arr2.push(3);
console.log(arr1);    //[1,2]
console.log(arr2);    //[1,2,3]

方法三:

var arr1 = [1,2];
//Array.from可迭代对象的任何对象返回Array对象。
var arr2 =Array.from(arr1);
arr2.push(3);
console.log(arr1);    //[1,2]
console.log(arr2);    //[1,2,3]

方法四:

var arr1 = [1,2];
//展开运算符
var arr2 = [...arr1]
arr2.push(3)
console.log(arr1);  //[1,2]
console.log(arr2);  //[1,2,3]

方法五:数组对象类型,对象类型,对象嵌套

var arr1 = [{name:'小明'}];
var arr2 = [...arr1]
arr2[0].name = '小红'
console.log(arr1);  //小红
console.log(arr2);  //小红

//解决方法:
var arr1 = [{name:'小明'}];
//使用JSON方法
var arr2 = JSON.parse(JSON.stringify(arr1));
arr2[0].name = '小红'
console.log(arr1);  //小明
console.log(arr2);  //小红