js深拷贝和浅拷贝

数组的深浅拷贝

浅拷贝

var arr = ["One","Two","Three"];

var arrto = arr;
arrto[1] = "test";
document.writeln("数组的原始值：" + arr + "<br />");//Export:数组的原始值：One,test,Three
document.writeln("数组的新值：" + arrto + "<br />");//Export:数组的新值：One,test,Three

深拷贝

<!--方法1: slice-->
var arr = ["One","Two","Three"];
var arrto = arr;
arrto[1] = "test";
document.writeln("数组的原始值：" + arr + "<br />");//Export:数组的原始值：One,test,Three
document.writeln("数组的新值：" + arrto + "<br />");//Export:数组的新值：One,test,Three

<!--方法2:concat-->
var arr = ["One","Two","Three"];
var arrtooo = arr.concat();
arrtooo[1] = "set Map To";
document.writeln("数组的原始值：" + arr + "<br />");//Export:数组的原始值：One,Two,Three
document.writeln("数组的新值：" + arrtooo + "<br />");//Export:数组的新值：One,set Map To,Three

<!--方法3 扩展运算符-->
var arr = [1, 2, 3, 4]
var arr1 = [...arr, 5]
console.log(arr)
console.log(arr1)

对象的深浅拷贝

浅拷贝

var a={name:'yy',age:26};
var b=a;
b.name= 'xx';
console.log(a)//{name: "xx", age: 26}
console.log(b)//{name: "xx", age: 26}

深拷贝 就是把对象的属性遍历一遍，赋给一个新的对象

<!--方法1-->
function deepCopy(source) { 
    var result={};
    for (var key in source) {
    	result[key] = typeof source[key]==='object'? deepCoyp(source[key]): source[key];
    } 
    return result; 
}
var a = {name:'yy',age:26};
var b = deepCopy(a);
b.name = 'xx';
console.log(a)//{name: "yy", age: 26}
console.log(b)//{name: "xx", age: 26}

<!--方法2 3-->
var obj = {a: 1, b: 2, c: 3};
var obj1 = Object.assign({}, obj, {c: 4, d: 5})
var obj2 = {...obj, c: 33, d: 44}
console.log(obj)
console.log(obj1)
console.log(obj2)