标签：拷贝 cto 自己 之间 使用 赋值 ror ret 如何
序言
最近遇到几个js引用数据类型造成的bug，今天结合bug详细分析一下，避免以后再犯，也希望能帮大家提个醒，强化js基本功。
目录
1、浅拷贝、深拷贝，解决变量赋值相互影响问题
2、判断2个数组、对象是否相等
现象一
var a=1;
var b=a;
b=2;
console.log(a) //1
console.log(b) //2
var obj1 = {
id: 1,
info: {
name: ‘张三‘
}
};
var obj2 = obj1;
obj2.id = 2;
obj2.info.name = ‘李四‘
console.log(obj1) // {id:2, info:{name: ‘李四‘}}
console.log(obj2) // {id:2, info:{name: ‘李四‘}}
1. 现象分析：
数组、对象都是用用数据类型。直接 = 赋值，或者 浅拷贝，这些变量实质上共享一个存储空间的数据。当你修改其中一个对象变量时，
另一个也会变。
2. 深浅拷贝
浅拷贝： 简单说，就是新的变量与原变量公用一个指针，即公用同一份存储空间的数据。改变a，b也会变
深拷贝： 简单说就是把数据全部拔下来，重新存一下。a，b之间没有任何牵连
浅析：
1. 这涉及到计算机原理的一些东西。js基本数据类型存在 栈内存 中， 当 a=b ,相当于新开辟一个存储空间，所以互不影响。
2. 引用数据类型，名 存在栈内存中，值存在堆内存中，栈内存会额外存一个指向堆内存的指针，其实就是 堆内存地址。
3. 我们对象 a=b 时，仅仅将名，即 栈内存中的数据复制了出来，但是栈内存的地址并没有变，所以a,b值会保持一致，互相影响。
3. 几个实现对象拷贝的方法
let obj1 = { name: 11, age: 11, ope: { say: 1, get: 2 }}
let obj2 = { }
(1) let obj2 = { ...obj1 } let obj2 = { ...obj1 ,ope：22}
这个拷贝不彻底，他可以深拷贝基础数据类型，name 等修改不会影响，但是数组、对象不行，ope里面的数据依旧相互影响,但是我们
可以将这些引用数据类型给修改掉，这样依旧可以实现互不影响
(2) let obj2 = Object.assign({ },obj1,...)
原理是一样的，也是只对基本数据类型管用，这个灵活度，还不如上面那个
(3) 通过 json 字符串、对象转换的方式
obj2 = JSON.stringify(obj1) 先转 字符串
obj2 = JSON.parse(obj2) 再转对象
而且转成字符串以后，还方便 网络传输 、 存储。
现象二
var arr1 = [1,2,3];
var arr2 = [1,2,3];
var obj1 = {id:1,name:"张三"};
var obj1 = {id:‘1‘,name:"张三"};
var arr3 = arr1;
var obj3 = obj1;
console.log(arr1 === arr2);//false
console.log(obj1 === obj2);//false
console.log(arr3 === arr1);//true
console.log(obj3 === obj1);//true
1. 现象分析：
因为 数组、对象是引用数据类型，变量存储的是地址，真正是数据在地址指针指向的存储单元，所以arr1、arr2的数据是放在不同存储单元里的。直接比较，地址肯定是不同的。而赋值操作 arr3 = arr1 是将地址指针赋值，数组数据还是只放在一个存储单元里面，arr1、arr2 都存储了这个地址，所以直接比较是相等的
2. 如何实现 数组 对象的相等判断
方法一 转换为字符串再比较
JSON.stringify(a1) == JSON.stringify(a2)
或
a1.toString() == a2.toString()
问题：存在 1 和 ‘1‘ ，认为是相同的情况，只能根据自己情况来了
方法二
function equalJudgment(data1,data2) {
var result = true
if (data1 && data2 && data1.constructor === Array && data2.constructor === Array) {
if (data1.length !== data2.length) {
result = false
} else {
for (var i=0;i<data1.length;i++) {
if (data1[i].constructor === Array && data2[i].constructor === Array){
if (!equalJudgment(data1[i], data2[i])) {
result = false
return result
}
} else if (data1[i].constructor === Object && data2[i].constructor === Object){
if (!equalJudgment(data1[i], data2[i])) {
result = false
return result
}
} else {
if (data1[i] !== data2[i]){
result = false
return result
}
}
}
}
} else if (data1 && data2 && data1.constructor === Object && data2.constructor === Object) {
var key1 = Object.getOwnPropertyNames(data1)
var key2 = Object.getOwnPropertyNames(data2)
if (key1.length !== key2.length) {
result = false
} else {
for (var i=0;i<key1.length;i++) {
if (key2.indexOf(key1[i]) === -1) {
result = false
return result
} else if (data1[key1[i]].constructor === Array && data2[key1[i]].constructor === Array) {
if (!equalJudgment(data1[key1[i]], data2[key2[i]])) {
result = false
return result
}
} else if (data1[key1[i]].constructor === Object && data2[key1[i]].constructor === Object) {
if (!equalJudgment(data1[key1[i]], data2[key1[i]])) {
result = false
return result
}
}else {
if (data1[key1[i]] !== data2[key1[i]]){
result = false
return result
}
}
}
}
} else {
result = ‘Input error!‘
}
return result
}
以上 js 函数是我自己写的，经过测试没有问题 ，网上有很多实现的方法，但是大多都是无法解析多层数组、对象嵌套的情况 （说实话没啥卵用），但是个人觉得这个方法写的有些啰嗦，抛砖引玉，有更好的方法希望大家不吝分享。 ps：顺便帮我测测bug，虽然各种情况都试过，应该是没问题
总结
上述的2个现象在码代码过程中应该会经常遇到，特别是处理像 react、Vue 生命周期函数的时候、state使用修改的时候，经常会遇到引用数据类型带来的问题，不经意间就出问题了，希望这些能帮到大家，若有错误，望指出！！！
js数组和对象相等判断、拷贝详解(结合几个现象讲解引用数据类型的趣事)
标签：拷贝 cto 自己 之间 使用 赋值 ror ret 如何
原文地址：https://www.cnblogs.com/pengfei-nie/p/9767156.html
