1. 程式人生 > >前端開發遇到的bug——關於指標

前端開發遇到的bug——關於指標

  • 需求:將原陣列中每條資料物件的鍵更名
  • 實現:
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”}

參考<基本資料型別和引用型別的區別詳解>