JavaScript数组解构中扩展运算符的工作原理：为何仅返回'lizard'

首先明确函数调用后各变量的取值：
调用myFunction(...myArray)时，myArray的前两个元素'rock'、'paper'分别赋值给y1、y2，剩下的['scissors', 'lizard', 'spock']被剩余参数语法...y3收集为一个数组，所以y3的值就是这个数组。

接下来拆解const [x1, ...[result]] = y3;的执行过程：

• 第一步，对y3做第一层解构：
  • x1获取y3的第一个元素：x1 = 'scissors'
  • ...[result]里的...是解构中的剩余模式，它会把y3中除x1外的所有元素打包成新数组，也就是['lizard', 'spock']
• 第二步，这个新数组会被用来匹配后面的[result]结构，相当于对['lizard', 'spock']做第二次解构：
  • result只会取这个新数组的第一个元素'lizard'，第二个元素'spock'因为没有对应变量接收，直接被丢弃了。

如果想让result包含'lizard'和'spock'，只需把解构语句改成const [x1, ...result] = y3;——这里的...result直接把剩余元素收集到result变量中，无需额外数组包裹，此时result就是['lizard', 'spock']。

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