代码之家 › 专栏 › 技术社区 › Pipo

为什么lodash u.filter方法对select选项有效,而不是vanilla js的filter方法?

ecmascript-5 javascript

Pipo · 技术社区 · 6 年前

当我想在选项对象上使用JS ES 5过滤方法时,代码贝娄会触发一个错误

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

JavaScript运行时错误:对象不支持属性或方法 “过滤器”

但是,如果我尝试了与代码相同的代码,一切都很好。

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

您知道为什么以及可能如何使用ECMA脚本5中的选择选项筛选吗?

3 回复 | 直到 6 年前

Luke 6 年前

在某些情况下,在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

Isaac 6 年前

在瓦尼利亚斯, filter 只是属于 Array ,因此当您尝试使用 滤波器 关于一个 object ,将得到一个错误。

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

JFord 6 年前

原因是,如果lodash是一个对象,它将自动按关键点进行过滤。试试这个:

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前