Javascript 过滤器功能 - 试图正确理解它

Question

我需要一些帮助来阐明我应该如何使用过滤器。

以下工作正常:

let nums = [10, 12, 15, 20]
nums.filter(num => num > 14)

结果 = [15, 20]

如果我理解正确，我将传入一个以 num 作为参数的函数。

这就是一切变得困惑的地方(请记住，我不是高级 js 程序员)

我有一个html元素数组

let fields = document.getElementsByClassName("f-field")

返回数组中的每个元素都包含一堆其他 html 元素，它看起来像这样。

<div class="f-field">
     <textarea id="9008" name="Logo"></textarea>
</div>

内部 HTML 可以是文本区域、选择、输入等等......

我试过了，上面写着

“fields.filter 不是函数”

fields.filter(field => field.getElementsByName("Logo"))

我假设过滤器不适用于 html 元素数组。还是我做错了？

提前致谢，我正在尝试真正理解 javascript

Answer 1

DOM 查询方法，如 getElementsByClassName和 querySelector返回类似于数组但实际上数组的集合(HTMLCollection、NodeList)。它们具有可以迭代的编号键和长度属性，但不支持像 filter 这样的数组泛型。 , forEach或 map .

您可以使用 array = Array.from(source) 将类似数组的对象转换为数组.如果您正在编写 ES6，您还可以使用扩展运算符:array = [...source]

因此，您可以编写如下代码:

let fields = document.querySelectorAll('.f-field');
logos = Array.from(fields).filter(field => field.getElementsByName('logo'));

话又说回来，当你可以直接将 CSS 选择器传递给 querySelectorAll 时，为什么还要进行所有过滤和遍历？ ？例如

let logos = Array.from(document.querySelectorAll('.f-field [name="logo"]'));