如何使用 map 向我的 object 添加屬性

Question

我想添加這個“可見”屬性並更改我的“國家/地區”數組，“el2”已正確更改，但最后我的數組與預期不符。

元素正在進入條件並被添加到新屬性，但在循環結束時數組沒有按預期出現

      const countryVisible: any = ['EUA', 'CANADA']
      const countries: any = [{name: 'EUA', id: '123'}, {name: 'CANADA', id: '321'}, {name: 'Italia', id: '322'}]

      countries.map((el2, index2) => {
        countryVisible.forEach((el, index) => {
          if (el2['name'] === el) {
             el2 = {...el2, visible: true}
            console.log(el2) // {name: 'EUA', id: '123', visible: true} and {name: 'CANADA', id: '321', visible: true}
          } else {
            el2 = {...el2, visible: false}
            console.log(el2) //{name: 'Italia', id: '322', visible: false}
          }
        })

      })

      console.log(countries)

output：

[
    {
        "name": "EUA",
        "id": "123"
    },
    {
        "name": "CANADA",
        "id": "321",
        "visible": false
    },
    {
        "name": "Italia",
        "id": "322",
        "visible": false
    }
]

預計 output：

[
    {
        "name": "EUA",
        "id": "123",
        "visible": true
    },
    {
        "name": "CANADA",
        "id": "321",
        "visible": true
    },
    {
        "name": "Italia",
        "id": "322",
        "visible": false
    }
]

Answer 1

您的代碼存在一些小問題； 兩個問題（可能是 3 個）：

• 你沒有return el2; 在map方法中
• 您不會將結果分配回countries ，因此，
• 變量countries應該用let聲明

然后，有一個主要問題：

• 由於您是根據countryVisible數組而不是基於正在考慮的國家/地區 object 設置visible的 state，因此可以將可見的 state 設置為false ，即使它是第一次設置為true 。 例如。 EUA將在最終結果中設置為false 。
• 換句話說，不是檢查和設置每個國家 object 一次，而是檢查每個國家對象的次數。

 const countryVisible = ['EUA', 'CANADA']; let countries = [{name: 'EUA', id: '123'}, {name: 'CANADA', id: '321'}, {name: 'Italia', id: '322'}]; countries = countries.map((el2, index2) => { if( countryVisible.includes( el2['name'] ) ) { el2 = {...el2, visible: true};; } else { el2 = {...el2, visible: false};; } return el2; }); console.log(countries);

更好的方法：

考慮使用map並將visible屬性添加到映射元素。

 const countryVisible = ['EUA', 'CANADA']; const countries = [{name: 'EUA', id: '123'}, {name: 'CANADA', id: '321'}, {name: 'Italia', id: '322'}]; const output = countries.map( ({name,id}) => ({name,id,visible:countryVisible.includes(name)}) ); console.log( output );

Answer 2

您可以用.includes方法替換forEach循環

 const countryVisible = ['EUA', 'CANADA']; const countries = [{name: 'EUA', id: '123'}, {name: 'CANADA', id: '321'}, {name: 'Italia', id: '322'}]; const result = countries.map((country) => ({...country, visible: countryVisible.includes(country.name), })); console.log(result);

 .as-console-wrapper { max-height: 100%;important: top; 0; }

Answer 3

您可以使用此語法將條件屬性分配給 JS object。 (ES6)

const a = {
   ...(someCondition && {b: 5})
}

或者你可以使用 Javascript Object.defineProperty 內置 function

Object.defineProperty(obj, 'foo', {
  value: 1
})