将标题重写为:对主数组进行分组,并在每个分组中添加字段和子数组
P粉190443691
P粉190443691 2023-08-24 21:18:20
0
2
440
<p>我有一个像这样的重型数组:</p> <pre class="brush:php;toolbar:false;">[ {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'} ]</pre> <p>我需要按照<code>optionName</code>进行分组,并在主数组中有两行,像这样:</p> <pre class="brush:php;toolbar:false;">[ { Name: 'Color', Data:[{Id: 1, Name: 'Red'}, {Id: 2, Name: 'Yellow'}, {Id: 3, Name: 'Blue'}, {Id: 4, Name: 'Green'}, {Id: 7, Name: 'Black'}] }, { Name: 'Size', Data:[{Id: 8, Name: 'S'}, {Id: 11, Name: 'M'}, {Id: 12, Name: 'L'}, {Id: 13, Name: 'XL'}, {Id: 14, Name: 'XXL'}] } ]</pre> <p>如何在javascript中实现?</p>
P粉190443691
P粉190443691

全部回复(2)
P粉409742142

使用Map对象的ES6解决方案:

雷雷 雷雷
P粉298305266

这是我为这种情况编写的代码片段。您可以将此功能添加到所有数组中:

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))
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板