JavaScript逻辑或表达式myGameArea.keys = (myGameArea.keys || [])原理问询

1 语法基础：JS逻辑或的短路求值特性 #

JS中的||逻辑或运算符遵循短路求值规则：

• 会从左到右判断操作数的布尔值，返回第一个为真值的操作数
• 如果所有操作数都是假值，就返回最后一个操作数

JS里的常见假值包括：undefined、null、false、0、''、NaN，其余值都属于真值。

2 表达式的执行逻辑 #

这个表达式本质是对keys数组做懒初始化，分两种执行场景：

• 第一次触发keydown事件时：myGameArea对象的初始定义中没有keys属性，所以myGameArea.keys的值为undefined（假值），此时||会返回后面的空数组[]，赋值给myGameArea.keys，完成数组初始化
• 后续触发keydown事件时：myGameArea.keys已经是已存在的数组（数组属于真值），此时||直接返回已有的数组，赋值操作不会覆盖原有数组中存储的按键状态

3 为什么要写这个表达式 #

如果没有这行初始化代码，第一次触发keydown时直接执行myGameArea.keys[e.keyCode] = true，会因为myGameArea.keys是undefined，尝试给undefined添加属性而抛出TypeError报错，导致代码无法运行。

这个写法是JS里非常常见的简写技巧，等价于全写的判断逻辑：

if (!myGameArea.keys) {
  myGameArea.keys = []
}

4 上下文逻辑补充 #

配合整个按键检测逻辑的运行流程：

• 按键按下时，把keys数组中对应keyCode的位置设为true
• 按键松开时，把对应位置设为false
• 游戏每帧更新时，同时检查四个方向键的状态，只要对应位置为true就给角色对应方向的速度，同时按下两个方向（比如左+上）就会同时有x、y方向的速度，实现斜向移动。

内容的提问来源于stack exchange，提问作者Gass