Question

我想知道为什么以下两个表达式返回相同的结果，即当val_bool始终是布尔值[true或false]时：

('oninput' in document.documentElement && !val_bool) && 'first result' || 'second result';

和

('oninput' in document.documentElement && !val_bool) ? 'first result' : 'second result';

如果您打开控制台并运行以下命令：

var val_bool = true;
('oninput' in document.documentElement && !val_bool) && 'first result' || 'second result';

输出

second result。当我对三元进行更改时输出相同的结果：

var val_bool = true;
('oninput' in document.documentElement && !val_bool) ? 'first result' : 'second result';

我不熟悉第一个逻辑表达式解析其结果的机制。

Answer 1

在三元表达式x ? y : z中，第一部分被计算为布尔值，并返回适当的值。

在另一行代码x && y || z中，情况有所不同：它基本上是2个表达式而不是1个。

此链接在此处非常有用：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

我们可以看到，&&和||具有从左到右的关联性，这意味着首先评估左侧部分。以下几行相同：

x && y || z
(x && y) || z

首先评估表达式x && y，x && y || z变为result(x,y) || z。

输入相同时结果不同的示例：

＆＃13;

const logical = (x, y, z) => x && y || z;
const ternary = (x, y, z) => x ? y : z;

console.log(
  logical(1, 0, 1) // 1 && 0 || 1 => 0 || 1 => __ 1 __
)

console.log(
  ternary(1, 0, 1) // if (1) then 0; otherwise 1 => __ 0 __ (Boolean(1) === true)
)

＆＃13;

Answer 2

只为后人发布此内容。

我在Logical Operators的文章中找到了一个引用的宝石。在运算符||下的某处和＆amp;＆amp; ，一段写着：

||或&&表达式的结果始终是其基础值其中一个操作数，而不是测试的（可能是强制的）结果。

事实证明，我从评估的角度看待事物，而不是潜在的价值。

所以我最初的问题有以下表达式：

('oninput' in document.documentElement && !val_bool) && 'first result' || 'second result';

让我们用简单的变量替换操作数：

var a = true;
var b = true;
var c = 'first result';
var d = 'second result';

(a && !b) && c || d;

首先，(a && !b)将评估为false，因为a为true而!b为false且true && false为false。

其次，false结果将使用c（(false) && c）进行评估。同样，我们最终得到false，因为c将评估为字符串（true），false && true为false。

最后，false的结果将使用d进行评估，但此时运算符为||且false || true的评估为true。但是，这不是将要返回的评估，而是基础值，即second result。

当然，当我将b的原始值从true更新为false时，情况会发生变化。 ||左侧的所有内容都评估为true，因此当您评估true || true时，您会得到true，但true是问题所在。它是true左侧的||，因为如果我们评估'a' || 'b'，则结果为'a'。

所有收费，它不等同于函数中的三元运算符，但两个特定表达式的结果[如果变量类型保持不变]应该是相同的。

三元操作与此替代方案之间的区别是什么？

2 个答案: