展開三元語句或切換到if-else

Question

我有以下兩個條件可以正常工作：

var value = this.value === "foo" ? function(d) {
    return d.foo;
} : function(d) {
    return d.bar;
};

當我嘗試使用if-else將以上內容擴展為以下內容時，我在做什么錯？

var value = 
if (this.value === "foo") {
        function(d) {
            return d.foo;
        };
    } else
if (this.value === "bar") {
    function(d) {
        return d.bar;
    };
} else {
    function(d) {
        return d.qux;
    };
}

我很樂意堅持使用運算符或切換到if-else：對我而言更易讀的內容。

Answer 1

if不能在賦值語句的右側使用（這就是我們使用條件運算符的原因之一）。

而是在每個分支中分配：

var value;
if (this.value === "foo") {
    value = function(d) {
        return d.foo;
    };
} else if (this.value === "bar") {
    value = function(d) {
        return d.bar;
    };
} else {
    value = function(d) {
        return d.qux;
    };
}

---

盡管注意可以簡化特定代碼：

var key = this.value == "foo" || this.value == "bar" ? this.value : "qux";
var value = function(d) {
    return d[key];
};

Answer 2

您不能使用條件塊語句為變量分配值。 您可以使用第一個示例中使用的三元運算符並將其加倍：

var value = (this.value === "foo") ? function(d) {
    return d.foo;
} : (this.value === "bar") ? function(d) {
    return d.bar;
} : function(d) {
    return d.qux;
};

Answer 3

第一個曾經有效，因為默認情況下三元運算符會根據條件返回第一個或第二個表達式的結果

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

而if-else塊僅檢查條件，默認情況下不返回任何內容，這就是為什么不能在任何賦值的右側。

Answer 4

還有另一種方法。 它不完全符合這些要求，但是我確實假設這些要求不是您的確切要求（或者您是否真正需要'foo'，'bar'和'quz':-)？ ）

您可以在包裝函數中捕獲值：

function createValueFunc(val) {
    return function(d) {
        return d[val];
    };
}

value = createValueFunc(this.value);

這不能處理您的else情況，因此對您可能沒有用。 但是，如果有用，則可以在ES6中將其簡化為：

createValueFunc = (name) => (obj) => obj[name];

您會在許多實用程序庫中找到這種功能。 下划線稱它為property 。 拉姆達稱它為prop 。 有時我也看到它叫做get 。