1. 首頁
  2. 問答
  3. 如何在javascript中對這個對象數組進行分組或合併？

如何在javascript中對這個對象數組進行分組或合併？

2017-10-10 107 views
13

我有一個例如下面的對象數組。如何在javascript中對這個對象數組進行分組或合併？

{name: "Mc Donald", quantity: 4, maleCount: 1, femaleCount: 0} 
{name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0} 
{name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0} 
{name: "Mc Donald", quantity: 4, maleCount: 0, femaleCount: 1} 
{name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1} 
{name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0} 
{name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1} 
{name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1}

我想將它們組合起來並將其中的所有值加起來。例如，最後會是這樣的：

{name: "Mc Donald", quantity: 8, maleCount: 1, femaleCount: 1} 
{name: "KFC", quantity: 54, maleCount: 3, femaleCount: 3}

我該如何在JavaScript中實現這一目標？

我試圖找到一些在線解決方案，但它不是我想要的。例如，這solution

來源

2017-10-10 mc the newbie

回答

12

您可以使用數組減少：

var arr = [ 
 
    {name: "Mc Donald", quantity: 4, maleCount: 1, femaleCount: 0}, 
 
    {name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0}, 
 
    {name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0}, 
 
    {name: "Mc Donald", quantity: 4, maleCount: 0, femaleCount: 1}, 
 
    {name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1}, 
 
    {name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0}, 
 
    {name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1}, 
 
    {name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1} 
 
]; 
 

 
var finalArr = arr.reduce((m, o) => { 
 
    var found = m.find(p => p.name === o.name); 
 
    if (found) { 
 
     found.quantity += o.quantity; 
 
     found.maleCount += o.maleCount; 
 
     found.femaleCount += o.femaleCount; 
 
    } else { 
 
     m.push(o); 
 
    } 
 
    return m; 
 
}, []); 
 

 
console.log(finalArr);

來源

2017-10-10 10:21:23 Faly

+0

只是注意到這個解決方案會修改一些原始對象。 – Prestaul

8

您可以使用forEach()循環，並加入到新陣列。您可以將thisArg參數作爲this傳遞給您的回調函數，並且第二個forEach上下文中的this仍然會與第一個回調函數中的箭頭函數相同。

var data = [{"name":"Mc Donald","quantity":4,"maleCount":1,"femaleCount":0},{"name":"KFC","quantity":9,"maleCount":1,"femaleCount":0},{"name":"KFC","quantity":9,"maleCount":1,"femaleCount":0},{"name":"Mc Donald","quantity":4,"maleCount":0,"femaleCount":1},{"name":"KFC","quantity":9,"maleCount":0,"femaleCount":1},{"name":"KFC","quantity":9,"maleCount":1,"femaleCount":0},{"name":"KFC","quantity":9,"maleCount":0,"femaleCount":1},{"name":"KFC","quantity":9,"maleCount":0,"femaleCount":1}] 
 
var result = [], keys = ['quantity', 'maleCount', 'femaleCount'] 
 

 
data.forEach(function(e) { 
 
    if(!this[e.name]) result.push(this[e.name] = e); 
 
    else keys.forEach(k => this[e.name][k] += e[k]) 
 
}, {}) 
 

 
console.log(result)

來源

2017-10-10 10:22:35

+1

這樣使用'this''需要更多解釋。 – Bergi

7

你可以利用哈希表組，並使用具有可變值的按鍵陣列。

var array = [{ name: "Mc Donald", quantity: 4, maleCount: 1, femaleCount: 0 }, { name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0 }, { name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0 }, { name: "Mc Donald", quantity: 4, maleCount: 0, femaleCount: 1 }, { name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1 }, { name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0 }, { name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1 }, { name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1 }], 
 
    groups = Object.create(null), 
 
    result = array.reduce(function (r, o) { 
 
     var values = ['quantity', 'maleCount', 'femaleCount']; 
 
     if (!groups[o.name]) { 
 
      groups[o.name] = { name: o.name }; 
 
      r.push(groups[o.name]); 
 
      values.forEach(function (k) { groups[o.name][k] = 0; }); 
 
     } 
 
     values.forEach(function (k) { groups[o.name][k] += o[k]; }); 
 
     return r; 
 
    }, []); 
 

 
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

隨着linq.js

var array = [{ name: "Mc Donald", quantity: 4, maleCount: 1, femaleCount: 0 }, { name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0 }, { name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0 }, { name: "Mc Donald", quantity: 4, maleCount: 0, femaleCount: 1 }, { name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1 }, { name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0 }, { name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1 }, { name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1 }], 
 
    result = Enumerable.From(array) 
 
     .GroupBy(
 
      "$.name", 
 
      null, 
 
      "{ name: $.Key, quantity: $$.Sum('$.quantity'), maleCount: $$.Sum('$.maleCount'), femaleCount: $$.Sum('$.femaleCount') }" 
 
     ) 
 
     .ToArray(); 
 

 
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/linq.js/2.2.0.2/linq.js"></script>

來源

2017-10-10 10:22:43

+1

是否有理由做'groups = Object.create（null）'而不是簡單的'groups = {}'？ –

+2

如果你有'toString'這樣的名字，你可能會得到錯誤的原型結果。 –

+1

謝謝，從來沒有想到這一點。 –

1

更多官能/通用的方法 

const normalizeValue = (value) => value === undefined ? 0 : value 
 
