Javascript 读取多个三值运算符条件

我遇到了以下代码：

      if (proto.hasOwnProperty(name)) {
         !(specPolicy === SpecPolicy.DEFINE_MANY || specPolicy === SpecPolicy.DEFINE_MANY_MERGED) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'ReactClassInterface: You are attempting to define ' + '`%s` on your component more than once. This conflict may be due ' + 'to a mixin.', name) : invariant(false) : undefined;
      }

---

如何读取第2行中的三元运算符？

正如其中一条评论所说，为了可读性/合理性，您可能应该将其转换为传统的if-else树。然而，它应该是这样读的（为了简洁起见，我没有逐字逐句地写出来，但你知道要点）：

---

我想通过将代码转换为if-else树来回答这个问题可能会帮助您更容易理解：）

有两个三元运算符。看看这种格式化方式是否有帮助：

!(specPolicy === SpecPolicy.DEFINE_MANY || specPolicy === SpecPolicy.DEFINE_MANY_MERGED) ? 
    process.env.NODE_ENV !== 'production' ? 
        invariant(false, 'ReactClassInterface: You are attempting to define ' + '`%s` on your component more than once. This conflict may be due ' + 'to a mixin.', name) : 
        invariant(false) : 
    undefined;

---

你可以使用适当的缩进。最内部的三元系组合在一起，如

condition1 ? condition2 ? value1 : value2 : value3

与

condition1 ? (condition2 ? value1 : value2) : value3

用你的代码

!(specPolicy === SpecPolicy.DEFINE_MANY || specPolicy === SpecPolicy.DEFINE_MANY_MERGED) ? 
    process.env.NODE_ENV !== 'production' ? 
        invariant(false, 'ReactClassInterface: You are attempting to define ' + '`%s` on your component more than once. This conflict may be due ' + 'to a mixin.', name) :
        invariant(false) :
    undefined;

---

尝试设置代码缩进的格式，以便更好地理解

if (proto.hasOwnProperty(name)) {
    !(
        specPolicy === SpecPolicy.DEFINE_MANY //1
        ||
        specPolicy === SpecPolicy.DEFINE_MANY_MERGED //1
    ) ?
        process.env.NODE_ENV !== 'production' ? //2
            invariant(false, 'ReactClassInterface: You are attempting to define ' + '`%s` on your component more than once. This conflict may be due ' + 'to a mixin.', name) :
            invariant(false)//3
        : undefined;//4
}

（1） 如果

specPolicy

既不是

specPolicy.DEFINE_MANY

也不是

specPolicy.DEFINE_MANY_MERGED

，则检查

process.env.NODE_env

是否为“生产”。 （2） 如果是，则调用

不变量（false，'Re…

，否则调用（3）

不变量（false）

。 如果（1）为真，则返回未定义的

（4）

if (proto.hasOwnProperty(name)) {
    !(
        specPolicy === SpecPolicy.DEFINE_MANY //1
        ||
        specPolicy === SpecPolicy.DEFINE_MANY_MERGED //1
    ) ?
        process.env.NODE_ENV !== 'production' ? //2
            invariant(false, 'ReactClassInterface: You are attempting to define ' + '`%s` on your component more than once. This conflict may be due ' + 'to a mixin.', name) :
            invariant(false)//3
        : undefined;//4
}