从HTML元素NodeList提取值的其他方法及代码语法疑问

关于[].map.call里call的作用 #

你猜的没错，call在这里的核心作用就是把数组的map方法的this指向改成querySelectorAll返回的NodeList。

因为querySelectorAll返回的是NodeList（类数组对象），早期JavaScript里NodeList没有自带map方法，所以我们需要借用数组原型上的map方法。[].map其实是Array.prototype.map的简写，通过call把map内部的this绑定到目标NodeList上，这样map就能遍历这个类数组里的每一个元素了。

更易懂的替代实现 #

下面几种写法都能达到同样效果，对新手更友好：

1. 使用Array.from()（推荐，ES6+） #

Array.from()可以直接把类数组对象（比如NodeList）转换成真正的数组，之后就能直接调用数组的map方法：

const titlesArray = Array.from(cartItemsContainer.querySelectorAll(".cart-item-title"))
  .map(el => el.innerText);

2. 使用扩展运算符...（ES6+） #

扩展运算符能把类数组展开成数组元素，再转成数组：

const titlesArray = [...cartItemsContainer.querySelectorAll(".cart-item-title")]
  .map(el => el.innerText);

3. 基础for循环（最直观，适合理解遍历逻辑） #

如果想彻底搞清楚遍历过程，用普通for循环最直接：

const titleElements = cartItemsContainer.querySelectorAll(".cart-item-title");
const titlesArray = [];
for (let i = 0; i < titleElements.length; i++) {
  titlesArray.push(titleElements[i].innerText);
}

注：现代浏览器里的NodeList已经自带forEach方法，但仍没有map，如果想用类似遍历方式，也可以通过forEach配合数组push实现，但前面两种转数组的写法更简洁。

内容的提问来源于stack exchange，提问作者ncruz89