简化 if else 语句答案

【问题标题】：Simplifying if else statements简化 if else 语句
【发布时间】：2018-01-03 09:48:34
【问题描述】：

您好，我有一个 json 数据如下：

{
    "details":
        {
            "data1": 
                {
                    "monthToDate":1000,                   
                    "firstLastMonth":"December",
                    "firstLastMonthAmount":5000,
                    "secondLastMonth":"November",
                    "secondLastMonthAmount":12000
                },
            "data2":
                {
                    "monthToDate":4000,                   
                    "firstLastMonth":"December",
                    "firstLastMonthAmount":10000,
                    "secondLastMonth":"November",
                    "secondLastMonthAmount":15000
                },
           "data3":
                {
                    "monthToDate":2000,                   
                    "firstLastMonth":"December",
                    "firstLastMonthAmount":8000,
                    "secondLastMonth":"November",
                    "secondLastMonthAmount":12000
                }
        }   
}

我在下面有打字稿 if 语句，

....
Object.values(data.details.data1).map(obj => {
                if (obj === 'January') {
                    xAxisTranslatedArray.push(this.JAN);
                } else if (obj === 'February') {
                    xAxisTranslatedArray.push(this.FEB);
                } else if (obj === 'March') {
                    xAxisTranslatedArray.push(this.MAR);
                } else if (obj === 'April') {
                    xAxisTranslatedArray.push(this.APR);
                } else if (obj === 'May') {
                    xAxisTranslatedArray.push(this.MAY);
                } else if (obj === 'June') {
                    xAxisTranslatedArray.push(this.JUN);
                } else if (obj === 'July') {
                    xAxisTranslatedArray.push(this.JUL);
                } else if (obj === 'August') {
                    xAxisTranslatedArray.push(this.AUG);
                } else if (obj === 'September') {
                    xAxisTranslatedArray.push(this.SEP);
                } else if (obj === 'October') {
                    xAxisTranslatedArray.push(this.OCT);
                } else if (obj === 'November') {
                    xAxisTranslatedArray.push(this.NOV);
                } else if (obj === 'December') {
                    xAxisTranslatedArray.push(this.DEC);
                }
            });

我正在使用 lodash、highcharts 和 i18n 翻译。所以我的每个this.MONTH 都是 i18n 键。我无法直接传递这些值，因为无法翻译它们。所以我需要将每个值推送到一个数组并传递到 highchart 的 X 轴。我的问题基本上是当我看到 if else 语句时，它看起来太长而且有点重复。这里有什么捷径吗？在此先感谢各位。

【问题讨论】：

obj 的值可能与一个月不同吗？
删除if-else并使用switch-case
我不明白。这似乎是switch-case 的完美案例。唯一的答案，说明这一点，被否决和删除？为什么？！
@wλnnλhug：我想说 switch-case 过于冗长，因为它仍然需要多次调用 xAxisTranslatedArray.push。
@Cerbrus 虽然我同意你关于冗长部分的看法，但你可以将代码减少到一次推送调用，使用变量来存储switch-case 定义的值。

标签： javascript typescript if-statement highcharts lodash

【解决方案1】：

使用单独的地图对象：

const months = {
    January: this.JAN,
    February: this.FEB,
    March: this.MAR,
    // etc,
}

Object.values(data.details.data1).forEach(obj => {
    if (months[obj]) {
        xAxisTranslatedArray.push(months[obj]);
    }
});

或者，您可以将if 替换为filter：

Object.values(data.details.data1)
    .filter(obj => months[obj])
    .forEach(obj => xAxisTranslatedArray.push(months[obj]));

另外，请注意我使用的是forEach 而不是map。 map 用于修改数组，但您只是在迭代数组。 forEach 在语义上是正确的选择。

【讨论】：

我希望先filter，然后再map。
@HenrikR：为什么是map？也就是说，使用filter / forEach 选项更新了答案。
因为您现在可以使用 map 并返回所需的数组 :) 将最后一行更改为 .map(obj => months[obj]); 并获取返回值
@HenrikR：是的，但是你必须连接或覆盖xAxisTranslatedArray。取决于xAxisTranslatedArray 是否已经包含数据。

【解决方案2】：

您可以使用地图定义，如下所示：

let mapping = {};
mapping['January'] = this.JAN;
... // rest of definitions.


Object.values(data.details.data1).forEach(obj => {
              if(mapping[obj]){
                  xAxisTranslatedArray.push(mapping[obj]);
              });

【讨论】：

【解决方案3】：

似乎obj的前三个字符转换为大写是你想要的键，试试

var monthArray = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
Object.values( data.details.data1 ).forEach(obj => {
   if ( monthArray.indexOf( obj ) != -1 )
   {
      xAxisTranslatedArray.push(this[ obj.substring(0,3).toUpperCase() ]);
   }
});

【讨论】：

@Cerbrus 你能详细说明一下吗？您是否觉得在某些浏览器或环境中它会给出意想不到的值？
考虑到我们正在迭代一组从未知 json 数据解析的值，你甚至不能假设 obj 是一个字符串。对于示例数据，我们映射到 [1000, "December", 5000, "November", 12000]。数字没有subString 方法。
@Cerbrus 知道了，我现在使用月份数组。基本上我注意到 OP 正在迭代 data1 的所有值，而不仅仅是 data1 的特定键。
@Cerbrus 怎么样？
只是我的看法，但this.JAN 和"January" 之间仍然没有明确的联系。它仍然依赖于一些字符串操作，而你实际上只是得到一组静态字符串......

【解决方案4】：

您必须使用bracket 表示法。

另外，使用substring 或slice 方法来获取第一个three 字符。

另外，别忘了检查obj 是否为string。

var months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
if(typeof obj === 'string' && months.includes(obj))
    xAxisTranslatedArray.push(this[obj.substring(0,3).toUpperCase()]);

【讨论】：

收到错误Error TypeError: t.substring is not a function
@chewi，这是obj.substring，而不是t.substring
考虑到我们正在迭代一组从未知 json 数据解析的值，你甚至不能假设 obj 是一个字符串。对于示例数据，我们映射到 [1000, "December", 5000, "November", 12000]。数字没有subString 方法。
再次阅读问题。我们正在迭代的 Object.values(data.details.data1) 是什么？
@Cerbrus 它仍然依赖于一些字符串操作，而你实际上只是得到一组静态字符串 那么？这些不是任何随机字符串，它们是从数组中提取的。