修改JS数组中一个元素的值，其它元素也会跟着变化 0 次阅读

js的神奇

知识点问题复现

今天在码着代码调试的时候，根据条件判断将一个数组的一个元素值进行增或者减的操作，结果发现，数组中的其它元素也都跟着变了。

第一次碰见这种情况，检查了好几遍代码也没感觉哪里有写错，有点一头雾水，甚至写了各种小demo调试。

最后发现，是关于js的堆与栈问题…

示例代码：

var d = [
	{
			a: 1
	},
	{
			a: 2
	}
];

d[2].a = 100;
console.log(d);

按照我们通常的认知里，上述代码执行的结果应该是是：

[{a:1},{a:100}]

而实际上的执行结果却是：

[{a:100},{a:100}]

很奇怪吧~

解决办法

先把数组转换成字符串，再转换成对象，在进行数据修改，最后再赋值回去。

代码示例：

var d = [
	{
			a: 1
	},
	{
			a: 2
	}
];

var tmp = JSON.parse(JSON.stringify(d));
tmp[2].a = 100;
d = tmp;
console.log(d);

原因和原理

js中的数组是引用类型，数组变量存储在栈，元素数据存储在堆中，将数组赋值不同的对象，所以的赋值对象都指向堆同一个数据，所以改变其中一个数组中的元素，别的数组元素也会改变。

把数组转换成字符串，再转换成对象，这样会新分配一块内存，就不会指向同一个堆中的数据了。

结语

新的知识又增加了~

感谢阅读。

么么哒~~