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

Question

我之前问了一个关于此代码的问题，在我更改它以反射(reflect)答案后，它在一定程度上起作用，但有一个错误，只有你才能将红色与红色或蓝色与蓝色或绿色与绿色相匹配。我知道问题出在 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 函数似乎每次都会改变第三个方 block 的颜色。

我更新了我的 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)

它的评估如下:

1. a && b 被评估，我们得到结果 r

2. 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 或 蓝色...你明白了。

相反，请在另一个位置(可能是 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>