javascript-operator-or

Introduction to javascript operator ||

在JavaScript中，逻辑或运算符（||）用于返回其操作数中的第一个真值，如果所有操作数都是假值，则返回最后一个操作数。

在大多数其他编程语言中，比如Java、C#等，逻辑或运算符只返回布尔值true或false。但是在JavaScript中，||运算符返回的是操作数本身，而不是布尔值。

运算规则

x || y // 如果x为真值，返回x，否则返回y
x || y || z // 返回x、y、z中的第一个真值，如果都为假值，则返回z。

看几个例子

1 || 2 // 1
0 || 1 // 1
0 || "" || undefined // undefined

|| 可以返回非布尔值

在大多数编程语言中，逻辑或运算符||只返回布尔值，但在JavaScript中，它返回的是操作数本身，而不是布尔值。

1 || 2 // 返回 1, 数字类型
"hello" || "world" // 返回 "hello", 字符串类型
0 || null // 返回 null, null类型
0 || undefined // 返回 undefined, undefined类型

参数守卫

|| 通常用于检查函数中的某个参数是否被传递，如果没有则提供一个默认的值。

function makeRequest(url, timeout, callback) {
  timeout = timeout || 2000;
  callback = callback || function() {};
}

在上面的例子中，如果没有提供timeout或callback，则会使用默认值。

但是，这种方法存在一个问题，如果提供了参数但其值为假（例如，将0传递给timeout），则不会生效（依然会使用||后面的值）。在以下代码中，我们打算将0用作超时值，但0 || 2000 = 2000，因此使用了2000作为超时值。

makeRequest("https://example.com", 0, function() {
  console.log("done");
});

为了修复这个问题，我们可以显式检查参数是否为undefined。

function makeRequest(url, timeout, callback) {
  timeout = (timeout !== undefined) ? timeout : 2000;
  callback = (callback !== undefined) ? callback : function() {};
}

或者使用空值合并运算符??，它只在左侧值为null或undefined时返回右侧值。

function makeRequest(url, timeout, callback) {
  timeout = timeout ?? 2000;
  callback = callback ?? function() {};
}

短路求值

|| 运算符具有短路求值的特性，即如果第一个操作数为真值，则不会计算第二个操作数。这在某些情况下可以提高性能，避免不必要的计算。运算规则是：逻辑或表达式从左到右依次对每个操作数进行求值，一旦找到一个真值，就会停止求值。

function A() {
  console.log("called A");
  return false;
}
function B() {
  console.log("called B");
  return true;
}

console.log(B() || A());

上述代码会输出：

1. called B
2. true

在上面的例子中，首先调用了B()函数，它返回true，此时满足短路条件，因此函数A()不再被执行。

Reference

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR