函数返回语句中的Javascript逻辑OR运算符

Question

我正在使用 Vuetify，特别是 v-form 内部的 v-text-field。每个 v-text-fields 都有一个称为规则的属性，用于验证。该属性接受一个包含一堆函数的数组。这是我偶然发现一段奇怪的代码的地方:

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

所以，这个函数的想法是从输入中获取值，如果长度等于0，则显示错误消息“Title is required”。我的问题是:这个函数实际上返回什么？

Answer 1

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

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

让我们分解一下......

---

首先，箭头函数只是以下内容的简写:

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

---

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

例如!!'hello' --> true, !!0 --> false, ! !未定义 --> false

---

下一部分是比较。 || 是 OR opperator ，因此如果前半部分为真/存在，则将返回它，如果不是，则将返回 || 之后的部分。

例如真|| 'some text' 将返回 true，而 false || 'some text' 将返回 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 将被接受为有效。