简化过滤器js答案

【问题标题】：Simplify filter js简化过滤器js
【发布时间】：2017-12-11 11:22:33
【问题描述】：

我尝试用一种方法简化代码，在这种情况下如何避免重复代码。没有两种方法，如何实现和循环合二为一。

const residentsConfigurations = configurations.filter(({alarmType}) => alarmType === alarmTypes.Care || alarmType === alarmTypes.Wandering)

        const staffConfigurations = configurations.filter(({alarmType}) => alarmType === alarmTypes.Assistance || alarmType === alarmTypes.Panic)

 {currentTab === 0 &&
                            residentsConfigurations.map((configuration, index) =>
                                <Grid key={index} item xs={12} lg={6}>
                                    <Item
                                        key={configuration.alarmType}
                                        configuration={configuration}
                                        changeBehavior={this.changeBehavior}
                                        changeConfiguration={this.changeConfiguration}
                                    />
                                </Grid>
                            )}
                            {currentTab === 1 &&
                                staffConfigurations.map((configuration, index) =>
                                    <Grid key={index} item xs={12} lg={6}>
                                        <Item
                                            key={configuration.alarmType}
                                            configuration={configuration}
                                            changeBehavior={this.changeBehavior}
                                            changeConfiguration={this.changeConfiguration}
                                        />
                                    </Grid>
                                )}

【问题讨论】：

不清楚你想要什么，请说明你想要实现什么以及你想要消除哪个循环

标签： javascript arrays reactjs filter ecmascript-6

【解决方案1】：

重构：

const newConfig = configurations.filter(({ alarmType }) => 
  currentTab === 1
    ? alarmType === alarmTypes.Assistance || alarmType === alarmTypes.Panic
    : alarmType === alarmTypes.Care || alarmType === alarmTypes.Wandering;
);

{
  newConfig.map((configuration, index) => (
      <Grid key={index} item xs={12} lg={6}>
        <Item
          key={configuration.alarmType}
          configuration={configuration}
          changeBehavior={this.changeBehavior}
          changeConfiguration={this.changeConfiguration}
        />
      </Grid>
    ));
}

【讨论】：

【解决方案2】：

getConfigGrid(configurations) {
  return (
    configurations.map((configuration, index) => (
      <Grid key={index} item xs={12} lg={6}>
          <Item
              key={configuration.alarmType}
              configuration={configuration}
              changeBehavior={this.changeBehavior}
              changeConfiguration={this.changeConfiguration}
          />
      </Grid>
    )
  );
}

const residentsConfigurations = configurations.filter(({alarmType}) => alarmType === alarmTypes.Care || alarmType === alarmTypes.Wandering)
const staffConfigurations = configurations.filter(({alarmType}) => alarmType === alarmTypes.Assistance || alarmType === alarmTypes.Panic)

 {currentTab === 0 && this.getConfigGrid(residentsConfigurations)}
 {currentTab === 1 && this.getConfigGrid(staffConfigurations)}

【讨论】：

【解决方案3】：

我发现了更灵活的变体，如果需要，我们可以添加更多选项卡或配置。

const tabsConfigurations = {
    '0': [alarmTypes.Care, alarmTypes.Wandering],
    '1': [alarmTypes.Assistance, alarmTypes.Panic],
}

 let types = tabsConfigurations[currentTab]

{configurations.filter(({alarmType}) => types.includes(alarmType)).map((configuration, index) =>
                                <Grid key={index} item xs={12} lg={6}>
                                    <Item
                                        key={configuration.alarmType}
                                        configuration={configuration}
                                        changeBehavior={this.changeBehavior}
                                        changeConfiguration={this.changeConfiguration}
                                    />
                                </Grid>
                            )}

【讨论】：