如何更新数组中超集的 ES6 语法答案

【问题标题】：How to update ES6 Syntax for superset in array如何更新数组中超集的 ES6 语法
【发布时间】：2017-03-05 09:16:01
【问题描述】：

我有这段 ES6 React 代码，它将 MiniIcon 数组填充到页面上。

const MiniIcons = ({miniicons}) => ( <div id="application"> {
      miniicons.map(miniicon => ( <MiniIcon key={minicon.id} id={miniicon.id} title={miniicon.name} handleOpenButton={this.handleMiniiconOpen.bind(this)} /> )
    )} </div> );

填充“迷你图标”的 JSON：

[
  {"id":"1", "name":"chicken", "application":"1"},
  {"id":"3", "name":"nuggets", "application":"1"},
  {"id":"8", "name":"fries", "application":"2"}
]

这样的列表：

<div id="application">
  <div class="minicion"></div>
  <div class="minicion"></div>
  <div class="minicion"></div>
</div>

但是，其中一些 MiniIcon 是超集应用程序的一部分。我对这个 ES6 语法很陌生，所以我该如何修改它，以便可以为每个应用程序不同的元素创建一个周围的 div，所以对于上面的例子：

<div id="application1">
  <div class="minicion"></div>
</div>
<div id="application2">
  <div class="minicion"></div>
  <div class="minicion"></div>
</div>

【问题讨论】：

您需要按应用程序字段对数组进行分组，然后映射键以创建您的 <div id="applicationN"> 项目，并在每个值上嵌套映射（这是一个小图标数组）来创建您的<div class="miniicon">。您可以使用 reduce 进行分组，但是像 lodash 这样的库会更方便。
是的，这里：miniicons.reduce((groups, curr) => ({...groups, [curr.application]: [...(groups[curr.application] || []), curr]}), {})。
这与 ES6 或（React-specific？）语法无关，你只需要一个分组算法。

标签： javascript json reactjs ecmascript-6

【解决方案1】：

使用lodash 对数组进行分组，然后渲染它们。

render() {
  const groupedIcons = _.groupBy(miniicons, 'application')
  return Object.keys(groupedIcons).map((applicationId) => {
    return (
      <div id={applicationId}>
        {groupedIcons[applicationId].map(miniicon => (
          <MiniIcon
            key={minicon.id}
            id={miniicon.id}
            title={miniicon.name}
            handleOpenButton={this.handleMiniiconOpen.bind(this)}
          />
        )}
      </div>
    )
  })
}

【讨论】：

看起来不错，尽管我仍然可以将 Object.keys...etc 映射到“const MiniIcons =”并在反应渲染方法中使用“”进行引用吗？
是的，你可以。我改变了答案。
如果我设置 const Miniviews = ({reducedArry}) => { return Object.keys...etc 用你放的东西，然后是 console.log(Miniviews)，它实际上返回的函数为一个类型函数，而不是函数的结果？
首先这与问题有关吗？同样当你做const Miniviews = () => { .... }。它将 Miniviews 描述为功能。要获得输出，您需要调用函数const miniViewsArray = Miniviews()。

【解决方案2】：

这可能是一个开始（vanilla ES6 no libs）。

如果我理解问题所在，您可以创建一个对象，其中包含按应用程序属性值分组的“应用程序”数组。

{ 
  "1" : [ { application : 1, ... }, { application : 1, ... } ], 
  "2" : [ { application : 2, ...  } ] 
} ;

一旦你得到它，你可以看到你需要做的就是迭代那个对象。

类似：

for ( let arr in top_level_obj ) {
   ...create div
   arr.forEach ( obj => { 
      ...add obj to div you just created
   }); 
}

（或者不管你的框架是怎么做的）

下面是创建数组对象的代码：

let arr = [
  {"id":"1", "name":"chicken", "application":"1"},
  {"id":"3", "name":"nuggets", "application":"1"},
  {"id":"8", "name":"fries", "application":"2"}
];

let apps = {};
arr.forEach ( x => {
    if ( ! ( x.application in apps ) ) {
        apps [ x.application ] = [];
    }

    apps [ x.application ].push ( x );
} );

console.log ( apps );

从那里应该很容易得到你想要的东西。

应用程序 vals 可以是任何东西，数字或其他任何东西，它们不需要按任何顺序等。

请注意，您可能想要复制您正在渲染的项目（否则它们将引用原始数组中的对象，这可能取决于您正在做什么），您可以这样做：

apps [ x.application ].push ( Object.assign ( {}, x ) );

【讨论】：