Question

我正在尝试学习JavaScript。我遇到以下声明：

hero.powers = [...form.powers].filter(box => box.checked).map(box => box.value);

我想知道“框”显然是指HTML页面中的复选框：

这是如何工作的？

Answer 1

要了解这一点，我们可以将其分解：

[...form.powers]

使用传播运算符（...）从form.powers（DOM元素的集合）创建一个数组，在这种情况下，它将是复选框DOM元素的数组。

.filter(box => box.checked)

此语句意味着遍历我们在上面创建的数组中的所有元素，在这种情况下，我们的元素是复选框，并且仅保留已选中的复选框。当我们从true回调（箭头函数）中返回.filter时，我们在告诉它将元素保留在数组中。这里的box是指数组中给定的元素（当我们遍历/迭代数组时，box从一个元素到另一个元素，或者更确切地说，从复选框到复选框）。 / li>

.map(box => box.value);

此函数现在将循环/迭代过滤后的数组（即，包含仅选中框的数组），并将其中的每个复选框映射/更改为该复选框的value。在.map中，将当前迭代的项目更改为其回调返回的内容。同样，在这种情况下，box代表当前迭代的项目，它是我们过滤后的复选框数组中的一个复选框。

总的来说：

hero.powers = [...form.powers].filter(box => box.checked).map(box => box.value);

将hero对象powers属性设置为标记的复选框值的数组。

有关.map()和.filter()的更多信息，请参见Array.prototype.filter()和Array.prototype.map()

Answer 2

form.powers可能是一个包含多个HTML输入元素的节点列表。传播语法[...form.powers]将节点列表更改为数组，因此可以在其上进行映射。然后，您将从这些输入中过滤新创建的数组，这些输入未被选中，因此仅保留这些选中的内容。最后，您正在映射它们的值，因此您将收到一个字符串数组，具体取决于在这些输入中编写的值。

简而言之：

[...form.powers]-传播语法将节点列表更改为数组
.filter(...)-摆脱未检查的输入
.map(...)-获取一个包含已检查输入值的数组

JavaScript箭头函数语法。 BOX作为过滤器如何工作？

2 个答案: