如何在 JavaScript 的箭头函数中使用 if-else 条件？答案

【问题标题】：How to use if-else condition in arrow function in JavaScript?如何在 JavaScript 的箭头函数中使用 if-else 条件？
【发布时间】：2021-09-29 07:24:40
【问题描述】：

是否可以使用箭头函数在 JavaScript 中使用 if else 条件？

【问题讨论】：

是的，没有什么特别之处。您使用它的方式与在普通函数中完全相同。
箭头函数只是简写，但body可以正常。
您是否尝试遇到错误？展示您的尝试，我们可以帮助您解决问题。

标签： javascript

【解决方案1】：

箭头函数可以简单地看作是常规函数的简明版本，除了隐含的return（您可以阅读其他一些关于here 的微妙内容）。使用 if/else 的一种好方法是使用 ternary。取这个常规函数：

function(a){
    if(a < 10){
        return 'valid';
    }else{
        return 'invalid';
    }
}

使用三元的箭头函数中的等价物是：

a => (a < 10) ? 'valid' : 'invalid'

【讨论】：

这个答案实际上并没有在箭头函数中使用 if 语句。
@SimonForsberg 如果您仔细阅读这个问题，您应该认识到措辞是if-else condition，三元组非常适合。但是如果你想学究气，你会注意到三元组的 mdn 也说，This operator is frequently used as a shortcut for the if statement.
我昨天遇到了一个问题，我想在 React-Native 中做一个if (something) doSomething()，否则什么都不做，这就是为什么这个答案对我没有太大帮助的原因。事实证明，出于某种原因，我不得不从箭头函数返回一个值，即使文档说它没有被使用。如果您想知道，那是facebook.github.io/react-native/docs/asyncstorage.html#getitem
这应该适用于具有函数名称的 ES6： const get = a => (a
括号是不必要的

【解决方案2】：

你需要知道箭头函数是如何运作的。

var foo = (value) => value;

等同于：

var foo = (value) => {
    return value;
}

等同于：

function foo(value) {
    return value;
}

如您所见，将 if-else 放入箭头函数并没有什么特别之处。

【讨论】：

你的最后一个应该是function foo(value) { return value; }.bind(this)

【解决方案3】：

您可能已经发现，没有大括号的箭头函数的主体只能是一个表达式，因此不允许使用 if 语句。

在带有大括号的箭头函数中允许使用语句，如下所示：

const func = () => {
    if (...) ...
}

【讨论】：

我是箭头函数的新手，但不知何故忘记了这个简单的事实。谢谢！

【解决方案4】：

对于单个 'if' 条件，您可以使用快捷语法。

想象一下，只有当 a > 10 时才需要执行 doThis() 函数：

a => a > 10 && doThis()

【讨论】：

是否有单个“if”条件和赋值的快捷语法？即仅当 a > 10 时才为变量赋值？
myVariable = (a >10) ? newValue : myVariable ;
我不知道。这适用于我的情况 - 谢谢。
这太好了。我正在使用来自 RxJS 的noop()，并为此大笑自己。

【解决方案5】：

这是我认为有用的一种方法。

对于这个常规函数，

function(a){
    if(a < 10){
        return 'valid';
    }
}

箭头函数中的等价物是

a => {
    if(a < 10){
        return 'valid';
    }
}

我发现这在 React 项目中对数组数据进行条件映射时很有用。下面是一个例子：

function App(){
    const items = useFetch()
    return (
        <div>
            {items.map( (item) => {
                if (item[1]==='something'){
                    return (
                        <li>{item[2]}</li>
                    )
                }
            })}
        </div>
    )
}

【讨论】：