类数组有没有forEach方法?

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

前言

在看获取和操作dom节点章节的文章时，提到获取dom返回的类型是符合类数组的特性的，但是他们不是数组，不能使用数组的方法。比如filter、map等，但是我在文中举例的demo里看到有使用forEach方法。why?forEach不也是数组的方法吗？带着疑问写代码试一试并查看了一些文章。做以下总结

现象结果

• getElementByName // 返回的类型：NodeList
• getElementByTagName // 返回的类型： HTMLCollection
• getElementByClassName // 返回的类型： HTMLCollection
• querySelectorAll // 返回的类型：NodeList

注意：类数组不是一个类型，不要被混淆

<ul>
  <li>我是列表1</li>
  <li>我是列表2</li>
  <li>我是列表3</li>
  <li>我是列表4</li>
</ul>

<button class="change">变！</button>

<script>
  var lis = document.getElementsByTagName('li');
  var btn = document.querySelector('.change');

  btn.addEventListener('click', function() {
    lis.forEach(function(li, index) {
      li.innerText = index;
    });
  });
</script>
复制代码

var lis = document.querySelectorAll('li'); //不报错
复制代码

因此，NodeList有forEach方法，HTMLCollection没有forEach方法，那么NodeList有map和filter方法吗？

<ul>
  <li>我是列表1</li>
  <li>我是列表2</li>
  <li>我是列表3</li>
  <li>我是列表4</li>
</ul>

<button class="change">变！</button>

<script>
  var lis = document.querySelectorAll('li');
  var btn = document.querySelector('.change');

  btn.addEventListener('click', function() {
    lis.map(function(li, index) {
      li.innerText = index;
    });
  });
</script>
复制代码

报错了，因此nodeList只是有forEach，没有map、filter等

总结

获取dom节点返回的结果对象都没有map/filter等方法，但是返回的类型为NodeList时有forEach方法。因此类数组有没有forEach方法还是得看返回的具体对象类型。类数组不是一个类型，它只是一个概念。