javascript - 寻找按子数组中的值对数组进行分组

标签 javascript ecmascript-6 vuejs2

尝试解析一个具有一堆相同“secondaryID”的数据集,以便我可以对它们进行分组和迭代。

用英语我想做的是 “选择所有项目的唯一组,其中字段值是唯一的”

'use strict';

const data = [{
    Group: 'A',
    Name: 'SD'
}, {
    Group: 'B',
    Name: 'FI'
}, {
    Group: 'A',
    Name: 'MM'
}, {
    Group: 'B',
    Name: 'CO'
}];

let unique = [...new Set(data.map(item => item.Group))];
console.log(unique);

这给出了[“A”],[“B”]

但我正在寻找的是

{
  A: [ "SD","MM" ],
  B: [ "FI","CO" ],
}

最佳答案

为此,我将使用 array.reduce 而不是 array.map 因为您实际上希望返回的是一个new value,而不是修改后的数组,当您想要将数组字面上减少为单个输出值(在您的情况下是唯一组的对象)时,reduce 方法是完美的。也许尝试这样的事情:

let unique = data.reduce((acc, { Group, Name }) => {
  if (!(acc.hasOwnProperty(Group))) {
    acc[Group] = [Name];
  } else {
    acc[Group].push(Name);
  }; 
  return acc;
}, {});

我还为此添加了一支笔:https://codepen.io/anon/pen/BGpgdz?editors=1011这样你就可以看到它的工作原理。

希望这有帮助!

关于javascript - 寻找按子数组中的值对数组进行分组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53290477/

相关文章:

javascript - 动态创建的元素不会触发触发器

javascript - 评论框发帖后不隐藏

javascript - 如何为网站添加唯一访问计数器?

javascript - 在 React.js 中使用 App.js 和 ReactDOM.render 的区别

angular - 如何从 Visual Studio 2015 中的非相对路径导入模块

vuejs2 - 我将 v- 用于 router-link 但它不起作用

javascript - Vue - 如何将父引用作为 Prop 传递给子?

javascript - jQuery/Javascript - "is not a function error"但函数已定义

javascript - 是否可以在 LocalStorage 中使用 ES6 符号

javascript - Vue js 模板渲染问题