条件与运算符 (&&) 可以包含 2 个以上的操作数吗？答案

【问题标题】：Can a conditional-And operator(&&) contain more than 2 operands?条件与运算符 (&&) 可以包含 2 个以上的操作数吗？
【发布时间】：2015-07-12 06:06:27
【问题描述】：

我早些时候就该代码提出了一个问题，在我更改它以反映答案后，它在一定程度上起作用，但有一个错误，只有你才能将红色与红色或蓝色与蓝色或绿色与绿色匹配。我知道问题出在 checkColors 函数中。基本上我想知道是否可以改变

if (squares1[0].style.backgroundColor=='rgb(255, 0, 0)' &&      squares2[0].style.backgroundColor=='rgb(255, 0, 0)'){
    squares3[0].style.backgroundColor='rgb(255, 0, 0)';
    gotIt;

到

if (squares1[0].style.backgroundColor=='rgb(255, 0, 0)' && squares2[0].style.backgroundColor=='rgb(255, 0, 0)') &&
    squares3[0].style.backgroundColor='rgb(255, 0, 0){
    gotIt;}

或类似的东西。这个函数几乎破坏了整个事情，我想知道上述或类似的事情是否可能，因为 checkColor 函数似乎每次都会改变第三个正方形的颜色。

我更新了我的小提琴，它显示了 gotIt 函数的用途。 http://jsfiddle.net/j6xrxbeb/

原本的目的是让两个左边的div的颜色补到右边的div的颜色。

【问题讨论】：

一个问题是您不能依赖浏览器将颜色属性报告为rgb() 表达式。有些会，有些不会。你最好用一个或多个类名或类似的东西来跟踪状态。
你可以有多少你想要的，只要你把引号和括号放在正确的地方
真正的问题是。为什么只允许你有两个？
我完全同意 Pointy 顺便说一句，你不能可靠地检查颜色。例如，我的浏览器会失败，因为它返回 RGBA。
有些包含空格，有些不包含。等等:-)

标签： javascript html events javascript-events

【解决方案1】：

基本上我想知道是否有可能改变...到...或类似的东西。

是的，你做这件事的方式就是你做这件事的方式，除了错别字。例如：

if (a && b) {
    if (c) {
       foo();
    }
}

等价于

if (a && b && c) {
    foo();
}

我找到了这个页面。 msdn.microsoft.com/en-us/library/2a723cdk.aspx 仅将它们显示为x&&y 所以我认为我只能使用 2

就目前而言这是正确的：&& 运算符与 JavaScript 语言中的大多数运算符一样，是一个二元运算符：它接受两个操作数。（JavaScript 也有几个 unary 运算符 [接受一个操作数的运算符]，如否定等，以及一个 ternary 运算符 [一个接受三个操作数的运算符]）。加法 (+) 和减法 (-) 运算符也是二元运算符：它们使用两个操作数。

但是：就像加法和减法一样，使用&&，您可以使用一个表达式的结果来输入另一个表达式。所以就像我们可以这样写：

a + b - c

...引擎评估a + b，得到值r，然后评估r - c，我们可以这样做：

if (a && b && c)

它的评估是这样的：

a && b 被评估，我们得到一个结果 r
r && c 被评估

之所以会这样，是因为&& 是从左到右评估的。您可以通过这种方式将任意数量的表达式组合在一起：

if (a && b && c && d && e && f && g)

仅出于完整性考虑：并非所有表达式都是从左到右计算的，并且一些运算符会插队并先行。这称为“运算符优先级”。例如，* 的优先级高于二进制 +，所以如果我们写

1 + 2 * 3

结果是7，而不是9——* 必须先行，给我们2 * 3 = 6，然后是1 + 6 = 7。

checkColors 函数的问题在于它依赖于以rgb(r, g, b) 形式返回的值，但是许多浏览器使用不同的形式（无论您在指定颜色时使用的形式如何）。可能是rgba(r,g,b,a) 或rgb(r,g,b) 或#rrggbb 或blue...你懂的。

相反，请跟踪您在另一个位置（可能是data-* 属性）分配的颜色（以您正在使用的形式）。然后你就会知道，当你将某个东西与那个颜色进行比较时，它会是你所期望的形式。或者，您可以将其作为代码中的状态变量进行跟踪。有多种方法可以跟踪此信息。

这是一个更简单的例子：

Array.prototype.forEach.call(
  document.querySelectorAll(".toggle"),
  function(div) {
    div.addEventListener("click", colorClick, false);
  }
);
function colorClick() {
  var color = this.getAttribute("data-color");
  if (!color || color === "blue") {
    color = "green";
  } else {
    color = "blue";
  }
  this.style.backgroundColor = color;
  this.setAttribute("data-color", color);
}

div {
  color: white;
  border: 1px solid black;
  display: inline-block;
  width: 100px;
  height: 50px;
}

<div class="toggle" style="background-color: blue">Click me</div>
<div class="toggle" style="background-color: blue">Click me</div>
<div class="toggle" style="background-color: blue">Click me</div>
<div class="toggle" style="background-color: blue">Click me</div>

【讨论】：