数组扩展符号如何与Babel中的NodeLists一起使用？

Question

我知道querySelectorAll会返回类似数组的内容，但不是一个数组。因此，在我的代码中，我使用ES6扩展语法迭代它：

const things = document.querySelectorAll('.things');
[...things].forEach(thing => thing.do());

如果我将确切的代码写入Chrome devtools控制台，它会按预期工作。但是，Babel正在将其转发给ES5：

var things = document.querySelectorAll('.things');
[].concat(things).forEach(function(thing) { thing.do() });

[].concat(things) 不与[...things]相同。预期结果是一个节点数组，但concat返回一个NodeLists数组。因此，调用thing.do()会导致错误，因为NodeList没有do方法。

相反，在NodeList上使用Array方法的ES5友好方式是首先调用slice，如Array.prototype.slice.call(things)。

对于每次使用数组传播而言，Babel错误地转向concat是错误的吗？或者是否有我缺少的新版本或配置？

Answer 1

您可以将NodeList.prototype上的@@isConcatSpreadable属性设置为true，使其与[].concat一起正常使用。

NodeList.prototype[Symbol.isConcatSpreadable] = true;
const divs = document.querySelectorAll('div');
console.log([].concat(divs));

<div>foo</div>
<div>bar</div>