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

Question

我早些时候问了一个关于这段代码的问题，在我修改它以反映答案后它在一定程度上起作用了，但是有一个错误，只有你才能真正匹配红色与红色或蓝色与蓝色或绿色与绿色。我知道问题出在 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 函数似乎每次都会改变第三个方块的颜色。

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

本来的目的是让左边两个div的颜色来补右边div的颜色

Answer 1

Basically I want to know if it would be possible to change...to...or something of the sort.

是的，除了拼写错误外，您做事的方式就是您做事的方式。例如：

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

等同于

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

I found this page. msdn.microsoft.com/en-us/library/2a723cdk.aspx that only shows them as x&&y so I thought I could only use 2

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

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

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)

只是为了完整性：并非所有的表达式都是从左到右求值的，有些运算符可以插队先行。这就叫做"operator precedence." 比如*比二进制的+有更高的优先级，所以如果我们写

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>

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

Can a conditional-And operator(&&) contain more than 2 operands?

html

javascript

events

javascript-events