x = x || 的构造是什么你的意思是？

Question

我正在调试一些 JavaScript，但无法解释这个 || 的作用：

function (title, msg) {
  var title = title || 'Error';
  var msg   = msg || 'Error on Request';
}

为什么这个人使用 var title = title || “错误”？有时我也会看到它没有 var 声明。

Answer 1

什么是双管道运算符 (||)？

双管道运算符 (||) 是逻辑 OR 运算符。在大多数语言中，它的工作方式如下：

• 如果第一个值为 false，则检查第二个值。如果该值为 true，则返回 true，如果第二个值为 false，则返回 false。
• 如果第一个值为 true，则无论第二个值是什么，它始终返回 true。

所以基本上它的工作原理就像这个函数：

function or(x, y) {
  if (x) {
    return true;
  } else if (y) {
    return true;
  } else {
    return false;
  }
}

如果你还是不明白，请看这个表：

      | true   false  
------+---------------
true  | true   true   
false | true   false  

换句话说，只有当两个值都为 false 时，它​​才为 false。

JavaScript 中有何不同？

JavaScript 有点不同，因为它是一种松散类型语言。在这种情况下，这意味着您可以将 || 运算符与非布尔值一起使用。尽管没有意义，但您可以将此运算符与函数和对象一起使用：

(function(){}) || {}

那里会发生什么？

如果值不是布尔值，JavaScript 会隐式转换为布尔值。这意味着如果该值为 false（例如 0、""、null、undefined（另请参阅< a href="https://stackoverflow.com/questions/19839952/all-falsey-values-in-javascript">JavaScript 中的所有 false 值))，它将被视为 false;否则它被视为true。

所以上面的例子应该给出true，因为空函数是true。嗯，事实并非如此。它返回空函数。这是因为 JavaScript 的 || 运算符不能像我一开始写的那样工作。它的工作方式如下：

• 如果第一个值是falsey，则返回第二个值。
• 如果第一个值是真，则返回第一个值。

惊讶吗？实际上，它与传统的 || 运算符“兼容”。它可以写成下面的函数：

function or(x, y) {
  if (x) {
    return x;
  } else {
    return y;
  }
}

如果你传递一个真值作为x，它返回x，即一个真值。因此，如果您稍后在 if 子句中使用它：

(function(x, y) {
  var eitherXorY = x || y;
  if (eitherXorY) {
    console.log("Either x or y is truthy.");
  } else {
    console.log("Neither x nor y is truthy");
  }
}(true/*, undefined*/));

您会得到“Either x or y is true.”。

如果x为假，eitherXorY将为y。在这种情况下，如果 y 为真，您将得到“X 或 y 为真。”；否则你会得到“x 和 y 都不是真的”。

实际问题

现在，当您知道 || 运算符如何工作时，您可能可以自己弄清楚 x = x || 的作用是什么。 y 的意思是。如果x为真，则x被赋值给x，所以实际上什么也没有发生；否则y 被分配给x。它通常用于定义函数中的默认参数。但是，它通常被认为是一种糟糕的编程实践，因为它会阻止您传递错误值（不一定是 undefined 或 null）作为参数。考虑以下示例：

function badFunction(/* boolean */flagA) {
  flagA = flagA || true;
  console.log("flagA is set to " + (flagA ? "true" : "false"));
}

乍一看似乎很有效。但是，如果您将 false 作为 flagA 参数传递（因为它是布尔值，即可以是 true 或 false ），会发生什么>)? 它将变为true。在此示例中，无法将flagA设置为false。

最好显式检查 flagA 是否 undefined，就像这样：

function goodFunction(/* boolean */flagA) {
  flagA = typeof flagA !== "undefined" ? flagA : true;
  console.log("flagA is set to " + (flagA ? "true" : "false"));
}

虽然它更长，但它总是有效并且更容易理解。

---

您还可以使用ES6 语法作为默认函数参数，但请注意，它不适用于较旧的浏览器（如 IE）。如果您想支持这些浏览器，您应该使用 Babel 转译您的代码。

另请参阅MDN 上的逻辑运算符。

Answer 2

这意味着 title 参数是可选的。因此，如果您调用不带参数的方法，它将使用默认值“Error”。

这是写作的简写：

if (!title) {
  title = "Error";
}

这种布尔表达式的简写技巧在 Perl 中也很常见。对于表达式：

a OR b

如果 a 或 b 为 true，则计算结果为 true。因此，如果 a 为 true，则根本不需要检查 b。这称为短路布尔评估，因此：

var title = title || "Error";

基本上检查 title 的计算结果是否为 false。如果是，则“返回”“Error”，否则返回title。

Answer 3

如果未设置标题，则使用“ERROR”作为默认值。

更通用：

var foobar = foo || default;

读取：将 foobar 设置为 foo 或 default。
你甚至可以将其链接多次：

var foobar = foo || bar || something || 42;

Answer 4

对此进行更多解释...

|| 运算符是逻辑-or 运算符。如果第一部分为真，则结果为真；如果第二部分为真，则结果为真；如果两个部分都为真，则结果为真。为了清楚起见，将其放在表格中：

 X | Y | X || Y 
---+---+--------
 F | F |   F    
---+---+--------
 F | T |   T    
---+---+--------
 T | F |   T    
---+---+--------
 T | T |   T    
---+---+--------

