js 浅拷贝直接赋值_js的赋值与浅拷贝、深拷贝

昨天翻了下数组API，看到concat和slice方法，突然想到这个两个方法是浅拷贝还是深拷贝，结果陷入了死胡同，为什么MDN文档说是浅拷贝，但进行简单的操作为什么能复制成功啊，纠结半天后才弄清原由，原来我一直把赋值和深浅拷贝搞混了。

首先不要把引用类型的赋值归结为浅拷贝，深拷贝和浅拷贝只针对像 Object, Array 这样的复杂对象的。简单来说，浅拷贝只拷贝一层对象的属性，而深拷贝则递归拷贝了所有层级。

js数据类型

基本类型为Number、String、Boolean、Undefined、Null，引用类型为Object。

基本类型是储存存放在栈内存中的简单数据段，数据大小确定，内存空间大小可以分配，是直接按值存放的，所以可以直接访问。

引用类型存放在堆内存中，它的变量实际是存放在栈中的一个地址(指针)指向堆中的实际内存地址。

区分赋值、浅拷贝与深拷贝

** 赋值**

基本类型赋值(=)直接在栈中开辟新内存，把值赋值到新内存中，而引用类型的赋值(=)是直接复制栈内存中的地址(指针)，并没有在堆内存总开辟新的内存，因此他们都指向同一个堆内存，任何操作都会影响原来的数据。

let obj2 = obj1;

复制代码

浅拷贝与深拷贝

首先不要把赋值和浅拷贝和深拷贝混在一起。

浅拷贝和深拷贝都在堆内存中开辟新的内存，都进行了复制。

浅拷贝就是进行简单的复制，只会将对象的各个属性进行依次复制，不会递归复制，所以那些子属性如果再是引用类型(对象、数组、函数)的话，就只复制了他们的地址(指针)，实际的内存地址没有被复制。

所以就理解为什么数组方法slice、concat、扩展运算符、Object.assign()这些都是浅拷贝了。它们都进行了简单的拷贝，没有再对深层次的数据进行拷贝。

深拷贝是对对象以及对象的所有子对象进行拷贝。

常见的浅拷贝

扩展运算符(...);

Object.assign();

Array.prototype.concat();

Array.prototype.slice();

lodash(_.clone());

复制代码

深拷贝例子

JSON.parse(JSON.stringify());

虽然用起来很方便，但是，只适合一些简单的情景(Number, String, Boolean, Array, Object)，扁平对象，那些能够被 json 直接表示的数据结构。function对象，RegExp对象是无法通过这种方式深拷贝。

let obj2=JSON.parse(JSON.stringify(obj1));

复制代码

递归赋值;

function deepClone(obj){

let objClone = Array.isArray(obj)?[]:{};

if(obj && typeof obj==="object"){

for(key in obj){

//判断是否为自身属性

if(obj.hasOwnProperty(key)){

//判断ojb子元素是否为对象，如果是，递归复制

if(obj[key]&&typeof obj[key] ==="object"){

objClone[key] = deepClone(obj[key]);

}else{

//如果不是，简单复制

objClone[key] = obj[key];

}

}

}

}

return objClone;

}

复制代码

lodash(_.cloneDeep());

let obj2 = _.cloneDeep(obj1);

复制代码

参考链接：

结尾：如果哪里有错误希望多多指教。