如何根據多個鍵從 object 數組中返回一個數組

Question

我有一個具有多個值的 object 數組，但我必須根據鍵將值過濾到數組中，並將值合並到具有相同值的數組中。 我嘗試了不同的步驟，可以在單個映射/過濾/減少中完成嗎？

const a = [
    {abc: ['add', 'edit'], cond: []},
    {cond: ['add_cond', 'edit_cond', 'view_cond'], matx: ['add_matx', 'edit_matx', 'delete_matx'], work: ['add_work', 'edit_work'], def: []},
    {cond: ['add_cond', 'edit_cond', 'view_cond', 'delete_cond'], matx: ['add_matx', 'edit_matx', 'view_matx', 'store_matx'], work: ['view_work', 'delete_work']},
];
const expected result = {
    cond: ['add_cond', 'edit_cond', 'view_cond', 'delete_cond'],  matx: ['add_matx', 'edit_matx', 'view_matx', 'store_matx', 'delete_matx'], work: ['add_work', 'edit_work','view_work', 'delete_work']
}

const b = a.map(el => el.cond);

const c = a.map(el => el.matx);

const d = a.map(el => el.work);

result = {cond: [...b], matx: [...c], work: [...d]}

Answer 1

您可以將所有想要的屬性值收集到一個集合中，並從鍵/值對構建一個新的 object。

 const data = [{ abc: ['add', 'edit'], cond: [] }, { cond: ['add_cond', 'edit_cond', 'view_cond'], matx: ['add_matx', 'edit_matx', 'delete_matx'], work: ['add_work', 'edit_work'], def: [] }, { cond: ['add_cond', 'edit_cond', 'view_cond', 'delete_cond'], matx: ['add_matx', 'edit_matx', 'view_matx', 'store_matx'], work: ['view_work', 'delete_work'] }], keys = ['cond', 'matx', 'work'], addToSet = (s, v) => s.add(v), result = Object.fromEntries(keys.map(k => [ k, [...data.reduce((r, o) => (o[k] || []).reduce(addToSet, r), new Set)] ])); console.log(result);

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

Answer 2

它不能用 forEach 完成... .map() .reduce( .reduce()和.filter()將始終返回一個數組而不是 object。

 const a = [ {abc: ['add', 'edit'], cond: []}, {cond: ['add_cond', 'edit_cond', 'view_cond'], matx: ['add_matx', 'edit_matx', 'delete_matx'], work: ['add_work', 'edit_work'], def: []}, {cond: ['add_cond', 'edit_cond', 'view_cond', 'delete_cond'], matx: ['add_matx', 'edit_matx', 'view_matx', 'store_matx'], work: ['view_work', 'delete_work']}, ]; const result = {cond: [], work: [], matx: []} a.forEach(x=> { x.cond && result.cond.push(...x.cond); x.work && result.work.push(...x.work); x.matx && result.work.push(...x.matx); } ); console.log(result);

Answer 3

const a = [
  { abc: ["add", "edit"], cond: [] },
  {
    cond: ["add_cond", "edit_cond", "view_cond"],
    matx: ["add_matx", "edit_matx", "delete_matx"],
    work: ["add_work", "edit_work"],
    def: [],
  },
  {
    cond: ["add_cond", "edit_cond", "view_cond", "delete_cond"],
    matx: ["add_matx", "edit_matx", "view_matx", "store_matx"],
    work: ["view_work", "delete_work"],
  },
];

function mapper(a) {
  let result = {};
  for (let i = 0; i < a.length - 1; i++) {
    result = Object.assign(a[i], a[i + 1]);
  }
  return result;
}

console.log(mapper(a));

結果--->

{
  cond: [ 'add_cond', 'edit_cond', 'view_cond', 'delete_cond' ],
  matx: [ 'add_matx', 'edit_matx', 'view_matx', 'store_matx' ],
  work: [ 'view_work', 'delete_work' ],
  def: []
}

Answer 4

您可以使用單個reduce方法來實現此目的。 所有鍵都是動態評估的，因此無論您向對象添加/刪除多少鍵，您都會獲得動態添加的鍵：

 const a = [ {abc: ['add', 'edit'], cond: []}, {cond: ['add_cond', 'edit_cond', 'view_cond'], matx: ['add_matx', 'edit_matx', 'delete_matx'], work: ['add_work', 'edit_work'], def: []}, {cond: ['add_cond', 'edit_cond', 'view_cond', 'delete_cond'], matx: ['add_matx', 'edit_matx', 'view_matx', 'store_matx'], work: ['view_work', 'delete_work']}, ]; const result = a.reduce((prev, cur) => { const keys = Object.keys(cur); keys.forEach(el => { if(prev[el] === undefined) prev[el] = [] prev[el].push(cur[el]) prev[el] = prev[el].flat() }) return prev }, {}) console.log(result)

Answer 5

因此，基於您只想要 arrays 您只會錯過.forEach進行迭代並且這里的大多數 forEach-anwers 都是錯誤的，您可以通過每個循環 go 並分解問題：

 const a = [ {abc: ['add', 'edit'], cond: []}, {cond: ['add_cond', 'edit_cond', 'view_cond'], matx: ['add_matx', 'edit_matx', 'delete_matx'], work: ['add_work', 'edit_work'], def: []}, {cond: ['add_cond', 'edit_cond', 'view_cond', 'delete_cond'], matx: ['add_matx', 'edit_matx', 'view_matx', 'store_matx'], work: ['view_work', 'delete_work']}, ]; const result = {cond: [], matx: [], work: []} a.forEach( current_dict => { Object.entries(current_dict).filter(current_entry => current_entry[0] in result).forEach( current_entry => { current_entry[1].filter(value =>.result[current_entry[0]].includes(value)).forEach( value => { result[current_entry[0]].push(value) } ) } ) } ) console.log(result)

請注意，未訂購 arrays。 如果您需要訂單，您應該使用字典而不是 arrays 或映射 function 類型，例如condOrderFunction(option){/*something*/return index} 。

Answer 6

我不確定為什么它與預期的結果不同，但試試這個：

 const a = [ {abc: ['add', 'edit'], cond: []}, {cond: ['add_cond', 'edit_cond', 'view_cond'], matx: ['add_matx', 'edit_matx', 'delete_matx'], work: ['add_work', 'edit_work'], def: []}, {cond: ['add_cond', 'edit_cond', 'view_cond', 'delete_cond'], matx: ['add_matx', 'edit_matx', 'view_matx', 'store_matx'], work: ['view_work', 'delete_work']}, ]; const expectedResult = { cond: ['add_cond', 'edit_cond', 'view_cond', 'delete_cond'], matx: ['add_matx', 'edit_matx', 'view_matx', 'store_matx', 'delete_matx'], work: ['add_work', 'edit_work','view_work', 'delete_work'] } const result = a.reduce( (prev, curr) => ({ cond: [...new Set([...prev.cond, ...curr.cond || []])], matx: [...new Set([...prev.matx, ...curr.matx || []])], work: [...new Set([...prev.work, ...curr.work || []])], }), { cond: [], matx: [], work: [] } ); console.log("Expected cond: ", expectedResult.cond); console.log("Actual cond: ", result.cond); console.log("Expected matx: ", expectedResult.matx); console.log("Actual matx: ", result.cond); console.log("Expected work: ", expectedResult.work); console.log("Actual work: ", result.cond);