现在注意到这里有什么吗？如果 X 为 true，则结果始终为 true。因此，如果我们知道 X 为真，则根本不必检查 Y。因此，许多语言实现了逻辑-或（以及来自另一个方向的逻辑-and）的“短路”评估器。他们检查第一个元素，如果这是真的，他们根本不会费心检查第二个元素。结果（从逻辑角度来说）是相同的，但在执行方面，如果第二个元素的计算成本很高，则可能存在巨大差异。

那么这和你的例子有什么关系呢？

var title   = title || 'Error';

我们来看看。 title 元素被传递到您的函数中。在 JavaScript 中，如果不传入参数，则默认为空值。同样在 JavaScript 中，如果变量是 null 值，则逻辑运算符会认为该变量为 false。因此，如果在给定标题的情况下调用此函数，则它是一个非 false 值，因此会分配给局部变量。然而，如果没有给它一个值，它就是一个空值，因此是假的。然后，逻辑-or 运算符计算第二个表达式并返回“Error”。所以现在局部变量被赋予值“Error”。

这是因为 JavaScript 中逻辑表达式的实现。它不会返回正确的布尔值（true 或 false），而是返回根据某些规则给出的值，这些规则被认为相当于 true< /code> 以及被认为等同于 false 的内容。查找 JavaScript 参考以了解 JavaScript 在布尔上下文中认为什么是 true 或 false。

Answer 5

|| 是布尔OR 运算符。与 JavaScript 中一样，undefined、null、0、false 被视为 falsy 值。

它只是意味着

true || true = true
false || true = true
true || false = true
false || false = false

---

undefined || "value" = "value"
"value" || undefined = "value"
null || "value" = "value"
"value" || null = "value"
0 || "value" = "value"
"value" || 0 = "value"
false || "value" = "value"
"value" || false = "value"

Answer 6

基本上，它检查 || 之前的值是否计算为 true。如果是，则取该值，如果不是，则取||后面的值。

它将采用 || 之后的值（据我所知）：

• undefined
• false
• 0
• '' （Null 或 Null 字符串）

Answer 7

虽然 Cletus 的答案是正确的，但我认为应该在 JavaScript 中添加有关“评估为 false”的更多细节。

var title = title || 'Error';
var msg   = msg || 'Error on Request';

不仅检查是否提供了 title/msg，还检查其中任何一个是否 虚假的。即以下之一：

• 错误。
• 0（零）
• ""（空字符串）
• 空。
• 未定义。
• NaN（特殊的数字值，表示非数字！）

因此，在 If title is true (ie, not false, so title = "titleMessage" etc.) 行中，

var title = title || 'Error';

布尔 OR (||) 运算符找到了一个 ' true' 值，这意味着它的计算结果为 true，因此它会短路并返回 true 值（标题）。

如果 title 为假（即上面的列表之一），则布尔 OR (||) 运算符找到“假”值，现在需要计算运算符的另一部分“Error”，其计算结果为 true ，因此被返回。

似乎（经过一些快速的 firebug 控制台实验）如果运算符的两侧都评估为 false，则它会返回第二个“falsy”运算符。

即

return ("" || undefined)

返回未定义，这可能是为了允许您在尝试将标题/消息默认为“”时使用此问题中询问的行为。即运行

var foo = undefined
foo = foo || ""

foo 后将被设置为“”

Answer 8

双管道代表逻辑“OR”。当“参数未设置”时，情况并非如此，因为严格来说，在 JavaScript 中，如果您有这样的代码：

function foo(par) {
}

那么调用

foo()
foo("")
foo(null)
foo(undefined)
foo(0)

是不等效的。

双管道 (||) 会将第一个参数转换为布尔值，如果生成的布尔值为 true - 进行赋值，否则它将分配正确的部分。

如果您检查未设置的参数，这很重要。

假设我们有一个函数 setSalary，它有一个可选参数。如果用户不提供该参数，则应使用默认值 10。

如果您像这样进行检查：

function setSalary(dollars) {
    salary = dollars || 10
}

这将为如下调用提供意外结果：

setSalary(0)

它仍会按照上述流程设置 10。

Answer 9

双管道运算符

这个例子可能有用：

var section = document.getElementById('special');
if(!section){
     section = document.getElementById('main');
}

它也可以是：

var section = document.getElementById('special') || document.getElementById('main');

Answer 10

为了对我之前所说的内容进行一些解释，我应该举一些例子来理解逻辑概念。

var name = false || "Mohsen"; # name equals to Mohsen
var family = true || "Alizadeh" # family equals to true

这意味着如果左侧被评估为 true 语句，则它将完成并且左侧将被返回并分配给变量。在其他情况下，右侧将被返回并分配。

And 运算符具有相反的结构，如下所示。

var name = false && "Mohsen" # name equals to false
var family = true && "Alizadeh" # family equals to Alizadeh

Answer 11

引用：“构造 x = x || y 是什么意思？”

分配默认值。

这意味着为 x 提供 y 的默认值，
如果 x 仍在等待其值但尚未收到它或故意省略以便回退到默认值。

Answer 12

我还必须补充一件事：这种速记是令人厌恶的。它滥用意外的解释器优化（如果第一个操作为真，则不关心第二个操作）来控制分配。该用途与操作员的目的无关。我认为永远不应该使用它。

我更喜欢使用三元运算符进行初始化，例如，

var title = title?title:'Error';

这使用单行条件运算来实现其正确目的。它仍然诚实地玩着难看的游戏，但这就是适合你的 JavaScript。