JavaScript 开发人员如何找到接口的实现类？

Question

我正在学习 JavaScript，我来自 Java。

Java 开发人员可以轻松评估接口的有用性，因为所有已知的实现类都有文档记录。请点击这里查看示例。

在 JavaScript 中情况并非如此。例如，对于可迭代对象，下面的链接仅显示了几个可迭代对象的示例。它们没有显示所有实现内置和 DOM 类。 （例如，他们提到“NodeList 等集合类型也是可迭代的”。那么，除了 NodeList 之外，我如何才能找到其他可迭代的 DOM 类？是否有一些 JS 代码可以运行来实现这一点？谢谢！）

JavaScript 开发人员如何找到接口的实现类？

谢谢！

关于可迭代对象的 MDN 文档：

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#built-in_iterables

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Iterator#description

更新一：

我正在寻找的是可以进入 Array.prototypoe.from() 的第一个参数的可迭代对象。谢谢！

Answer 1

好吧，当谈到内置类时，我们最接近“接口”的可能是众所周知的符号，它告诉我们一个类是否实现了某些东西：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol#well-known_symbols

我们可以得到globalThis对象的所有属性（在浏览器中与Window对象相同，在Node.js中不同），大多数是类是不可枚举的，所以我们必须使用Object.getOwnPropertyNames.

然后我们可以遍历它们并查看它们的原型是否是 iterable - 具有众所周知的符号 Symbol.iterator.

我们现在将获得创建可迭代实例的类的广泛列表。

function getIterableClasses() {
  let classNames = [];
  let builtIn = Object.getOwnPropertyNames(globalThis);
  for (let x of builtIn) { 
    try {
      let object = globalThis[x].prototype;
      object[Symbol.iterator] && classNames.push(x);
    }
    catch (e) { }
  }
  return classNames.sort();
}

let c = getIterableClasses();
console.log('Found ' + c.length + ' iterable classes');
console.log(c.join('\n'));

这段代码报告了 68 个在 Chrome 中创建可迭代对象的内置类，在 Firefox 中有 58 个，在 Safari 中有 57 个（Mac 上浏览器的最新版本，2023 年 5 月 6 日）。所以有很多这样的课程。

注意： 在 Node.js 中，列表要小得多，因为它具有更模块化的结构（需要/需要时导入模块）并且没有任何与 DOM 相关的类，但您仍然有 19 个不同的Node.js 中具有可迭代实例的类：Array、BigInt64Array、BigUint64Array、Buffer、Float32Array、Float64Array、FormData、Headers、Int16Array、Int32Array、Int8Array、Map、Set、String、URLSearchParams、Uint16Array、Uint32Array、Uint8Array、Uint8ClampedArray。

一位老师对另一位老师的个人想法： 如果你的目的是教授基本的 JavaScript，我认为你在学习所有这些课程时都会对你自己和你的学生不利。而是关注一些基础知识：数组是可迭代的，字符串是可迭代的，NodeLists 是（以及如何使用 querySelectorAll 来获取 NodeLists）。事实上，您可以通过将任何可迭代对象扩展到数组 [...iterable] 中将其转换为数组这一事实通常很有用，因为您可以在其上使用标准数组方法（如 map、filter、reduce）。

另外：将可迭代对象传播到数组中 [...iterable] 与 Array.prototype.from 做的事情大致相同，但以更短的“JS-nesque”方式。

Answer 2

此列表是从 Chrome v112 生成的（使用 Thomas Frank 的程序）：

数组
音频参数映射
BigInt64Array
BigUint64Array
CSSKeyframesRule
CSSNumericArray
CSS规则列表
CSSStyleDeclaration
CSSTransformValue
CSSUnparsedValue
自定义状态集
DOMRectList
DOMStringList
DOMTokenList
数据传输项列表
事件计数
文件列表
Float32Array
Float64Array
表单数据
HTMLAllCollection
HTML集合
HTMLFormControlsCollection
HTMLFormElement
HTMLOptionsCollection
HTML选择元素
标题
亮点
突出显示注册表
图像轨道列表
Int16Array
Int32Array
Int8Array
KeyboardLayoutMap
MIDI 输入映射
MIDI输出映射
地图
MediaKeyStatusMap
媒体列表
MimeType数组
命名节点映射
节点列表
插件
插件数组
RTCStatsReport
无线电节点列表
SVGLengthList
SVG数字列表
SVG点列表
SVG字符串列表
SVG变换列表
设置
SourceBufferList
字符串
样式属性图
StylePropertyMapReadOnly
样式表列表
TextTrackCueList
文本轨道列表
触控列表
URLSearchParams
Uint16Array
Uint32Array
Uint8Array
Uint8ClampedArray
XRAnchorSet
XRInputSourceArray
webkitSpeechGrammarList