如何將物件陣列轉換為物件，鍵和值作為陣列

我正在尋找使用 reddduced 函式將物件陣列轉換為具有陣列值的物件的優化解決方案

const companies=[
    {name:'Company One',email:'[email protected]',phone:'8860138213', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'X Name',email:'[email protected]',phone:'8860138213', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'A one',email:'[email protected]',phone:'943548213', category:'Lecture',start:1981,end:2003,date:'21-06-2009'},
    {name:' Name',email:'[email protected]',phone:'9656013653', category:'Finance',start:1981,end:2003},
    {name:'Company Name',email:'[email protected]', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'sdksdjd',email:'[email protected]',phone:'7485788475898548', category:'Sciennce',start:1981,end:2003,date:'21-06-2009'},
    {name:'kdjfkf',email:'[email protected]',phone:'0959898860138213', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'vdjf',email:'[email protected]',phone:'050498860138213', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'vdjvk',email:'[email protected]',phone:'958958860138213', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'vdkv',email:'[email protected]',phone:'5434886013821543543', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'zeeshan',email:'[email protected]',phone:'8864535213', category:'Finance',start:1981,end:2003,date:'21-06-2009'}
]

// Looking for better and optimised solution to convert array of object into object with.  values as an array using map methods  

let reduced_object={}

let reduced_array=companies.reduce((arr,current)=>{

let entries=Object.entries(current)

entries.forEach(element=>{

    if(reduced_object.hasOwnProperty(element[0])){
       reduced_object[element[0]].push(element[1])

    }else{
    reduced_object[element[0]]=[element[1]];

    }
})

return reduced_object
})

console.log(reduced_array)

uj5u.com熱心網友回復：

我會改用地圖：

// ...
const reduced_object = {};
reduced_object.name = companies.map(item => item.name);
reduced_object.email = companies.map(item => item.email);
reduced_object.phone = companies.map(item => item.phone);
// ...

當然，一旦您知道（或確定）了每個專案的鍵串列，您就可以將其包裝在 for-of 循??環中：

// ...
const reduced_object = {};
for (let key of item_keys) {
    reduced_object[key] = companies.map(item => item[key]);
}

uj5u.com熱心網友回復：

此解決方案不使用減少：

let obj = {
  name: companies.map(item => item.name).filter(value => value !== undefined),
  email: companies.map(item => item.email).filter(value => value !== undefined),
  phone: companies.map(item => item.phone).filter(value => value !== undefined),
  category: companies.map(item => item.category).filter(value => value !== undefined),
  start: companies.map(item => item.start).filter(value => value !== undefined),
  end: companies.map(item => item.end).filter(value => value !== undefined),
  date: companies.map(item => item.date).filter(value => value !== undefined)
}

編輯：添加過濾器以在源中缺少屬性時洗掉“未定義”條目。

uj5u.com熱心網友回復：

另一種解決方案：

const companies=[
    {name:'Company One',email:'[email protected]',phone:'8860138213', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'X Name',email:'[email protected]',phone:'8860138213', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'A one',email:'[email protected]',phone:'943548213', category:'Lecture',start:1981,end:2003,date:'21-06-2009'},
    {name:' Name',email:'[email protected]',phone:'9656013653', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'Company Name',email:'[email protected]',phone:'954543656138256', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'sdksdjd',email:'[email protected]',phone:'7485788475898548', category:'Sciennce',start:1981,end:2003,date:'21-06-2009'},
    {name:'kdjfkf',email:'[email protected]',phone:'0959898860138213', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'vdjf',email:'[email protected]',phone:'050498860138213', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'vdjvk',email:'[email protected]',phone:'958958860138213', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'vdkv',email:'[email protected]',phone:'5434886013821543543', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'zeeshan',email:'[email protected]',phone:'8864535213', category:'Finance',start:1981,end:2003,date:'21-06-2009'}
]

const arr = companies.reduce((acc, company) => ({
    ...acc,
    ...Object.entries(company).reduce((objAcc, [key, val]) => ({
      ...objAcc,
      [key]: [...acc?.[key] ?? [], ...val ? [val] : []]
    }), {})
}), {})

console.log(arr)

如果你不想有重復的值，你也可以這樣做：

const companies=[
    {name:'Company One',email:'[email protected]',phone:'8860138213', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'X Name',email:'[email protected]',phone:'8860138213', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'A one',email:'[email protected]',phone:'943548213', category:'Lecture',start:1981,end:2003,date:'21-06-2009'},
    {name:' Name',email:'[email protected]',phone:'9656013653', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'Company Name',email:'[email protected]',phone:'954543656138256', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'sdksdjd',email:'[email protected]',phone:'7485788475898548', category:'Sciennce',start:1981,end:2003,date:'21-06-2009'},
    {name:'kdjfkf',email:'[email protected]',phone:'0959898860138213', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'vdjf',email:'[email protected]',phone:'050498860138213', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'vdjvk',email:'[email protected]',phone:'958958860138213', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'vdkv',email:'[email protected]',phone:'5434886013821543543', category:'Finance',start:1981,end:2003,date:'21-06-2009'},
    {name:'zeeshan',email:'[email protected]',phone:'8864535213', category:'Finance',start:1981,end:2003,date:'21-06-2009'}
]

const arr = companies.reduce((acc, company) => ({
    ...acc,
    ...Object.entries(company).reduce((objAcc, [key, val]) => ({
      ...objAcc,
      [key]: [...new Set([...acc?.[key] ?? [], ...val ? [val] : []])]
    }), {})
}), {})

console.log(arr)

uj5u.com熱心網友回復：

有趣的功能路線：

[...new Set(companies.flatMap(Object.keys))]
    .reduce((result, key) => {result[key] = companies.map(c => c[key]); return result;}, {})

第一行找到所有的鍵。第二行創建所需的結果。但老實說，在現實生活中，我會跳過那個 reduce 并撰寫一個簡單的 for 回圈。我總是會選擇清晰度而不是“功能純度”。

標籤：javascript

上一篇：使用Bootstrap5：如何在沒有jQuery的情況下跨多個HTML頁面創建可重用的導航欄？

下一篇：使用javascriptRegEX驗證文本