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

【问题标题】：Why lodash _.filter method works on select options but not vanilla js 's filter method?为什么 lodash _.filter 方法适用于选择选项，但不适用于 vanilla js 的过滤方法？
【发布时间】：2018-06-19 15:28:38
【问题描述】：

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

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

JavaScript 运行时错误：对象不支持属性或方法 '过滤'

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

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

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

【问题讨论】：

标签： javascript ecmascript-5

【解决方案1】：

在某些情况下，在 DOM 中您会收到一些看起来像数组的东西，但实际上并非如此。因此，在您的情况下，options 类似于数组，即HTMLOptionsCollection。要了解有关这些对象的更多信息，请参阅question

要解决此问题，您可以将其slice 设置为实际数组

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

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

如果你使用的是es6，你也可以使用following。

// 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

【讨论】：

【解决方案2】：

在 VanillaJS 中，filter 只是属于Array 的一个方法，因此当您尝试在object 上使用filter 时，会出现错误。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

【讨论】：

其实我们这里说的不是对象，而是dom中的那些类数组对象。所以在他的例子中，他说的是options，它类似于数组，而不是真正的对象。
@Luke 不太明白你说的array-like是什么意思，我只知道JS中有一个有限的原始Types
查看 NodeList。您可以对其进行迭代，但它不是数组。它之所以被称为类数组，是因为它可能实现迭代器。 @见stackoverflow.com/questions/29707568/…

【解决方案3】：

原因是lodash如果是对象会自动按key过滤。试试这个：

Object.keys(selectObject.options).filter( key => 
    selectObject.options[key] === 'Wanted Value');

【讨论】：