JS變量push進去數組或給其他結構誤解。

對js理解陷入了誤區。
場景問題:
今天同事問了我個問題,將一個變量改變,再放入一個數組中,發現後面的將前面的覆蓋。

<!DOCTYPE html>
<html>
<body>

<script>
var obj = { 
   "name":"Bill Gates",
   "age":62,
   "cars": {
	  "car1":"Porsche",
	  "car2":"BMW",
	  "car3":"Volvo"
   }};
var cars = [{"car1":"11Audi", "car2":"11BMW", "car3":"11porsche"},{"car1":"22Audi", "car2":"22BMW", "car3":"22porsche"}];
// 相同名字,年齡。但是擁有的車不同。
var psersons = [];
for(let i = 0; i < cars.length; i++){
	obj.cars = cars[i];
    psersons.push(obj);
}
console.log(psersons);
</script>

</body>
</html>

錯誤的思維理解:
1、第一次循環,改變對象push進數組,我們第一個想要結果進去了。
1、第二次循環,改變對象push進數組,我們第二個想要結果進去了。

你想的結果:

[{ "name":"Bill Gates",
   "age":62,
   "cars": {"car1":"11Audi", "car2":"11BMW", "car3":"11porsche"}}, 
   {"name":"Bill Gates",
   "age":62,"cars": 
   {"car1":"22Audi", "car2":"22BMW", "car3":"22porsche"}}]

然而:
在這裏插入圖片描述
爲什麼?這就是對堆棧理解的錯誤。
正確理解是這樣的:確實你當前放入兩個。但是這兩個指的是同一個。也就是你把該對象放入兩邊。
在這裏插入圖片描述
所以第二次改變的時候,第一個所指的對象也改變了。

解決方式:將對象轉一下再放入。
比如:

	obj.cars = cars[i];
    psersons.push(JSON.parse(JSON.stringify(obj)));

在這裏插入圖片描述
原則上來說,你要你改變了他的指向都是可以的。
就要看看原型了。每個變量都有個原型。
大的來說,
對一個js或ts。this = window
在這裏插入圖片描述
如果想改變this指向就需要原型中的方法:提供了call、apply、bind這三個方法,來切換/固定this的指向。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章