浅谈基本数据类型，引用数据类型，浅拷贝与深拷贝

我们可以先看看一个常遇到的小问题

let a = {
    age:1
}
let b = a
a.age = 2
console.log(b.age)   //2

从上面的例子中我们看到了，如果给一个变量赋值一个对象，那么两者的值会是同一个引用，其中一方变化，另一方也会有相应的改变。
通常我们开发中不希望出现这样的问题，我们可以使用深拷贝来解决这个问题。

此篇文章中也会简单阐述到栈堆，基本数据类型与引用数据类型，因为这些概念能更好的让你理解深拷贝与浅拷贝。

我们来举个浅拷贝例子：

let a=[0,1,2,3,4],
    b=a;
console.log(a===b);
a[0]=1;
console.log(a,b);

嗯？明明b复制了a，为啥修改数组a，数组b也跟着变了，这里我不禁陷入了沉思。

那么这里，就得引入基本数据类型与引用数据类型的概念了。

面试常问，基本数据类型有哪些，number，string，boolean，null，undefined，symbol以及未来ES10新增的BigInt(任意精度整数)七类。

引用数据类型(Object类)有常规名值对的无序对象{a:1}，数组[1,2,3]，以及函数等。

而这两类数据存储分别是这样的：

a.基本类型--名值存储在栈内存中，例如let a=1;

当你b=a复制时，栈内存会新开辟一个内存，例如这样：

所以当你此时修改a=2，虽然对b并不会造成影响，但这也算不上深拷贝，因为深拷贝本身只针对较为复杂的object类型数据。

b.引用数据类型–名存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值，我们以上面浅拷贝的例子画个图：

当b=a进行拷贝时，其实复制的是a的引用地址，而并非堆里面的值。

而当我们a[0]=1时进行数组修改时，由于a与b指向的是同一个地址，所以自然b也受了影响，这就是所谓的浅拷贝了。

那，要是在堆内存中也开辟一个新的内存专门为b存放值，就像基本类型那样，岂不就达到深拷贝的效果了

一、数据类型

数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。

• 基本数据类型的特点：直接存储在栈(stack)中的数据
• 引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里

二、浅拷贝与深拷贝

深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。

• 浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。

• 但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

三、浅拷贝的实现方式

1.Object.assign()

Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是 Object.assign()进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。

浅拷贝一个对象

var obj = { a: {a: "kobe", b: 39} };
var initalObj = Object.assign({}, obj);
initalObj.a.a = "wade";
console.log(obj.a.a); //wade

浅拷贝一个数组

var arr=[1,13,24,11,11,14,1,2]
var res=Object.assign([],arr);
res[2]=100;　　
console.log(arr)   //[1, 13, 24, 11, 11, 14, 1, 2]
console.log(res)   //[1, 13, 100, 11, 11, 14, 1, 2]

注意：当object只有一层的时候，是深拷贝

let obj = {
    username: 'kobe'
    };
let obj2 = Object.assign({},obj);
obj2.username = 'wade';
console.log(obj);//{username: "kobe"}

四、深拷贝的实现方式

1.JSON.parse(JSON.stringify())

let arr = [1, 3, {
    username: ' kobe'
}];
let arr4 = JSON.parse(JSON.stringify(arr));
arr4[2].username = 'duncan'; 
console.log(arr, arr4)

原理： 用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝。

这种方法虽然可以实现数组或对象深拷贝,但不能处理函数

let arr = [1, 3, {
    username: ' kobe'
},function(){}];
let arr4 = JSON.parse(JSON.stringify(arr));
arr4[2].username = 'duncan'; 
console.log(arr, arr4)

这是因为JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串，不能接受函数，如果想要深拷贝函数，大家可以自己去进一步了解哦。