const sumUpProps = (props = []) => (a = {}, b = {}) => { 
 
    const result = {} 
 
    
 
    props.forEach((prop) => { 
 
    result[prop] = normalizeValue(a[prop]) + normalizeValue(b[prop]) 
 
    }) 
 

 
    return result 
 
} 
 

 
const data = [ 
 
    {name: "Mc Donald", quantity: 4, maleCount: 1, femaleCount: 0}, 
 
    {name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0}, 
 
    {name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0}, 
 
    {name: "Mc Donald", quantity: 4, maleCount: 0, femaleCount: 1}, 
 
    {name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1}, 
 
    {name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0}, 
 
    {name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1}, 
 
    {name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1} 
 
] 
 

 
const entries = {} 
 
const sumObjects = sumUpProps(['quantity', 'maleCount', 'femaleCount']) 
 

 
data.forEach((item) => { 
 
    const entry = entries[item.name] || {} 
 

 
    entries[item.name] = sumObjects(entry, item) 
 
}) 
 

 

 
console.log(entries)

來源

2017-10-10 10:28:39 grzesiekgs

1

檢查下面這段代碼：

var array = [ 
    {name: "Mc Donald", quantity: 4, maleCount: 1, femaleCount: 0}, 
    {name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0}, 
    {name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0}, 
    {name: "Mc Donald", quantity: 4, maleCount: 0, femaleCount: 1}, 
    {name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1}, 
    {name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0}, 
    {name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1}, 
    {name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1}, 
]; 

var result = []; 

for(var index in array){ 
    var obj = array[index]; 
    if(result.hasOwnProperty(obj.name)) { 
     result[obj.name].quantity += obj.quantity; 
     result[obj.name].maleCount += obj.maleCount; 
     result[obj.name].femaleCount += obj.femaleCount; 
    }else{ 
     result[obj.name] = {}; 
     result[obj.name].quantity = obj.quantity; 
     result[obj.name].maleCount = obj.maleCount; 
     result[obj.name].femaleCount = obj.femaleCount; 
    } 
} 

console.log(result);

來源

2017-10-10 10:33:38

1

下面是用乾淨的和現代的JavaScript的一個通用的解決方案：

function groupRestaurants(restaurants) { 
 
    const groups = new Map(); 
 
    restaurants.forEach(restaurant => { 
 
     const group = findOrCreateGroup(groups, restaurant.name); 
 
     addRestaurantToGroup(group, restaurant); 
 
    }); 
 
    return [...groups.values()]; 
 
} 
 

 
function findOrCreateGroup(groups, name) { 
 
    let group = groups.get(name); 
 
    if (!group) { 
 
     group = { name }; 
 
     groups.set(name, group); 
 
    } 
 
    return group; 
 
} 
 

 
function addRestaurantToGroup(group, restaurant) { 
 
    for (const [key, value] of Object.entries(restaurant)) { 
 
     if (key !== 'name') { 
 
      if (group.hasOwnProperty(key)) { 
 
       group[key] += value; 
 
      } else { 
 
       group[key] = value; 
 
      } 
 
     } 
 
    } 
 
} 
 

 
const restaurants = [ 
 
    { name: "Mc Donald", quantity: 4, maleCount: 1, femaleCount: 0 }, 
 
    { name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0 }, 
 
    { name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0 }, 
 
    { name: "Mc Donald", quantity: 4, maleCount: 0, femaleCount: 1 }, 
 
    { name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1 }, 
 
    { name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0 }, 
 
    { name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1 }, 
 
    { name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1 } 
 
]; 
 

 
console.log(groupRestaurants(restaurants));

來源

2017-10-10 12:09:24 ValarDohaeris

2

我的解決方案基礎上減少：

let data = [ 
 
    {name: "Mc Donald", quantity: 4, maleCount: 1, femaleCount: 0}, 
 
    {name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0}, 
 
    {name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0}, 
 
    {name: "Mc Donald", quantity: 4, maleCount: 0, femaleCount: 1}, 
 
    {name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1}, 
 
    {name: "KFC", quantity: 9, maleCount: 1, femaleCount: 0}, 
 
    {name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1}, 
 
    {name: "KFC", quantity: 9, maleCount: 0, femaleCount: 1} 
 
]; 
 

 
// We will only keep an array of values of the merged object 
 
let result = Object.values(
 
    // Merge data to name indexed objects 
 
    data.reduce((p,c) => { 
 
    // Ensure key (name) exists 
 
    if (!p[c.name]) { 
 
     // If first occurence, duplicate object (to avoid modification of original array) 
 
     p[c.name] = Object.assign({}, c); 
 
    } else { 
 
     // If key (name) already exists, sum up relevant attributes 
 
     p[c.name].quantity += c.quantity; 
 
     p[c.name].maleCount += c.maleCount; 
 
     p[c.name].femaleCount += c.femaleCount; 
 
    } 
 
    // return updated object 
 
    return p; 
 
    }, {}) 
 
); 
 

 
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

希望這將有助於

來源

2017-10-10 12:29:48 Apolo

1

Lodash讓你的生活更輕鬆。

_.map(_.groupBy(yourArrayHere, 'name'), (groupMembers, groupKey) => { 
    let sumObject = {name: groupKey}; 

    _.forEach(['quantity', 'maleCount', 'femaleCount'], (property) => { 
     sumObject[property] = 0; 
     _.forEach(groupMembers, (member) => { 
      sumObject[property] += member[property]; 
     }); 
    }); 

    return sumObject; 
});

來源

2017-10-10 15:46:12 dun

相關問題

 相關問題