Javascript，數組項未定義。 使用 Reduce 方法推送

Question

所以我試圖獲取 web 上顯示的數組項的名稱。
這是“modelscount”數組，其中的對象如下所示：

[{"model":"1","count":4},{"model":"2","count":2}...]

i此處顯示數字，但i必須顯示從其他對象數組中獲得的模型名稱而不是數字。 這是“模型”數組，其中 object 看起來像這樣：

[
  { 
    "_id":"611647e62001fe0ff0af0ad6",
    "model":"1",
    "name":"FIAT 500",
    "hour_price":4.2,
    "__v":0
  },
  { 
    "_id":"61165c7e8fecf33528790b45",
    "model":"2",
    "name":"BMW X4",
    "hour_price":6.9,
    "__v":0
  }
].

所以i想我將使用 reduce 方法從每個 object 中獲取名稱，然后創建一個數組來檢查 arrays 項目的數量，該項目與“modelscount”數組的每個項目中的 model 相對應。 這一切在紙面上看起來都不錯，但是當我嘗試從數組中獲取一個帶有名稱的項目時，為什么我得到了未定義？ 我該如何解決？ 你能為這個問題提出其他解決方案嗎？ 這是從控制台看到的問題：如控制台所示

 const showModelsCount = () => { let arrayOfModels = []; fetch(MODELS_URI).then((res) => res.json()).then((data) => { console.log('this is data', data); data.reduce((total, item) => { arrayOfModels.push(item.name); return arrayOfModels; }, ''); arrayOfModels; }); console.log(arrayOfModels); console.log('first item', arrayOfModels[1]); //returns undefined const showAllVehicles = (e) => { fetch(MODELS_COUNT_URI).then((res) => res.json()).then((data) => { data.reduce((total, item) => { let arrayNum = +item.model - 1; total += ` <tr> <td>Name: ${arrayOfModels[arrayNum]}</td> <td>Count: ${item.count}</td> </tr>`; return (modelsCountOutputElement.innerHTML = total); }, ''); }); }; return showAllVehicles(); };

Answer 1

您基本上在執行該行時重新分配了變量total ：

total = item.name

所以變量 total 不再包含/表現為累加器。 Array.Reduce 文檔： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

您可能需要將該total更改為其他內容。 但我只是看到你想無條件地將所有汽車模型放入一個數組中，所以你需要的更有可能是forEach或map而不是reduce 。

 var data =[ {"_id":"611647e62001fe0ff0af0ad6","model":"1","name":"FIAT 500","hour_price":4.2,"__v":0},{"_id":"61165c7e8fecf33528790b45","model":"2","name":"BMW X4","hour_price":6.9,"__v":0}]; var result = data.map(item => item.name); console.log(result);

Answer 2

同意達納。

我有一個更簡單的解決方案

 const modelscount = [{"model":"1","count":4},{"model":"2","count":2}] const models = [{"_id":"611647e62001fe0ff0af0ad6","model":"1","name":"FIAT 500","hour_price":4.2,"__v":0},{"_id":"61165c7e8fecf33528790b45","model":"2","name":"BMW X4","hour_price":6.9,"__v":0}] const modalsMap = modelscount.map(({modal, count}) => { const findModal = models.find(({modal: modalName}) => modalName === modal) return ({count, ...findModal}) })