javascript創建新陣列

我想通過將陣列中的物件值與相關陣列值進行比較來創建一個新陣列。

const vehicleList = [
      {
         "_id": "6294790e2fe156d20868b39e",
         "category_id_tr": "Motosiklet",
         "category_name_tr": "A1",
         "category_desc_tr": "Silindir hacmi 125 santimetreküpü, gücü 11 kilovat? ve gücünün a??rl???na oran? 0,1’i ge?meyen, sepetli veya sepetsiz iki tekerlekli motosikletler ile gücü 15 kilovat? ge?meyen ü? tekerlekli motosikletler.",
            "limit_age_tr": 16,
            "validity_years_tr": 10
      },
      {
         "_id": "6294790e2fe156d20868b39f",
         "category_id_tr": "Motosiklet",
         "category_name_tr": "A2",
         "category_desc_tr": "Gücü 35 kilovat? ve gücünün a??rl???na oran? 0,2’yi ge?meyen, sepetli veya sepetsiz iki tekerlekli motosikletler ile gücü 15 kilovat? ge?meyen ü? tekerlekli motosikletler.",
         "limit_age_tr": 18,
         "validity_years_tr": 10
      }
    ]

我想比較這個陣列的id值和這個陣列的值

const allowedVehicle = ['6294790e2fe156d20868b39e', '6294790e2fe156d20868b39f']

我需要通過將allowedVehicle陣列中的值與vehicleList.

預期結果：

    [
        {
            "value":"6294790e2fe156d20868b39e",
            "label": "A1"
        },
        {
            "value":"6294790e2fe156d20868b39f",
            "label": "A2"
        },
    ]

如何通過比較創建基于匹配值的新陣列

uj5u.com熱心網友回復：

您可以使用它Array.reduce()來創建所需的輸出。

這種方法基本上在一個呼叫中結合了一個map和。filter

我還建議Set從 allowedVehicle 陣列創建一個，對 Set 的 .has 呼叫將比 array.includes() 或 .find() 更有效。

const vehicleList = [ { "_id": "6294790e2fe156d20868b39e", "category_id_tr": "Motosiklet", "category_name_tr": "A1", "category_desc_tr": "Silindir hacmi 125 santimetreküpü, gücü 11 kilovat? ve gücünün a??rl???na oran? 0,1’i ge?meyen, sepetli veya sepetsiz iki tekerlekli motosikletler ile gücü 15 kilovat? ge?meyen ü? tekerlekli motosikletler.", "limit_age_tr": 16, "validity_years_tr": 10 }, { "_id": "6294790e2fe156d20868b39f", "category_id_tr": "Motosiklet", "category_name_tr": "A2", "category_desc_tr": "Gücü 35 kilovat? ve gücünün a??rl???na oran? 0,2’yi ge?meyen, sepetli veya sepetsiz iki tekerlekli motosikletler ile gücü 15 kilovat? ge?meyen ü? tekerlekli motosikletler.", "limit_age_tr": 18, "validity_years_tr": 10 } ] 

const allowedVehicle = new Set(['6294790e2fe156d20868b39e', '6294790e2fe156d20868b39f']);

const result = vehicleList.reduce((acc, {_id: value, category_name_tr: label}) => { 
    if (allowedVehicle.has(value)) {
        acc.push({ value, label})
    }
    return acc;
}, [])

console.log('Result:', result);

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

uj5u.com熱心網友回復：

您可以將Array.includes, Array.filter和Array.map函式結合使用。

const vehicleList = [{
    "_id": "6294790e2fe156d20868b39e",
    "category_id_tr": "Motosiklet",
    "category_name_tr": "A1",
    "category_desc_tr": "Silindir hacmi 125 santimetreküpü, gücü 11 kilovat? ve gücünün a??rl???na oran? 0,1’i ge?meyen, sepetli veya sepetsiz iki tekerlekli motosikletler ile gücü 15 kilovat? ge?meyen ü? tekerlekli motosikletler.",
    "limit_age_tr": 16,
    "validity_years_tr": 10
  },
  {
    "_id": "6294790e2fe156d20868b39f",
    "category_id_tr": "Motosiklet",
    "category_name_tr": "A2",
    "category_desc_tr": "Gücü 35 kilovat? ve gücünün a??rl???na oran? 0,2’yi ge?meyen, sepetli veya sepetsiz iki tekerlekli motosikletler ile gücü 15 kilovat? ge?meyen ü? tekerlekli motosikletler.",
    "limit_age_tr": 18,
    "validity_years_tr": 10
  }
]

const allowedVehicle = ['6294790e2fe156d20868b39e', '6294790e2fe156d20868b39f']

const result = vehicleList.filter(item =>  allowedVehicle.includes(item._id)).map(({
  _id,
  category_name_tr
}) => ({
  value: _id,
  label: category_name_tr
}))

console.log(result)

uj5u.com熱心網友回復：

您可以使用 Javascript 陣列過濾器和映射方法來做到這一點。您將使用 map 生成一個僅包含您需要的資訊的新物件陣列，然后您可以按 id 過濾（反之亦然）。

    vehicleList.map(vehicle => {
      return {
            value: vehicle["_id"],
            label: vehicle.category_name_tr
        };
    }).filter(vehicle => {
      return allowedVehicle.includes(vehicle["value"]);
    })

標籤：javascript 数组

上一篇：Git 使用指南

下一篇：React-Native（iOS）中無法識別的字體系列“anticon”