前端開發遇到的bug——關於指標
阿新 • • 發佈:2018-11-02
- 需求:將原陣列中每條資料物件的鍵更名
- 實現:
let oldList = [
{oldName: '張三', oldAge: '30'},
{oldName: '李四', oldAge: '35'}
];
let newList = [];
let map = {};
oldList.forEach((item) => {
map['newName'] = item.oldName;
map['newAge'] = item.oldAge;
newList.push(map);
});
// newList 出現了重複 oldList 最後一條資料的情況
// [
// {newName: "李四", newAge: "35"},
// {newName: "李四", newAge: "35"}
// ]
// 這次在遍歷過程中列印一下 map 看一看
oldList.forEach((item) => {
map['newName'] = item.oldName;
map['newAge'] = item.oldAge;
newList.push(map);
console.log(map);
});
// 解決的方法:改變 map 宣告的位置
// let map = {};
oldList.forEach((item) => {
let map = {}; // 修改後將 map 的宣告拿進來
map['newName'] = item.oldName;
map['newAge'] = item.oldAge;
newList.push(map);
});
// [
// {newName: "張三", newAge: "30"},
// {newName: "李四", newAge: "35"}
// ]
這裡出現這個問題的原因是map
是指向{}
的指標,真正被改變的不是map
而是記憶體中map
指向的位置也就是{}
,因此map
在遍歷前宣告的話就會導致所有的newList
資料都指向這個只聲明瞭一次的map
map
指向了在記憶體中唯一的{}
。
map | newList |
---|---|
{newName: “李四”, newAge: “35”} | {newName: “李四”, newAge: “35”} |
- | {newName: “李四”, newAge: “35”} |
- | {newName: “李四”, newAge: “35”} |
- | {newName: “李四”, newAge: “35”} |
因此需要每次遍歷就宣告一次map
,這樣就可以在記憶體中開闢一個新的map
作為指向新{}
的唯一指標,而不是所有的newList
資料都指向一個{}
。
map | newList |
---|---|
{newName: “張三”, newAge: “30”} | {newName: “張三”, newAge: “30”} |
{newName: “李四”, newAge: “35”} | {newName: “李四”, newAge: “35”} |