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

Posted 2023-03-24

【中文标题】数组扩展符号应该如何与 Babel 中的 NodeLists 一起使用？

【英文标题】：How should array spread notation work with NodeLists in Babel?

【发布时间】：2016-12-28 09:09:12

【问题描述】：

我知道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 返回一个节点列表数组。因此调用thing.do() 会导致错误，因为NodeList 没有do 方法。

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

那么对于每次使用数组扩展，Babel 都错误地转换为 concat 吗？还是我缺少更新的版本或配置？

【问题讨论】：

你需要支持哪些浏览器？

听起来你在 Babel 预设中使用了loose: true，这会禁用你正在寻找的行为。

只需要支持常青浏览器

【参考方案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>