记录一次修复bug的经历
网页在更新迭代时,新版本在开发的时候莫名奇妙的会产生数据上的错误,期初还以为是cookie的储存过多导致的,因为出问题之处的新老版本代码完全一致,即在更新迭代时没有针对该处代码进行修改。
代码基本结构
这一js文件在最开始声明了多个const列表变量,然后在后面会多次引用这几个列表变量。
问题所在
新版本的网页在onload函数中加入了部分代码,这部分代码中包含了对几个const列表变量的引用,想法是新声明一个变量直接等于某个const列表变量,即声明副本,然后对副本进行修改,即只是想使用const变量中的值,修改的话只修改副本,不动原const变量。但是在JavaScript中,直接用将A列表的值用等号赋值给B列表,这就只是把B作为了A的引用,改变B会导致A也会被改变。
所以,在onload函数中加入对const列表变量的引用后,导致了原变量的改变,进而导致后面的代码的数据产生错误。
数组的深拷贝和浅拷贝。
内容引用自 https://blog.youkuaiyun.com/qq_33769914/article/details/100015740
浅拷贝,两个数组会相互影响
var array1 = [1];
var array2 = array1;
array2[1] = 2;
console.log(array1); // [1, 2]
console.log(array2); // [1, 2]
要改变array2的值而且不影响array1就要进行深拷贝,切断两个数组之间的关联。
// 1、使用扩展运算符...进行复制,需要es6语法的支持
var a = ['1','2','3']
var b = [...a];
b[3] = "4";
console.log(b); // ["1", "2", "3", "4"]
console.log(a); // ["1", "2", "3"]
// 2、使用concat或者slice
var arr1=[1];
var arr2 = arr1.concat([]);
// 这种情况深拷贝以后,arr2 == arr1是true。也可以使用var arr4 = arr1.concat(); arr4也深拷贝了arr1.并且arr1 != arr4
// 不改变原来数组的情况下,拷贝出数组b ,且满足 b != a。使用concat()
// 或者是 var arr2 = [].concat(arr1);
// 或者是 var arr2 = arr1.slice();