为什么我不能对选择框的选项执行 forEach？答案

【问题标题】：Why can't I do forEach on a selection box's options?为什么我不能对选择框的选项执行 forEach？
【发布时间】：2015-11-01 19:36:21
【问题描述】：

这是控制台的一些输出，说明了我的问题

var a=document.createElement("select"); <ENTER>
undefined

a.appendChild(document.createElement("option"));  <ENTER>
<option></option>

a
<select>…</select>

a.options
[<option></option>]

a.options[0];
<option></option>

到目前为止，一切都很好。但是现在

我输入 a.options. 并输入 forEach 但我注意到 forEach 没有被列出。

 a.options.forEach(function() {});
VM1048:2 Uncaught TypeError: a.options.forEach is not a function
    at <anonymous>:2:11
    at Object.InjectedScript._evaluateOn (<anonymous>:905:140)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:838:34)
    at Object.InjectedScript.evaluate (<anonymous>:694:21)

然而 a.options 看起来像一个数组

而且 forEach 绝对适用于数组，没有错误。

a=[1,2];
[1, 2]
typeof a
"object"
a.forEach(function(){});
undefined

我猜选择框的选项可能不是数组.. 那么它们是什么？

我听说过'arguments' 伪数组。我想也许选择框的'options' 是这样的？ / 一些与数组语法相似的对象？

【问题讨论】：

进一步到user286的回答developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement

标签： javascript

【解决方案1】：

因为options 不是一个数组；这是一个HTMLCollection。因此它确实没有有一个forEach函数成员。

HTMLCollection 接口表示元素的通用集合（类似数组的对象）（按文档顺序），并提供用于从列表中进行选择的方法和属性。

可以将call 与Array.prototype.forEach 一起使用，因为HTMLCollection 类似于数组¹：

Array.prototype.forEach.call(options, function ..)

¹ HTMLCollection 接口有一个length 属性并允许通过索引器进行位置访问。

【讨论】：

有没有办法在代码中查看它是 HTMLCollection ？（因为我看到 typeof 只是说对象）。
@barlop 我会为此提出另一个问题；我不确定这样做的“好”方法。看看它是否类似于数组但不是数组？
stackoverflow.com/questions/7893776/… var a=document.getElementsByTagName("*"); Object.prototype.toString.call(a);
@barlop 哎呀。我搞砸了那个语法。在任何情况下，我仍然建议不“检查”特定类型，而是依赖duck typing 并正确遵守合同文件。例如，对于选项，与原始问题一样，Chrome 产生“[object HTMLOptionsCollection]”而不是更通用的“HTMLCollection”。此外，我不知道这些结果在浏览器之间是否一致（我觉得这在很大程度上取决于 W3C 和实现如何公开 DOM API）。
@barlop 基本上似乎不需要告诉它是什么“类型”的集合；除了可能 not 一个适当的数组。合同方法文档可以进一步要求“数组”或“类数组”对象将任何所需的转换过程推入调用者，并在使用站点作为合适类型的鸭子处理。

【解决方案2】：

user2864740给出的答案非常好。

我将举例说明如何根据提供的解决方案访问选项并在控制台中显示所有选项的文本内容：

var select = $('#selector_here');
Array.prototype.forEach.call(select.options, function(option, index) {
  console.log('option ' + (index + 1) + ':', option.textContent);
  /* do some required magic here */
});

【讨论】：