按嵌套陣列鍵對陣列進行分組，并在結果中重復項-有解無憂

找到正確的單詞有點棘手，因此希望顯示一些代碼會有所幫助。

我有以下（簡化的）人員及其部門。這來自允許將一個人添加到多個部門的 CMS 資料（因此為什么departments是陣列）。

[
  {
    id: '12345',
    name: 'Person 1',
    jobTitle: 'Engineering director',
    departments: ['Engineering', 'Leadership']
  },
  {
    id: '54321',
    name: 'Person 2',
    jobTitle: 'Junior engineer',
    departments: ['Engineering']
  },
  {
    id: '00001',
    name: 'Person 3',
    jobTitle: 'Founder',
    departments: ['Leadership']
  },
  {
    id: '00099',
    name: 'Person 4',
    jobTitle: 'No department',
    departments: []
  }
]

我追求的結果是獲取每個的唯一值departments并為每個陣列創建陣列，其中包含適當的用戶，例如：

{
  'Engineering': [
    {
      id: '12345',
      name: 'Person 1',
      jobTitle: 'Engineering director',
      departments: ['Engineering', 'Leadership']
    },
    {
      id: '54321',
      name: 'Person 2',
      jobTitle: 'Junior engineer',
      departments: ['Engineering']
    }
  ],
  'Leadership': [
    {
      id: '12345',
      name: 'Person 1',
      jobTitle: 'Engineering director',
      departments: ['Engineering', 'Leadership']
    },
    {
      id: '00001',
      name: 'Person 3',
      jobTitle: 'Founder',
      departments: ['Leadership']
    }
  ]
}

我的代碼中已經有了一個groupBy函式，但它并沒有完全滿足我的要求（因為它不期望一個陣列作為屬性值），所以如果 aperson有多個部門，我會得到一個具有串聯名稱的陣列兩個部門，但我希望相同person的內容出現在多個陣列中。

這是我目前groupBy的功能，但它現在分散了我的注意力，并且reduce是我的大腦真正掙扎的一個概念......！

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

// which I can use like: 

const groupedPeople = Object.entries(groupBy(people, "departments"));

// and it'll return
/*

{
  'Engineering,Leadership': [
    {
      id: '12345',
      name: 'Person 1',
      jobTitle: 'Engineering director',
      departments: ['Engineering', 'Leadership']
    }
  ],
  'Engineering': [
    {
      id: '54321',
      name: 'Person 2',
      jobTitle: 'Junior engineer',
      departments: ['Engineering']
    }
  ],
  'Leadership': [
    {
      id: '00001',
      name: 'Person 3',
      jobTitle: 'Founder',
      departments: ['Leadership']
    }
  ]
}

*/

我覺得我很接近，但無法讓我的大腦參與！

顯示代碼片段

const people = [{
    id: '12345',
    name: 'Person 1',
    jobTitle: 'Engineering director',
    departments: ['Engineering', 'Leadership']
  },
  {
    id: '54321',
    name: 'Person 2',
    jobTitle: 'Junior engineer',
    departments: ['Engineering']
  },
  {
    id: '00001',
    name: 'Person 3',
    jobTitle: 'Founder',
    departments: ['Leadership']
  },
  {
    id: '00099',
    name: 'Person 4',
    jobTitle: 'No department',
    departments: []
  }
]

function groupBy(objectArray, property) {
  return objectArray.reduce(function(acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

// which I can use like: 

const groupedPeople = Object.entries(groupBy(people, "departments"));
console.log("Grouped:", groupedPeople);

uj5u.com熱心網友回復：

var key = obj[property];

在代碼的這一行中，key變數表示的陣列deparments，然后您將其用作acc[key]。JS 的作用是將陣列轉換為字串以用作acc物件的鍵，其程序就是用逗號連接陣列。您需要的是回圈遍歷陣列：

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var keys = obj[property];
    keys.forEach(key => {
      if (!acc[key]) {
        acc[key] = [];
      }
      acc[key].push(obj);
    })
    return acc;
  }, {});
}

此類更改將使其適用于您的用例，groupBy如果鍵不是陣列，則該函式將不再起作用，因此請謹慎使用或使其同時支持字串和陣列。

uj5u.com熱心網友回復：

我在我的解決方案中遇到遞回錯誤，必須先制作一個物件 ( JSON.parse(JSON.stringify(obj))) 的深層副本，然后再將其推送到 2 個不同的陣列中。此外，考慮到您的屬性可能是陣列，也可能不是陣列，我將這部分歸一化為：

let keys = Array.isArray(obj[property]) ? obj[property] : [obj[property]];

let people = [{
    id: '12345',
    name: 'Person 1',
    jobTitle: 'Engineering director',
    departments: ['Engineering', 'Leadership']
  },
  {
    id: '54321',
    name: 'Person 2',
    jobTitle: 'Junior engineer',
    departments: ['Engineering']
  },
  {
    id: '00001',
    name: 'Person 3',
    jobTitle: 'Founder',
    departments: ['Leadership']
  },
  {
    id: '00099',
    name: 'Person 4',
    jobTitle: 'No department',
    departments: []
  }
];

function groupBy(objectArray, property) {
  return objectArray.reduce((acc, obj) => {
    let keys = Array.isArray(obj[property]) ? obj[property] : [obj[property]];
    keys.forEach(k => {
      acc[k] = acc[k] || [];
      acc[k].push(JSON.parse(JSON.stringify(obj)))
    })
    return acc;
  }, {});
}

console.log(groupBy(people, "departments"));
console.log(groupBy(people, "jobTitle"));

uj5u.com熱心網友回復：

我只更改了您的代碼片段的 3 行，首先將所有內容轉換為一個陣列，然后遍歷該陣列并創建組使代碼更容易。您還可以檢查它是否是一個陣列并使用if陳述句撰寫類似的代碼。

const people = [{
    id: '12345',
    name: 'Person 1',
    jobTitle: 'Engineering director',
    departments: ['Engineering', 'Leadership']
  },
  {
    id: '54321',
    name: 'Person 2',
    jobTitle: 'Junior engineer',
    departments: ['Engineering']
  },
  {
    id: '00001',
    name: 'Person 3',
    jobTitle: 'Founder',
    departments: ['Leadership']
  },
  {
    id: '00099',
    name: 'Person 4',
    jobTitle: 'No department',
    departments: []
  }
]

function groupBy(objectArray, property) {
  return objectArray.reduce(function(acc, obj) {
    if (obj[property] === null || obj[property] === undefined) return acc; // if obj[property] is not defined or it's null don't add it to groupts
    if (obj[property].constructor !== Array) obj[property] = [obj[property]] // obj[property] is always an array now
    obj[property].forEach(key => {
      if (!acc[key]) {
        acc[key] = [];
      }
      acc[key].push(obj);
    })
    return acc;
  }, {});
}

// which I can use like: 

const groupedPeople = Object.entries(groupBy(people, "departments"));
console.log("Grouped:", groupedPeople);

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/460802.html

標籤：javascript 数组分组

上一篇：未捕獲的TypeError：向模態添加功能時無法讀取null的屬性（讀取“addEventListener”）

下一篇：如何使用相同的JS代碼（帶有一些css的復選框的文本）自動創建數百個相同的元素