函数参数中的数组解构

Question

我在这里有一些与数组解构相关的东西我还不完全理解.

在以下示例中:

function foo( [a, b, c] ) {
    console.log(a, b, c)
}

foo( 1, 2, 3 );

当我运行这个时,我收到以下错误:

Uncaught TypeError: undefined is not a function

现在,我并没有质疑这个事实并没有1, 2, 3像人们预期的那样输出,因为只有第一个值1实际上是destructured(a = 1[0], b = 1[1], c = 1[2]).

但事情就是这样:

我可以写得很完美,1[0], 1[1], 1[2]而且undefined每个人都能得到.

那么为什么foo我上面写的函数抛出一个异常而不是undefined像我期望的那样简单地返回3次.

事实上,如果我写bar下面的话,我会得到3 undefined应该发生的事情.

function bar() {
    console.log( 1[0], 1[1], 1[2] )
}

bar();
// undefined undefined undefined

有人能告诉我JS在第一次做什么foo(),为什么输出不是undefined undefined undefined？

Answer 1

数组解构实际上是迭代器解构，它适用于任何实现Symbol.iterator方法。

例如

function foo([a, b, c]) {
  console.log([a, b, c])
}

foo({
  * [Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
})

Number 不实现迭代器协议

console.log(1[Symbol.iterator])

这就是您收到错误的原因。

但是如果你实现它（不推荐）

Number.prototype[Symbol.iterator] = function*() {
  yield * this.toString(2); // just an example
}

function foo([a, b,c]) {
  console.log(a, b, c);
}

foo(6)

Answer 2

使用数组模式进行解构在后台使用迭代，即被解构的值必须是可迭代的。

事实上，在 Firefox 中，错误消息似乎更具指示性：

类型错误：（解构参数）不可迭代

这就是您与评估1[0], 1[1], 1[2]进行的比较出错的地方：这不需要1是可迭代的。

更正确的比较是这样做：

console.log([...1]);
// or:
const [a, b, c] = 1;

...该代码将失败。