展开三元语句或切换到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 。