为什么 lodash _.filter 方法适用于 select 选项但不适用于 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 中对 select 选项使用过滤器吗？

Answer 1

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

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

Answer 2

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

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

Answer 3

在某些情况下，在DOM中你会收到一些看起来像数组的东西，但实际上并不是。所以在你的情况下 options 是类似数组的 HTMLOptionsCollection. To learn more about those objects, see this

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

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

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

Why lodash _.filter method works on select options but not vanilla js 's filter method?

javascript

ecmascript-5