$(...)..map(...).reduce不是一个函数。

Question

我正尝试使用 map 和 reduce 计算页面中几个元素的高度总和。出现以下异常，原因未知：

VM52933:2 Uncaught TypeError: $(...).map(...).reduce 不是一个函数(…)

$('.items')
    .map( (index,slide) => $(slide).height() )
    .reduce( (prev, next) => prev + next, 0 )

.map返回一个有效的数组：

[48, 48, 48, 75, 48]

如果我单独处理这个数组（[48, 48, 48, 75, 48].reduce(...)），它能正常工作。我在这里做错了什么吗？

- André Senra

---

在map和reduce之间添加.get()。否则，你会得到一个包含数组的jQuery对象。 - Niet the Dark Absol

你能在这个fiddle里面发布一个带有.items的小例子吗？ - webdeb

这是因为 .map 方法返回的是 jQuery 对象，而不是数组。 - hindmost

jQuery对象是列表，但它们不是数组。而reduce是数组的一个方法。 - Thomas

@NiettheDarkAbsol请将您的评论添加为答案，以便我将其标记为解决方案。它起作用了。谢谢。 - André Senra

Answer 1

因为当你执行$('.items')时，它是一种类似数组的结构，但并不是真正的数组。如果你查看它的原型，你会发现它是NodeList类型，并且它没有reduce方法。如果你通过Array.from将其转换为正确的数组，你就可以应用reduce、map和所有其他数组函数了。

更多细节可以在这里找到。

像这样做：

Array.from($('.items'))
.map( (slide) => $(slide).height() )
.reduce( (prev, next) => prev + next, 0 );

- Vatsal

---

由于某些原因，这个解决方案返回了'0'。在.map()和.reduce()之间添加.get()修复了它。无论如何，谢谢！ - André Senra

在 map 回调函数中参数顺序错误。正确的写法是 .map(slide => $(slide).height())。 - Thomas

为使此解决方案有效，我需要从map中删除'index'参数，否则会抛出以下异常： "olhares.min.js?v=1:4 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'."所以最终代码看起来像这样：Array.from($('.comments-item.slick-slide.slick-active')) .map( (slide) => $(slide).height() ) .reduce( (prev, next) => prev + next, 0 ); - André Senra

而不是有点臃肿的Array.from($(selector))，你也可以写成$(selector).toArray()，因此可以简化为:$('.items').toArray().map( el => $(el).height() ).reduce((a,b) => a+b, 0); - Thomas

非常抱歉。我实际上没有运行这个示例。昨天我遇到了同样的问题，所以我知道解决方案是什么 :). 我已经根据@Andre Senra提供的修复更新了它。 - Vatsal

Answer 2

试试这个：

$('.items')
    .toArray()
    .map( (index,slide) => $(slide).height() )
    .reduce( (prev, next) => prev + next, 0 );

感谢 @thomas 指出这一点。

- Jeremy Moritz