javascript - 为什么 lodash _.filter 方法适用于选择选项，但不适用于 vanilla js 的过滤方法？

Question

当我想在选项对象上使用 js es 5 过滤方法时，下面的代码会触发错误

var selectObject = element.querySelector(".selectorClass");
let defaultOption = selectObject .options.filter(option => {
         return option.value === "Wanted Value";
    })[0];

JavaScript runtime error: Object doesn't support property or method 'filter'

但是，如果我使用 _lodash 尝试相同的代码，一切都会正常

  var selectObject = element.querySelector(".selectorClass");
  var defaultOption = _.filter(selectObject .options, (option: any) => {
         return option.value === "Wanted Value";
  })[0];

您知道为什么以及如何在 ecma 脚本 5 中的选择选项上使用过滤器吗？

Answer 1

在某些情况下，在 DOM 中您会收到一些看起来像数组的东西，但实际上它不是。所以在你的情况下 options 是类似数组的，一个 HTMLOptionsCollection 。要了解有关这些对象的更多信息，请参阅此 question

要解决此问题，您可以将其切片为实际数组

const myOptions = Array.prototype.slice.call(selectObject.options)

参见https://hackernoon.com/htmlcollection-nodelist-and-array-of-objects-da42737181f9

如果您使用的是 es6，您还可以使用以下内容。

// Spread operator
[...selectObject.options].forEach(callback);

// Array.from()
Array.from(selectObject.options).forEach(callback);

// for...of statement
for (var option of selectObject.options) callback(option);

功劳归this gist