Javascript - 在检查 object 是否具有属性时如何避免多次 if 条件检查？

Question

我怎样才能避免这么长的 if 条件？

if (typeof window.checkoutConfig.shipping !== "undefined") {
    if (typeof window.checkoutConfig.shipping.rules !== "undefined") {
        if (typeof window.checkoutConfig.shipping.rules.express !== "undefined") {
            if (typeof window.checkoutConfig.shipping.rules.express.express_note !== "undefined") {
                this.expressNote(window.checkoutConfig.shipping.rules.express.express_note || "");
            }
        }
    }
}

有没有我可以使用的方法，例如（伪代码）： isset(window.checkoutConfig.shipping.rules.express.express_note) 。

Answer 1

查看可选的链接运算符。

它将允许您编写：

window.checkoutConfig.shipping?.rules?.express?.express_note

正如评论中提到的，您可能希望使用babel使其与旧版浏览器兼容。

var a = {};
a?.b?.c

将被编译为：

var _a$b;
var a = {};
a == null ? void 0 : (_a$b = a.b) == null ? void 0 : _a$b.c;

Answer 2

你可以试试。

try {
  this.expressNote(window.checkoutConfig.shipping.rules.express.express_note || "");
} catch (e) {
  // meh
}

Answer 3

ES2020 引入了可选链，以防止像Cannot read property of undefined这样的错误。 加个? 在每个可选属性之前： window.checkOutConfig.shipping?.rules?.express?.express_note如果属性不存在则返回undefined但如果存在则返回属性值。