7、js讲解赋值、浅拷贝、深度拷贝的区别

一、赋值

赋值是将某一个属性或者对象赋给某一个变量的过程，分为“赋值”与“赋址”

1、基本数据类型：赋值，赋值之后两个变量互不影响

let object = "lunlun";
let object2 = object;
console.log(object)// "lunlun"
console.log(object2)// "lunlun"

2、引用数据类型：赋址，两个变量具有相同的引用，指向同一个对象，相互之间有影响

let object = ["2","33",["22",{name:"Copy difference",number:"66"}]];
let arr = object
object[2][1].name = "difference";
object[2][1].number = "33";
console.log(object);//["2","33",["22",{name:"difference",number:"33"}]]
console.log(arr);//["2","33",["22",{name:"difference",number:"33"}]]

二、浅拷贝

如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。可视为浅拷贝的几个方法分别为：Object.assign()、语法 Spread、Array.prototype.slice

1、ES6 的 Object.assign()方法；用于对象合并，是将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

let a = {hh:"77",gg:{age:"22"}}
let c = {ll:"99",ss:{age:"33"}}
c = Object.assign(c,a)//{ll: '99', ss: {age:"33"}, hh: '77', gg: {age:"22"}}
c.hh = '100'
c.gg.age = '66'
console.log(c)//{ll: '99', ss: {age:"33"}, hh: '100', gg: {age:"66"}}
console.log(a)//{hh: '77', gg: {age:"66"}}

结果发现object改变后，a.hh虽然没有变化；但是a.gg.age已经发生了变化 变成了“66”

2、ES6的扩展语法 Spread

let object = ["2","33",["22",{name:"Copy difference",number:"66"}]];
let arr = [...object]
object[0] = "difference";
object[2][1].number = "33";
console.log(object);//["difference","33",["22",{name:"Copy difference",number:"33"}]]
console.log(arr);//["2","33",["22",{name:"Copy difference",number:"33"}]]

3、Array.slice方法

slice() 方法只能操作数组，且返回一个新的数组对象，slice方法可传入两个参数slice(start,end), 两个参数为数组的下标，如slice(1,2):数组下标小于1大于等于2的将会被剔除掉。

let object = ["2","33",["22",{name:"Copy difference",number:"66"}]];
let arr = object.slice(1);
console.log(arr)//["33",["22",{name:"Copy difference",number:"66"}]]
object[1] = "difference";
object[2][1].number = "33";
console.log(object);//["2","difference",["22",{name:"Copy difference",number:"33"}]]
console.log(arr);//["33",["22",{name:"Copy difference",number:"33"}]]

改变 object[1] 之后 arr[0] 的值并没有发生变化，但改变 object[2][1].number 之后，相应的 arr[1][1].number 的值也发生变化

4、Array.concat()方法

concat()方法用于合并两个或者多个数组，返回一个新的数组对象。

const a= ["One", "Two", "Three",{name:"Four"}]
const b = a.concat(["Six"])
b[1] = "love";
b[3].name = 'Five'
console.log(a) //  ['One', 'Two', 'Three', { name: 'Five' } ]
console.log(b) // [ 'One', 'love', 'Three', { name: 'Five' }, 'Six']

slice()和concat()缺点：当原数组a内部存在引用类型，将数据存放在堆内存中,而栈中存放的是内存地址，在a赋值给b，实际是将a的引用地址复制了一份给了b，实际上他们共同指向了同一个堆内存对象，所以更改b会对a产生影响。

三、深度拷贝

深拷贝会拷贝所有的属性，并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。拷贝前后两个数组对象互不影响。

使用方法JSON.parse(JSON.stringify())

let object = ["2","33",["22",{name:"Copy difference",number:"66"}]];
let arr = JSON.parse(JSON.stringify(object));
object[1] = "difference";
object[2][1].number = "33";
console.log(object);//["2","difference",["22",{name:"Copy difference",number:"33"}]]
console.log(arr);//["2","33",["22",{name:"Copy difference",number:"66"}]]