Question

我试图理解我从在线资源中获取的JavaScript代码。但它是完整的?和:符号（三元运算符），最重要的是，它有多个嵌套的三元运算符。

以下是代码。

function () {
                var e = this,
                    t = e.$createElement,
                    n = e._self._c || t;
                return n("v-card", [e.responseCard.title.trim() ? n("v-card-title", {
                    staticClass: "red lighten-5",
                    attrs: {
                        "primary-title": ""
                    }
                }, [n("span", {
                    staticClass: "headline"
                }, [e._v(e._s(e.responseCard.title))])]) : e._e(), e._v(" "), e.responseCard.subTitle ? n("v-card-text", [n("span", [e._v(e._s(e.responseCard.subTitle))])]) : e._e(), e._v(" "), e.responseCard.imageUrl ? n("v-card-media", {
                    attrs: {
                        src: e.responseCard.imageUrl,
                        contain: "",
                        height: "33vh"
                    }
                }) : e._e(), e._v(" "), e._l(e.responseCard.buttons, (function (t, i) {
                    return n("v-card-actions", {
                        key: i,
                        staticClass: "button-row",
                        attrs: {
                            actions: ""
                        }
                    }, [t.text && t.value ? n("v-btn", {
                        attrs: {
                            disabled: e.hasButtonBeenClicked,
                            default: ""
                        },
                        nativeOn: {
                            "~click": function (n) {
                                e.onButtonClick(t.value)
                            }
                        }
                    }, [e._v("\n      " + e._s(t.text) + "\n    ")]) : e._e()], 1)
                })), e._v(" "), e.responseCard.attachmentLinkUrl ? n("v-card-actions", [n("v-btn", {
                    staticClass: "red lighten-5",
                    attrs: {
                        flat: "",
                        tag: "a",
                        href: e.responseCard.attachmentLinkUrl,
                        target: "_blank"
                    }
                }, [e._v("\n      Open Link\n    ")])], 1) : e._e()], 2)
            }

有人可以将此转换为易于阅读/理解的基本if-else块，我已在网上阅读此内容，但由于嵌套的内容，我非常困惑且无法理解了解如何做到这一点。

大家好，请不要错误地提出这样一个基本问题，我只是因为嵌套的三元运算符问我而且我无法理解如何解决这个问题： - （

由于

Answer 1

我不会为你转换它。

三元运算符是：return condition ? answer1 : answer2。

我们可以这样改写：

if (condition)
  return answer1;
else
  return answer2;

嵌套的将是：return condition ? (condition2 ? answer1 : answer3) : answer2

我们可以这样改写：

if (condition) {
  if (condition2)
    return answer1;
  else
    return answer3;
}
else
  return answer2;

依此类推......

示例

var k = e.responseCard.title.trim() ? n("v-card-title", {
    staticClass: "red lighten-5",
    attrs: {
        "primary-title": ""
    }
}, [n("span", {
    staticClass: "headline"
}, [e._v(e._s(e.responseCard.title))])])
: e._e()

// condition is e.responseCard.title.trim()
// answer1 is n("v-card-title", bla bla bla...)
// answer2 is e._e()

在if/else世界

var k;
if (e.responseCard.title.trim())
  k = n("v-card-title", bla bla bla...);
else
  k = e._e();

如果你想了解更多，MDN有一个关于三元运算符的很好的文档。

将嵌套的三元转换为基本if else

1 个答案: