Javascript return 函数语句中的逻辑或运算符

Question

我正在使用 Vuetify，特别是 v-form 内部的 v-text-field。这些 v-text-field 中的每一个都有一个属性称为规则，用于验证。属性接受带有一堆函数的数组。这是我偶然发现 weird-ish 一段代码的地方：

(title) => !!title || "Title is required"

因此，想法是此函数从输入中获取值，如果长度等于 0，则显示错误消息“需要标题”。我的问题是：这个函数实际上是什么 return?

Answer 1

(title) => !!title || "Title is required"]

This line is saying:
If title is present, return true, otherwise return "Title is required".

让我们分解一下...

首先，箭头函数只是 shorthand for:

function xxxx (title) {
  return !!title || "Title is required"];
}

接下来，!! 是双重否定，实际上只是 logical not opperator 两次。第一个否定将数据（无论它是什么数据类型）转换为布尔值。第二次否定再次更改布尔值以给出所需的结果。

例如!!'hello' --> true, !!0 --> false, !!undefined --> false

接下来是比较。 || 是 OR opperator，所以如果前半部分为真/存在，那么它将被 returned，如果不是，|| 之后的部分将是 returned.

例如true || 'some text' 将 return true，而 false || 'some text' 将 return some text

这里有一些示例，请尝试运行片段以查看输出

const checkTitle = (title) => !!title || "Title is required"

// 1. No parameters, should print "Title is required"
console.log('Test 1', checkTitle()); 

// 2. Parameter presentbut empty, should print "Title is required"
console.log('Test 2', checkTitle("")); 

// 3. Title present, and valid, should preint 'true'
console.log('Test 3', checkTitle('Hello World!'));

这不是最好的代码，因为它不是很清楚，而且您通常不想像这样混合类型。它还不检查标题是否为有效类型，因此 123 或 true 将被接受为有效。

Javascript return 函数语句中的逻辑或运算符

Javascript Logical OR operator in return statement of a function

javascript

null-coalescing

logical-operators

or-operator

This line is saying:
If `title` is present, return `true`, otherwise return `"Title is required"`.

Javascript return 函数语句中的逻辑或运算符

Javascript Logical OR operator in return statement of a function

javascript

null-coalescing

logical-operators

or-operator

This line is saying: If title is present, return true, otherwise return "Title is required".

This line is saying:
If `title` is present, return `true`, otherwise return `"Title is required"`.