一、栈（stack）和堆（heap）

  • 栈(stack):由操作系统自动分配释放 ，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；每种数据类型占用的空间大小是固定的。
  • 堆(heap)：一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收，分配方式倒是类似于链表；

二、基本数据类型和引用数据类型

  • 基本数据类型：Number、String、Boolean、Null、 Undefined、Symbol（ES6）。
  • 引用数据类型：Object、Array、Function、Date、RegExp、Map、Set等。

　　基本数据类型和引用数据类型的存储，是不同的。

　　内存地址分配：

     1）基本数据类型:将值存储在栈中 ,栈中存放的是对应的值
     2）引用数据类型:将对应的值存储在堆中,栈中存放的是指向堆内存的地址

 

　　赋值变量：

     1）基本数据类型：是生成相同的值，两个对象对应不同的地址
     2）引用数据类型：是将保存对象的内存地址赋值给另一个变量。也就是两个变量指向堆内存中同一个对象

	let a = 10;
	let b = a;  // 赋值操作
	b = 20;
	console.log(a);  // 10

　　总结：a是基本类型，存储在栈中；把a赋值给b，虽然两个变量的值相等，但是两个变量保存了两个不同的内存地址。

	let obj1 = {}
	let obj2 = obj
	obj2.name = '李四'
	console.log(obj.name)  // 李四

　　解释：obj1是引用类型,将数据存放在堆内存中,而栈中存放的是内存地址.在obj1赋值给obj2，实际是将obj1的引用地址复制了一份给了obj2，实际上他们共同指向了同一个堆内存对象，所以更改obj2会对obj1产生影响。这就是所谓的浅拷贝。

　　总结：为什么拷贝完了，值会随它的变化而变化？ 因为拷贝的是它的指针，实际的值，指向同一个。

所以，如果a， b两个变量，b赋值给a ， 当b修改时，a是否变化？如果a变化了，就是浅拷贝，a没变化，就是深拷贝。

浅拷贝：

会在栈中开辟另一块空间，并将被拷贝对象的栈内存数据完全拷贝到该块空间中，即基本数据类型的值会被完全拷贝，而引用类型的值则是拷贝了“指向堆内存的地址”。

常见的浅拷贝方法：

  • Object.assign()
  • 扩展运算符(…)
  • Array.concat()
  • Array.slice()

举例：

var obj = { 
	x: 2, 
	y: 3,
	z: { 
		num: 9 
	} 
}
var newObj = {}
Object.assign(newObj, obj)
newObj.y = 6
console.log(obj)  
console.log(newObj)

注意：

  • Object.assign()不会拷贝对象的继承属性；
  • Object.assign()不会拷贝对象的不可枚举的属性；
  • Object.assign()可以拷贝 Symbol 类型的属性。

　对象的拷贝：

const obj = {
 a: 1,
 b: {
   c: 1
 }
}
const obj2 = {...obj}
obj.a = 2

console.log(obj)
console.log(obj2); 　

数组的拷贝：

let arr = [1, 2, 3];
let newArr = [...arr]; // 跟arr.slice()是一样的效果

注意：扩展运算符 和 object.assign 有同样的缺陷，也就是实现的浅拷贝的功能差不多，但是如果属性都是基本类型的值，使用扩展运算符进行浅拷贝会更加方便。　　

var obj1 = ["Chinese", { "name": "zs" }, "French"]
var obj2 = obj1.concat()
obj2[1].name = "ls"
obj2[2] = "China"
console.log(obj1, obj2);

注意：数组的 concat 方法其实也是浅拷贝，所以连接一个含有引用类型的数组时，需要注意修改原数组中的元素的属性，因为它会影响拷贝之后连接的数组。不过 concat 只能用于数组的浅拷贝，使用场景比较局限。　

var arr = [2, 4, 6, { y: 10 }]
var newArr = arr.slice()  //slice 的语法为：arr.slice(begin, end);
newArr[0] = 10
newArr[3].x = 20
newArr[3].y = 30
console.log(arr)
console.log(newArr)

注意：slice 方法也比较有局限性，因为它仅仅针对数组类型。slice 方法会返回一个新的数组对象，这一对象由该方法的前两个参数来决定原数组截取的开始和结束位置，是不会影响和改变原始数组的。但是，数组元素是引用类型的话，也会影响到原始数组。

深拷贝：　　

深拷贝是拷贝多层，每一级别的数据都会拷贝出来。

常见的深拷贝方法：

  • JSON.parse(JSON.stringify(obj))
  • 递归方法
  • 函数库 lodash（_.cloneDeep）

举例：

let a = {name: '张三', age: 19, like: ['打篮球', '唱歌', '跳舞']}
let b = JSON.parse(JSON.stringify(a)) //原理:用 JSON.stringify 将对象转成 JSON 字符串，再用 JSON.parse()把字符串解析成对象。一去一来，新的对象就产生了，而且对象会开辟新的栈，实现深拷贝。
a.name = '李四'
a.like[0] = '睡觉'
console.log(a)  
console.log(b)

注意：JSON.stringify也有局限性。

  1. 拷贝的对象的值中如果有函数、undefined、symbol 这几种类型，经过 JSON.stringify 序列化之后的字符串中这个键值对会消失；
  2. 拷贝 Date 引用类型会变成字符串；
  3. 无法拷贝不可枚举的属性；
  4. 无法拷贝对象的原型链；
  5. 拷贝 RegExp 引用类型会变成空对象；
  6. 对象中含有 NaN、Infinity 以及 -Infinity，JSON 序列化的结果会变成 null；
  7. 无法拷贝对象的循环应用，即对象成环 (obj[key] = obj)。

递归：

function deepCopy(obj) {
    let objClone = Array.isArray(obj) ? [] : {};
     if (obj && typeof obj === 'object') {
         for (const key in obj) {
             //判断obj子元素是否为对象，如果是，递归复制
             if (obj[key] && typeof obj[key] === "object") {
                 objClone[key] = deepCopy(obj[key]); //递归
             } else {
                 //如果不是，简单复制
                 objClone[key] = obj[key];
             }
         }
     }	
     return objClone;
 }

lodash函数库提供 _.cloneDeep用来做深拷贝：

	let _ = require('lodash');
	let obj = {
	    a:1,
	    b:{f:{g:1}},
	    c:[1,2,3]
	};
	let newObj = _.cloneDeep(obj);
	console.log(obj.b.f === newObj.b.f); //true

　总结：

  • 浅拷贝就是只拷贝基础数据类型的数据，并且数据只有单一的一层，而深拷贝用于拷贝具有复杂的数据类型的数据

应用场景：

  • 浅拷贝主要用于你需要拷贝的对象的数据结构只有基础数据类型。
  • 深拷贝主要用于你想操作该数据，但是又不想影响到原数据的时候，就可以进行深拷贝。