如何修复 Javascript 中的“地图不是函数”错误答案

【问题标题】：How to fix the 'map is not a function' error in Javascript如何修复 Javascript 中的“地图不是函数”错误
【发布时间】：2019-04-07 16:39:10
【问题描述】：

我正在循环浏览带有类 (.add-to-cart) 的 HTML 中的所有锚标记，以便现在使用 map() 将文本内容更改为购物，但我收到一条错误消息，指出 .map 不是功能。

<!--HTML CODE -->
 <div class="four columns">
        <div class="card">
                <a href="#" class="u-full-width button-primary button input add-to-cart" data-id="5">Add to Cart</a>
        </div>
</div> <!--.card-->
<div class="four columns">
        <div class="card">
                <a href="#" class="u-full-width button-primary button input add-to-cart" data-id="5">Add to Cart</a>
        </div>
</div> <!--.card-->
<div class="four columns">
        <div class="card">
                <a href="#" class="u-full-width button-primary button input add-to-cart" data-id="5">Add to Cart</a>
        </div>
</div> <!--.card-->


//JAVASCRIPT CODE
const addCartBtns = document.querySelectorAll('.add-to-cart');


addCartBtns.map(function(cartBtn){
  console.log(cartBtn.textContent="shop now");
});

我希望输出将锚标签的文本内容更改为“立即购买”。

【问题讨论】：

如果你不打算使用.map() 的返回值，那么你就不应该使用.map()。在您的情况下，您应该使用.forEach() - 并且使用现代浏览器，这已经可以在NodeList

标签： javascript

【解决方案1】：

document.querySelectorAll 返回一个 NodeList，在使用 map() 之前应将其转换为真实的Array

Document 方法 querySelectorAll() 返回一个静态（非实时）NodeList，表示与指定选择器组匹配的文档元素列表

您可以使用扩展运算符

const addCartBtns = [...document.querySelectorAll('.add-to-cart')]

或者你可以使用Array.from

const addCartBtns = Array.from(document.querySelectorAll('.add-to-cart'))

请注意，您使用的是map()。 map() 用于根据现有相同长度数组的值创建新数组。在这里，您正在修改数组。所以你可以使用forEach

addCartBtns.forEach(function(cartBtn){
  console.log(cartBtn.textContent="shop now");
});

注意：如果NodeList 未转换为数组，forEach 将正常工作。

【讨论】：

@SamuelTen 满意就采纳答案

【解决方案2】：

在这里，你实际上不需要map，forEach 就可以了，NodeList 有一个forEach。因此：

addCartBtns.forEach(function(cartBtn) {
  console.log(cartBtn.textContent="shop now");
});

【讨论】：

【解决方案3】：

您不能仅仅因为 querySelectorAll 的输出是 NodeList 对象而不是数组而使用 map。如果你想循环 NodeList 中的每一项，你应该使用 forEach 来代替。

查看 NodeList API 文档：
https://developer.mozilla.org/en-US/docs/Web/API/NodeList

但是您可以快速将 NodeList 对象转换为 Array
Fastest way to convert JavaScript NodeList to Array?

[...addCartBtns]

Array.prototype.slice.call(addCartBtns);

Array.from(addCartBtns)

【讨论】：