亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 javascript 中動態創建新對象時,常量 JSON 對象值在循環中發生變化

在 javascript 中動態創建新對象時,常量 JSON 對象值在循環中發生變化

qq_花開花謝_0 2023-09-28 16:05:49
您好,我有一個模板對象,如下所示:const baseObj = {  objKey: '',  index: 1,  cells: [    {      key: 'id',      value: ''    },    {      key: 'name',      value: ''    }  ]};我想從數組創建對象的動態數組,如下所示:const allDetails = [  {    objKey: '876',    name: 'abc',    id: '123',    address: '123abc'  },  {    objKey: '098',    name: 'def',    id: '456',    address: '456def'  },]為此,我編寫了一個簡單的循環,如下所示:const allData = [];for(let i = 0; i < allDetails.length; i++){  const detail = allDetails[i];  const row = Object.assign({}, baseObj);  row.cells = Object.assign([], baseObj.cells);  row.key = details.objKey;  row.index = i+1;  for(let j = 0; j < row.cells.length; j++)  {    const cell = row.cells[j];    switch(cell.key){      case 'id': {        cell.value = detail.id;        break;      }      case 'name': {        cell.value = detail.name;        break;      }    }  }  allData.push(row);}現在我期望 allData 為:[  {    objKey: '876',    index: 1,    cells: [      {        key: 'id',        value: '123'      },      {        key: 'name',        value: 'abc'      }    ]  },  {    objKey: '098',    index: 2,    cells: [      {        key: 'id',        value: '456'      },      {        key: 'name',        value: 'def'      }    ]  }]但當我打印時,它給我的是:[  {    objKey: '876',    index: 1,    cells: [      {        key: 'id',        value: '456'      },      {        key: 'name',        value: 'def'      }    ]  },  {    objKey: '098',    index: 2,    cells: [      {        key: 'id',        value: '456'      },      {        key: 'name',        value: 'def'      }    ]  }]看起來數組值每次都被覆蓋。在調試時,我可以在更改行單元格的值時以某種方式看到它也在更改 baseObj 單元格的值。然而,只有對象數組出現問題。我看不出哪里出了問題,因為在每個循環中我都從 baseObj 創建新的對象行。誰能發現我犯的錯誤。
查看完整描述

2 回答

?
慕的地6264312

TA貢獻1817條經驗 獲得超6個贊

你必須小心改變你的對象。最好深度克隆您的對象和數組。


這是編寫代碼的另一種方法:


const allData = [];

for (let i = 0; i < allDetails.length; i++) {

    const detail = allDetails[i];

    const cells = [];

    for (let j = 0; j < baseObj.cells.length; j++) {

        const cell = {...baseObj.cells[j]};

        switch (cell.key) {

            case 'id':

                cell.value = detail.id;

                break;

            case 'name':

                cell.value = detail.name;

                break;

        }

        cells.push(cell)

    }

    const row = {objKey: detail.objKey, index: i + 1, cells};

    allData.push(row);

}


查看完整回答
反對 回復 2023-09-28
?
ibeautiful

TA貢獻1993條經驗 獲得超6個贊

您的問題在于:


row.cells = Object.assign([], baseObj.cells);

這會對數組進行淺表復制,這意味著其中的對象baseObj不會被復制,并且在每次迭代時都引用相同的對象引用。您可以通過克隆對象來解決此問題,這可以通過使用以下方法來實現:


row.cells = baseObj.cells.map(o => ({...o}));

你也在設置row.key = detail.objKey,當這確實應該是row.objectKey = detail.objKey


請參閱下面的示例:


const baseObj = {

  objKey: '',

  index: 1,

  cells: [{

      key: 'id',

      value: ''

    },

    {

      key: 'name',

      value: ''

    }

  ]

};


const allDetails = [{

    objKey: '876',

    name: 'abc',

    id: '123',

    address: '123abc'

  },

  {

    objKey: '098',

    name: 'def',

    id: '456',

    address: '456def'

  },

];


const allData = [];

for (let i = 0; i < allDetails.length; i++) {

  const detail = allDetails[i];

  const row = Object.assign({}, baseObj);

  row.cells = baseObj.cells.map(o => ({...o}));

  row.objKey = detail.objKey;

  row.index = i + 1;

  for (let j = 0; j < row.cells.length; j++) {

    const cell = row.cells[j];

    switch (cell.key) {

      case 'id':

        cell.value = detail.id;

        break;

      case 'name':

        cell.value = detail.name;

        break;

    }

  }

  allData.push(row);

};


console.log(allData);


上述問題的另一種解決方案是使用.map()構建一個新對象,我們從基礎對象中獲取/借用屬性,并將任何重疊的屬性替換為當前迭代對象中的屬性:


const baseObj = { objKey: '', index: 1, cells: [ { key: 'id', value: '' }, { key: 'name', value: '' } ] }; const allDetails = [ { objKey: '876', name: 'abc', id: '123', address: '123abc' }, { objKey: '098', name: 'def', id: '456', address: '456def' }, ];


const result = allDetails.map(({objKey, address, ...r}, index) => ({

  ...baseObj, 

  objKey, 

  index: index+1, 

  cells: baseObj.cells.map(o => ({...o, value: r[o.key]}))

}));


console.log(result);


查看完整回答
反對 回復 2023-09-28
  • 2 回答
  • 0 關注
  • 169 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號