Java转JS开发者：如何查找接口实现类及可用于Array.from()的可迭代对象

一、常见的可迭代DOM类（可直接用于Array.from()） #

• HTMLCollection：document.getElementsByTagName()、document.getElementsByClassName()等方法返回的集合，支持迭代与类数组访问
• FileList：<input type="file">元素的files属性，用于获取选中的文件列表
• DOMTokenList：元素的classList、relList等属性，操作类名或关联关系时返回的集合
• CSSRuleList：CSSStyleSheet.cssRules返回的CSS规则集合
• NodeList：document.querySelectorAll()、element.childNodes等返回的节点列表（你已了解该类型）

二、用代码检测可迭代DOM对象 #

Array.from()兼容两类对象：实现Symbol.iterator的可迭代对象，或带length属性的类数组对象。若仅关注可迭代对象，可使用以下检测函数：

function isIterableDOMObject(obj) {
  return typeof obj === 'object' && obj !== null 
    && typeof obj[Symbol.iterator] === 'function';
}

快速验证示例 #

拿到目标DOM对象后直接验证：

// 检测HTMLCollection
const divs = document.getElementsByTagName('div');
console.log(isIterableDOMObject(divs)); // true

// 检测FileList
const fileInput = document.querySelector('input[type="file"]');
if (fileInput) {
  console.log(isIterableDOMObject(fileInput.files)); // true
}

三、批量查找全局DOM中的可迭代类 #

可遍历window对象下的DOM相关构造函数，通过原型检测是否实现迭代器：

function findIterableDOMClasses() {
  const iterableClasses = [];
  // 筛选HTML/DOM/CSS开头的DOM构造函数
  for (const key in window) {
    if (/^(HTML|DOM|CSS)/.test(key)) {
      const Constructor = window[key];
      if (Constructor?.prototype) {
        if (typeof Constructor.prototype[Symbol.iterator] === 'function') {
          iterableClasses.push(key);
        }
      }
    }
  }
  return iterableClasses;
}

// 执行并打印结果
console.log(findIterableDOMClasses());

注：部分DOM构造函数无法直接实例化，但通过原型检测可判断其生成的实例是否具备可迭代能力。

补充说明 #

• 若DOM对象是类数组（含length属性）但不可迭代，Array.from()仍可完成转换，但你需求的是可迭代对象，因此重点检测Symbol.iterator即可
• 现代浏览器中，绝大多数DOM集合类已实现迭代器，上述方法可覆盖绝大多数场景

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