深克隆和浅克隆的区别

深克隆和浅克隆的区别

js变量包含两种不同数据类型的值：基本类型和引用类型

基本类型都是按值访问的，我们可以直接操作保存在变量中实际的值

引用类型(array、object)访问的是保存字变量对象中的一个地址，因此出现了深克隆和浅克隆

深克隆和浅克隆的区别

浅克隆(shallow copy):新旧对象共享一个地址，改变一个，另一个也会改变

深克隆(deep copy):新旧对象不共享一个地址

基本类型：

var a = 25;
var b = a;
b = 10;
console.log(a);//25
console.log(b);//10

引用类型：

//浅克隆
var tag = [1,2,3,4];
var arr = tag;
arr.push(5);
console.log(tag); //12345
console.log(arr); //12345

当操作新对象，但又不希望影响旧对象时，比如数组的一些方法会改变数组本身，就需要用到深克隆

我总结了几种常见的方法：

方法1：…

var a = [1, 2, 3];
var b = [...a]
b.reverse();
console.log(a); //123
console.log(b); //321

方法2：slice(0)

var a = [1, 2, 3];
var b = a.slice(0);
b.reverse();
console.log(a); //123
console.log(b); //321

方法3：转成JSON

var a = [1, 2, 3];
var b = JSON.parse(JSON.stringify(a))
b.reverse();
console.log(a); //123
console.log(b);//321

方法4：Object.assign()

var a = [1, 2, 3];
var b = [];
Object.assign(b,a)
b.reverse();
console.log(a);
console.log(b);

当然，还有一些方法，比如递归、for循环遍历赋值、new Object() ……