如何在JavaScript中使用.map()处理NodeList？

Question

为什么会出现这个错误？当我使用 querySelectorAll 选择 <li> 标签时，如何访问并打印节点？ script.js:14 Uncaught TypeError: list.map is not a function HTML

<ul class="wrapper1" id="testDiv">
        <li class="cake">Carrots</li>
        <li class="cake">Cake</li>
        <li class="cake">Wheat</li>
        <li class="cake">Balloons</li>
    </ul>

JS

 let list = document.querySelectorAll("li");
        let items = list.map(elem => {
      console.log(elem);
    })

- Shubham Kumar

Answer 1

querySelectorAll() 返回一个静态（非动态）的NodeList，表示文档中与指定选择器组匹配的元素列表。使用array#from将NodeList转换为数组，然后通过array#map迭代。

let list = document.querySelectorAll("li");
let items = Array.from(list).map(elem => {
  console.log(elem);
})

<ul class="wrapper1" id="testDiv">
    <li class="cake">Carrots</li>
    <li class="cake">Cake</li>
    <li class="cake">Wheat</li>
    <li class="cake">Balloons</li>
</ul>

- Hassan Imam

---

如果您不将变量命名为"list"，那么这将更容易理解。它不是列表，即使它是，也会令人困惑。在编程教程中，这种情况是我经常遇到的障碍之一。 - foobarbecue

好像很奇怪，我们必须分配一个新的数组，而不能通过类型名称中的List来迭代某个东西。 - undefined

Answer 2

除了Itang和Foo的建议之外，您还可以使用：

[].concat(document.querySelectorAll("li")).map((el) => { console.log(el); })

公平地说，我认为Foo的建议使用展开语法可能是最优雅的，只是我不确定扩展运算符在NodeLists中得到了广泛支持。（以下是原文）

[...document.querySelectorAll('li')].map((el) => { console.log(el); })

- Shane

---

展开运算符得到了广泛的支持，适用于 Safari 8 及以上版本。caniuse - Jonas Äppelgran

扩展运算符在广泛支持的浏览器中使用，包括 Safari 8 及更高版本。caniuse - undefined

Answer 3

如果您正在使用ES6，可以使用[...selectors]语法，如下所示：

let getMappingList = function (list) {
  console.log(typeof list);

  for (let item of list) {
    console.log(item);
  }
  
  console.log("___________________");
  
  list.map(item => console.log(item));
};

getMappingList([...document.querySelectorAll("li")]);

<ul class="wrapper1" id="testDiv">
    <li class="cake">Carrots</li>
    <li class="cake">Cake</li>
    <li class="cake">Wheat</li>
    <li class="cake">Balloons</li>
</ul>

在获取列表后，我们还可以使用map函数，或使用for...of...语法循环遍历列表。

---

Array(...selectors)的用法与上述相同:

let getMappingList = function (list) {
  console.log(typeof list);

  for (let item of list) {
    console.log(item);
  }
  
  console.log("___________________");
  
  list.map(item => console.log(item));
};

getMappingList(Array(...document.querySelectorAll("li")));

<ul class="wrapper1" id="testDiv">
    <li class="cake">Carrots</li>
    <li class="cake">Cake</li>
    <li class="cake">Wheat</li>
    <li class="cake">Balloons</li>
</ul>

- Tân

Answer 4

我知道这是一个旧帖子，但在谷歌搜索结果中排名第一。所以这里有一个替代方案供需要的人使用。

我知道这是一个旧帖子，但在谷歌搜索结果中排名第一。所以这里有一个替代方案供需要的人使用。

let items = [].map.call(list, item => console.log(item));

- Itang Sanjana

Answer 5

我在项目中遇到了一个问题，如何在 nodelist 上（document.querySelectorAll 的结果）使用 .map，并通过使用 SPREAD 操作符从 nodelist 创建数组来解决它。

随着学习的深入，如果有错误，请不要犹豫指出。现代浏览器可以直接对 nodelist 执行 foreach 函数，但无法执行 map 函数，这很奇怪。

let list = document.querySelectorAll("li");
let items = [...list].map(elem => {
  console.log(elem);
})

<ul class="wrapper1" id="testDiv">
    <li class="cake">Carrots</li>
    <li class="cake">Cake</li>
    <li class="cake">Wheat</li>
    <li class="cake">Balloons</li>
</ul>

编辑：理解了代码片段的工作方式/传播而不是REST

- yericus