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。

展开三元语句或切换到if-else

4 个答案: