关于俄罗斯方块中JavaScript箭头函数与解构赋值代码的疑问

• 疑问1：声明变量p时，moves[event.key](piece)的语法逻辑是什么？
  moves是预先定义的对象，它的属性名对应键盘按键的常量（比如KEY.LEFT），属性值是处理移动的函数。moves[event.key]用方括号属性访问符获取当前按键对应的处理函数——因为属性名是动态常量而非固定字符串，所以不能用.访问。拿到函数后，(piece)就是调用该函数并传入当前piece实例，最终得到移动后的新piece数据。

• 疑问2：moves对象中的[KEY.LEFT]: (p) => ({...p, x: p.x - 1})部分，为何[KEY.LEFT]与箭头函数间需要冒号？
  这是JS的计算属性名语法，[KEY.LEFT]会计算出具体的属性名（比如对应左箭头键的键值），冒号是对象里「属性名」和「属性值」的标准分隔符，箭头函数就是这个属性对应的处理逻辑，和普通对象{name: '张三'}里的冒号作用完全一致，用来关联键与对应的值。

• 疑问3：箭头函数返回对象时为何必须加括号？
  如果箭头函数直接写() => {x: p.x -1}，JS会把大括号解析成函数的代码块，里面的x: p.x-1会被当成标签语句，而非对象的属性键值对。加括号() => ({...p, x: p.x -1})是明确告诉JS：括号包裹的是要返回的对象字面量，避免语法歧义，让解释器正确识别返回值。

• 疑问4：...p, x: p.x - 1的含义是什么？
  这是ES6的对象展开语法：

  • ...p会把原对象p的所有可枚举属性完整复制到新对象中；
  • 后面的x: p.x -1会覆盖新对象中继承自p的x属性，将其值减1。
    最终得到一个和原piece实例几乎完全相同、仅x坐标左移1单位的新对象——这种写法是为了不修改原piece实例，用返回新对象的方式实现状态更新，符合不可变数据的设计思路。

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