An ES6 solution using Map object:

function groupBy(arr, key) { return arr.reduce( (sum, item) => { const groupByVal = item[key]; groupedItems = sum.get(groupByVal) || []; groupedItems.push(item); return sum.set(groupByVal, groupedItems); }, new Map() ); } var Data = [ { Id: 1, Name: 'Red', optionName: 'Color' }, { Id: 2, Name: 'Yellow', optionName: 'Color' }, { Id: 3, Name: 'Blue', optionName: 'Color' }, { Id: 4, Name: 'Green', optionName: 'Color' }, { Id: 7, Name: 'Black', optionName: 'Color' }, { Id: 8, Name: 'S', optionName: 'Size' }, { Id: 11, Name: 'M', optionName: 'Size' }, { Id: 12, Name: 'L', optionName: 'Size' }, { Id: 13, Name: 'XL', optionName: 'Size' }, { Id: 14, Name: 'XXL', optionName: 'Size' } ]; document.getElementById("showArray").innerHTML =JSON.stringify([...groupBy(Data, 'optionName')], null, 4);

這是我為這種情況編寫的程式碼片段。您可以將此功能新增至所有陣列：

Object.defineProperty(Array.prototype, 'group', { enumerable: false, value: function (key) { var map = {}; this.forEach(function (e) { var k = key(e); map[k] = map[k] || []; map[k].push(e); }); return Object.keys(map).map(function (k) { return {key: k, data: map[k]}; }); } });

您可以像這樣使用它。您只需傳遞一個定義如何分組資料的函數。

var newArray = arr.group(function (item) { return item.optionName; });

Working Fiddle

如果需要，您可以將{key: k, data: map[k]}替換為{Name: k, Data: map[k]}。

這也是上面程式碼的更緊湊的ES6版本：

Object.defineProperty(Array.prototype, 'group', { enumerable: false, value: function (key) { let map = {}; this.map(e => ({k: key(e), d: e})).forEach(e => { map[e.k] = map[e.k] || []; map[e.k].push(e.d); }); return Object.keys(map).map(k => ({key: k, data: map[k]})); } });

像這樣使用它：

let newArray = arr.group(item => item.optionName))