将多个 if 语句转换为三元 (JavaScript)答案

【问题标题】：Converting multiple if statements to ternary (JavaScript)将多个 if 语句转换为三元 (JavaScript)
【发布时间】：2021-01-12 22:07:12
【问题描述】：

鉴于这组语句：

let chosenMachine;
if (bubbleDetailsObject.names.includes(machineName)) chosenMachine = bubbleDetailsObject
if (primoDetailsObject.names.includes(machineName)) chosenMachine = primoDetailsObject
if (familyDetailsObject.names.includes(machineName)) chosenMachine = familyDetailsObject

如何将它们转换为单行三元语句？

【问题讨论】：

标签： javascript conditional-operator

【解决方案1】：

如果可能的话，我会更改变量的结构，以便将这些 objects 包含在 另一个 对象或数组中，可能类似于：

const detailsObjects = {
  bubble: {
    // ...
  },
  primo: {
    // ...

这不仅会使您的代码更有条理，而且还可以让您通过迭代值更简洁地识别匹配对象，而不必处理多个类似的独立变量：

const chosenMachine = Object.values(detailsObjects)
  .find(obj => obj.names.includes(machineName));

【讨论】：

【解决方案2】：

没有三元语句（嵌套时可能更难阅读）：

const chosenMachine = [familyDetailsObject, primoDetailsObject, bubbleDetailsObject]
                      .find(o => o.names.includes(machineName));

【讨论】：

【解决方案3】：

三元组应该返回单个值，在您的代码中，当 machineName 存在于三个对象中时，3 个 if 可以是 true，假设这是无意的，您的三元组应该如下所示：

const chosenMachine = bubbleDetailsObject.names.includes(machineName) ? bubbleDetailsObject : primoDetailsObject.names.includes(machineName) ? primoDetailsObject : familyDetailsObject.names.includes(machineName) ? familyDetailsObject : null;

【讨论】：

【解决方案4】：

可以通过用括号分隔子表达式的简单权宜之计来嵌套三元运算

let result = (condition 1) ? (expr 1) : (expr 2);

任何一个表达式本身都可以是三元表达式，括号解决了所有的语法歧义。

let result = (condition 1) ? ((condition 2) ? expr 3 : expr 4) : (expr 2);

但是，这种方法会产生难以阅读且非常不方便调试的代码。即使在这个非常简化的伪代码中，这行代码也很长。

鉴于您正在逐步测试集合交集而不是简单的相等性，我倾向于保留您的原始代码。

【讨论】：

【解决方案5】：

嗯，这就是你如何使用三元组（当然这不是一个三元组，但你的代码不只包含一个if），但由于其他人提到的原因（即缺乏可读性和可维护性）...

let chosenMachine = 
    familyDetailsObject.names.includes(machineName)
        ? familyDetailsObject
        : primoDetailsObject.names.includes(machineName)
            ? primoDetailsObject
            : bubbleDetailsObject.names.includes(machineName)
                ? bubbleDetailsObject
                : undefined;

注意Objects 的相反顺序以确保保持优先级，因为任何数量的if 语句都可能为真。

一个更容易阅读的实现可能是这样的：

const detailsObjects = {
    bubbleDetailsObjects: { names: ["..."] },
    primoDetailsObjects: { names: ["..."] },
    familyDetailsObjects: { names: ["..."] }
}

let chosenMachine; 

Object.keys(detailsObjects).forEach(key => {
    chosenMachine = 
        detailsObjects[key].names.includes(machineName)
            ? machineName
            : chosenMachine;
})

这为您提供了一个三元语句，同时还保留了您的原始对象。

【讨论】：