在写敲代码的时候，经常会出现，改变了一个变量的值，结果其他变量的值也一并改变了，那么为什么会出现这种现象？
1、发生原理
前面介绍js数据类型时，有提到过，js数据类型分为基本类型和引用类型，基本类型存储在栈中，可以直接调用，引用类型存储在堆中，栈中存引用（指向堆的地址）。
当我们进行赋值操作时：
let a = 1;
let b = a;
浏览器在栈中创建变量a，并将其值设为1。紧接着，又创建了一个变量b，将其值设为a的值1。
let a = {a:1};
let b = a;
浏览器在栈中创建变量a，在堆中保存{a:1}，并将栈中a变量的值设为堆中的引用（地址）0x1。紧接着，在栈中创建变量b，并将a的值0x1赋给b。此时，a和b同时指向了堆中的数据{a:1}。
总的来说，当发生赋值操作时，基本类型给本身，引用类型给地址。
再回过去看文中开头的问题，也就不难理解了。当数据为引用类型时，直接赋值，并进行修改，会改向堆中的同一份数据。所以导致其他使用这个数据的变量随之改动。
2、如何避免？（如何拷贝）
很多时候，我们的需求是需要用一个变量去创建另一个全新的变量，并不希望两个变量联动。这里可以利用一些手段，在堆中重新创建一份数据。也就是我们说的深浅拷贝。【针对引用类型】
1、浅拷贝
浅拷贝会重新创建对象，但一般仅拷贝一层。如：
let a = {a: 'a', b: [1, 2, 3]};
let b = { ...a };
console.log(b); //{a: 'a', b: [1, 2, 3]};
b.a = 'b';
console.log(a); //{a: 'a', b: [1, 2, 3]};
console.log(b); //{a: 'b', b: [1, 2, 3]};
b.b.push(4);
console.log(a); //{a: 'a', b: [1, 2, 3, 4]};
console.log(b); //{a: 'b', b: [1, 2, 3, 4]};
通过代码，不难看出，浅拷贝可以创建新的对象，并对第一层存储的数据赋值给新的对象中。基本类型给本身，引用类型给地址。所以a.a与b.a完全分隔，a.b，b.b，还存着同一个引用，指向同一份数据。
常用的浅拷贝方法有：
-
...扩展运算符（推荐）
eg:
let arr = [1, 2, 3]; let arrCopy = [...arr];
let obj = {a: 1, b: 1}; let objCopy = {...obj};
2、深拷贝
深拷贝会创建一份全新的对象，并为原始对象中的引用类型也创建一份新的对象。即有几层，拷贝几层。
常用的深拷贝方法有两个：
（1）JSON.parse() + JSON.stringify()
原理：利用JSON.stringify()将原始对象转换成JSON字符串，利用JSON.parse() 解析JSON字符串生成新的对象。
let obj = {a: 1, b: [1, 2, 3]};
let objCopy = JSON.parse(JSON.stringify(obj));
objCopy.b.push(4);
console.log(obj); //{a: 1, b: [1, 2, 3]};
console.log(objCopy); //{a: 1, b: [1, 2, 3, 4]};
通过JSON.parse() + JSON.stringify()能较为简单的实现对象和数组的深拷贝，但仍会存在很多问题。
-
局限
我们已经了解到此方法会将原始对象转换成JSON字符串，紧接着再将JSON字符串解析生成新的对象。那么在“对象->JSON字符串->对象”这一过程中，必然存在一些转换的问题。
let obj = {
a: [1,2,3],
b: {a: 'a'},
c: new Date(),
d: /[a-z]/,
f: function a(){ alert(1) }
}
let objCopy = JSON.parse(JSON.stringify(obj));
console.log(obj);
// {
// a: [1, 2, 3],
// b: {a: 'a'},
// c: Tue Feb 23 2021 11:38:49 GMT+0800 (中国标准时间),
// d: /[a-z]/,
// f: ƒ a()
// }
console.log(objCopy);
// {
// a: [1, 2, 3],
// b: {a: 'a'},
// c: "2021-02-23T03:38:49.679Z"
// d: {},
// }
根据代码，我们不难发现：针对基本数据类型、对象、数组的时候，“JSON.parse(JSON.stringify(obj));”表现良好，但是针对日期Date、正则RegExp、函数Function的时候，会出现问题。
- Date
JSON.stringify()会将Date对象转换成ISO日期格式的字符串，且JSON.parse()，并不会将其转换成Date对象。从而导致类型不一致。 - RegExp
JSON.parse(JSON.stringify(obj));在处理正则的时候，会粗暴的直接将其转换成空对象，数据丢失。 - Function
同理，JSON.parse(JSON.stringify(obj));在处理Function的时候，会将其转换成undefined，数据丢失。
（2）利用递归手写方法实现深拷贝
这部分内容，需要综合利用前文提到的知识点，进行构造，大家可以自行进行尝试。本文不进行赘述，下个文章会单独总结。
3、总结
- 改变了一个变量的值，其他变量也一并改变的原因是引用类型数据，栈中存放的是地址，两个变量用了同一份堆中的数据。
- 当数据为引用类型时，且想取消变量之间的关联，需要用到深浅拷贝。
- 当数据仅有一层时，利用...扩展运算符能很简单的实现数据的拷贝。
- 使用JSON.parse(JSON.stringify(obj));来进行深拷贝时，应注意对象中，不能存在Date、RegExp、Function类型的数据，不然会导致数据丢失。
网友评论