js笔记：深拷贝与浅拷贝

JavaScript中的数据类型分为 基本数据类型和引用数据类型，基本数据类型的值是按值访问的，基本数据类型的变量是存放在栈内存（Stack）里的，基本数据类型包括String、Number、Boolean、Null、undefined以及ES6新增的Symbol；  引用数据类型的值是按引用访问的，引用数据类型存储在堆（Heap）内存中，变量在栈中保存的是指向堆内存的地址值，这个地址值指向对应的对象类型，访问堆内存中的对象是通过地址值访问的。引用数据类型包括Object对象，Array, Function函数, Date, RegExp。（这两个概念下面会用到）

一、深拷贝与浅拷贝

深拷贝：克隆出一个一模一样的对象，数据相同，但是引用地址不同，不共用同一块内存地址，即修改新对象，旧对象保持不变。

浅拷贝：克隆出一个对象，数据相同，共享共同一块内存地址，即修改新对象，旧对象也会发生改变。

二、实现深拷贝方法：

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

let deepCloneObj  =  JSON.parse( JSON.stringify( targetObj ) ) 

targetObj为被克隆的对象，先将其转换成json字符串格式，然后在转换为对象格式。（注：此方法不能深拷贝函数Function）

2.使用Lodash工具库的 _.cloneDeep( )方法

例：在vue_cli的项目中使用 Lodash工具库的方法

2.1 npm安装Lodash ===>  npm i -save lodash   \\全局安装

2.2 在main.js中引入===> import _ from 'lodash' //导入loadsh插件

2.3 给vue实例添加全局_属性，以便在整个项目中均可使用 ===> Vue.prototype._ = _;

如：let obj = { a:1,b:2 }

let deepCloneObj = _.cloneDeep( obj )

console.log( deepCloneObj === obj ) //false

三、实现浅拷贝的方法

1.  Object.assign() 方法

let  shallowCloneObj = {targetObj,source}

（注：当对象只有一级属性为深拷贝，即一级属性的属性值为基本数据类型；当对象中有多级属性时，二级属性后就是浅拷贝，即一级属性的属性值是引用类型的数据类型）

例：

2. 直接赋值

let obj = {a:1,b:2}

let  shallowCloneObj = obj

console.log( shallowCloneObj  === obj)  //true

3.  Lodash工具库的 _.clone()方法。vue中用法同上

如：let obj = { a:1,b:2 }

let shallowCloneObj = _.clone( obj )

console.log( deepCloneObj === obj ) //true