#头条创作挑战赛#

前端小白Earl笔记

对于小白如Earl来说，要弄明白JavaScript中赋值、浅拷贝和深拷贝这三者的区别就需要先搞明白JavaScript中的变量类型有哪些，以及引用数据类型和基本数据类型的区别。

JavaScript中的变量类型

js变量类型可分为以下两大类（基本数据类型中ECMAScript 2016新增的Symbol不在本篇文章的讨论范围，暂不列入）

• 值类型（基本数据类型）：字符串（string）、数值（number）、布尔值（boolean）、null、undefined
• 引用数据类型：对象（Object）【在JS中除了基本数据类型以外的都是对象】

引用数据类型和基本数据类型的区别

基本数据类型是存放在栈内存（stack）中的简单数据段，是直接按值存放的，所以可以直接按值访问。基本数据类型的值不能添加属性和方法。基本数据类型的变量名称和和值都会储存在栈内存中。

引用数据类型则是存放在堆内存（heap）中的对象。它们的值是存在于堆内存中的，变量名称其实是保存的在栈内存中的一个指针，也就是说栈内存中保存的只是堆内存中的引用地址。

赋值

我们在给基本数据类型赋值的时候，就是直接的把栈内存中储存的值传给变量。

 //例（1） 
var a = 1; 
b = a; 
b = 2;  
console.log(a); // 1

从例（1）中可以看到，我们用b=a拷贝基本数据类型的时候，栈内存会开辟一个新的变量名称和值，b和a都是独立的。

但是，我们同样用这种直接赋值的方式来拷贝引用数据类型的时候，情况就有些不一样了。

//例（2） 
var a = [1,2]; 
b = a; 
b[0] = 2;  
console.log(a); // [2,2]

//例（3） 
var obj = {a: 1}; 
obj2 = obj; 
obj2.a = 2;  
console.log(obj); // {a: 2}

从例（2）和例（3）中可以看出，当我们把一个对象（引用数据类型）赋值给一个新的变量时，赋值的其实是对象在栈中的引用地址，而不是堆中的数据。两个对象指向的是同一个存储空间，两个对象是联动的，无论哪个对象发生改变，其实都是改变的存储空间的内容，两个对象都会发生改变。

除非将其中的一个对象重新定义，才会变成两个独立的变量。例（4）的代码在这里只是做个比较。

 //例（4） 
var obj = {a: 1}; 
obj2 = obj; 
obj2 = {a: 2};  
console.log(obj); // {a: 1}

浅拷贝

浅拷贝则比赋值多了一层，把对象的值复制一份赋给一个新变量。当对象里的属性值是基础数据类型时，其中一个对象改变属性值，另一个对象不会受到影响；但是当对象里的属性值是引用数据类型时，那么这里面的引用数据类型就会是联动的，其中一个对象改变属性值，另一个对象相应的属性值就会发生改变。

简单的说，浅拷贝就相当于给对象的第一层做了遍历赋值，浅拷贝的其中一种实现方式就是用for in遍历对象第一层：

浅拷贝的其他实现方式：

（1）Object.assign(target,sources) 【浅复制时，target要设个空对象或者数组，否则就相当于直接赋值而不是浅复制】

（2）扩展运算符方式：cloneObj = {...obj}；cloneArr= [...arr]

（3）数组还可以用：arr.slice和arr.concat

深拷贝

深拷贝则是在堆内存中完全开辟了一块内存地址，并将原有的对象完全复制过来存放。在拷贝一个对象的时候为了避免修改对数据造成的影响，必须使用深拷贝。

深拷贝的实现方式：

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

对象的值中如果有函数、undefined、symbol等类型会被忽略。

(2)递归遍历