这个逻辑 OR (II) JavaScript 表达式的解释是什么？

Question

我正在通过游戏控制器上的 W3 学校 tutorial 并且有一个表达式 myGameArea.keys = (myGameArea.keys || []) 我无法理解，如果有人能详细解释就好了背后的逻辑是什么。

教程讲解

如果同时按下多个键怎么办？

在上面的例子中，组件只能水平或垂直移动。现在我们希望组件也沿对角线移动。

为 myGameArea 对象创建一个 keys 数组，并为每个按下的键插入一个元素，并赋予其值 true ，该值保持为 true 直到不再按下该键，该值在 keyup 事件中变为 false监听函数：

表达式的上下文

window.addEventListener('keydown', function (e) {
      myGameArea.keys = (myGameArea.keys || []);
      myGameArea.keys[e.keyCode] = true;
})
window.addEventListener('keyup', function (e) {
      myGameArea.keys[e.keyCode] = false;
})

完整的 JavaScript 代码

var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
    window.addEventListener('keydown', function (e) {
      myGameArea.keys = (myGameArea.keys || []);
      myGameArea.keys[e.keyCode] = true;
    })
    window.addEventListener('keyup', function (e) {
      myGameArea.keys[e.keyCode] = false;
    })
  },
  clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

 function updateGameArea() {
  myGameArea.clear();
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
  if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -1; }
  if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 1; }
  if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -1; }
  if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }
  myGamePiece.newPos();
  myGamePiece.update();
} 

Answer 1

在大多数编程语言中，|| 是一个运算符，它接受两个布尔值并对它们执行逻辑 OR。 （true || false 是true 等）

根据我的经验，一些语言，主要是动态类型的语言，概括|| 的概念也适用于其他数据类型。

在 JavaScript 中，|| 的含义如下：

• 如果第一个值是假的（0、false、""、null、undefined、NaN），则返回第二个值。
• 否则，返回第一个值。

如果您插入一些布尔值，您会发现这种行为模仿了 || 在其他语言中的工作方式。

由于这种行为，|| 获得了作为“默认值”运算符的二次使用，即“使用此值，除非它是虚假的，在这种情况下，请改用其他值”。

例如：

let greeting = x || "Hello";

在上面的代码中，greeting 将被设置为 x，除非 x 是假的，在这种情况下，它将被设置为 "Hello"。

同样，

this.foo = this.foo || "Yo!";

如果this.foo 尚不存在（或存在但具有虚假值），上述代码会将this.foo 初始化为"Yo!"。

编辑：

查看 OP 帖子中的这个具体示例：

    window.addEventListener('keydown', function (e) {
      myGameArea.keys = (myGameArea.keys || []);
      myGameArea.keys[e.keyCode] = true;
    })

myGameArea.keys = (myGameArea.keys || []); 行确保myGameArea.keys 数组存在，因为在注册并可能调用事件侦听器之前从未创建它。您可以将keys: [] 显式添加到myGameArea 对象，以完全消除对这一行的需求。

此外，代码还包含&& 运算符的类似用法。与 || 一样，它也已在 JavaScript 中得到推广。它的工作原理是这样的：

• 如果第一个值是假的，则返回第一个值。
• 否则，返回第二个值。

看它在if语句中的使用：

if (myGameArea.keys && myGameArea.keys[37]) { /*...*/ }

myGameArea.keys && 是一种短路条件后半部分的方法。如果从未创建过myGameArea.keys（例如，因为没有按下任何按钮），我们会跳过其余的条件，否则这些条件会崩溃，因为myGameArea.keys 将是undefined，并且您无法将（[37]）索引到undefined 值。