Question

当我想在选项对象上使用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中的选择选项上使用过滤器吗？

Answer 1

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

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

Answer 2

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

要解决此问题，您可以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

Answer 3

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

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

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

3 个答案: