为何通过数组解构赋值无法获取原数组的length属性？

我在阅读MDN关于Destructuring assignment（解构赋值）的文档时看到如下示例：

const [a, b, ...{ pop, push }] = [1, 2];
console.log(a, b); // 1 2
console.log(pop, push); // [Function pop] [Function push]

文档说明：This allows you to simultaneously unpack the properties and indices of arrays.（这允许你同时解包数组的属性和索引）。

于是我尝试通过解构赋值同时获取数组元素与原数组的length属性，在控制台执行了如下代码：

const arr = [1, 2]
const [x, y, ...{length}] = arr
console.log(x) // 1
console.log(y) // 2
console.log(length) // 0 | ??? 不是应该返回2吗？

而直接通过对象解构的方式却能得到正确结果：

// 换种方式试试...
const arr = [1, 2]
const {length} = arr
console.log(length) // 2 | 没问题，但为何解构赋值不行？

想请教：为何第一种解构赋值方式无法将length赋值为2？这是JavaScript的Bug吗？

原因解析 #

这不是JavaScript的Bug，是数组解构中...语法的正常行为：

• 数组解构里的...rest语法，作用是收集所有未被前面变量匹配到的剩余元素，生成一个全新的数组，而非直接引用原数组。

• 在你的代码const [x, y, ...{length}] = arr中：

  1. x和y已经匹配并取走了原数组arr的所有元素（1和2）；
  2. ...收集到的剩余元素是空数组[]；
  3. 随后对这个空数组进行对象解构，取出它的length属性，自然得到0。

• 再看MDN的示例const [a, b, ...{ pop, push }] = [1, 2];：
  ...生成的空数组虽然自身没有pop和push方法，但它继承了Array.prototype上的这些方法，所以解构时能获取到对应的函数；但length是数组自身的属性，空数组的length就是0，如果原数组还有剩余元素，比如const [a, ...{length}] = [1,2,3]，那length会是2，因为...收集到的是[2,3]。

• 直接对象解构const {length} = arr是直接对原数组进行对象属性提取，所以拿到的是原数组的length值2。

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