JavaScript箭头函数语法。盒子作为过滤器是如何工作的？

我正在努力学习JavaScript。我看到了以下声明：

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

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

---

这是如何工作的？

表单.powers可能是一个包含多个HTML输入元素的节点列表。扩展语法

[…form.powers]

将节点列表更改为一个数组，因此您可以在其上进行映射。然后从这些输入中筛选新创建的数组，这些输入未被选中，因此只保留这些选中的输入。最后，您正在映射它们的值，因此您将收到一个字符串数组，这取决于在这些输入中写入了什么值

简言之：

• […form.powers]

  -扩展语法将节点列表更改为数组

• .filter（…）

  -清除未检查的输入

• .map（…）

  -获取包含选中输入值的数组

---

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

[…form.powers]

• 使用扩展语法（

  …

  ）从

  表单创建数组。powers

  （DOM元素的集合），在这种情况下，它将是一个复选框DOM元素的数组

.filter（box=>box.checked）

• 此语句意味着遍历我们在上面创建的数组中的所有元素，在本例中，我们的元素是复选框，只保留选中的复选框。当我们从

  .filter

  回调（箭头函数）中返回

  true

  时，我们告诉它将元素保留在数组中。这里，

  box

  是指数组中的给定元素（当我们遍历/迭代数组时，

  box

  在元素之间变化，或者更准确地说，在复选框之间变化）

.map（box=>box.value）


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

因此，总体而言：

hero.powers=[…form.powers].filter（box=>box.checked）.map（box=>box.value）

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

有关
.map（）
和
.filter（）
嗨的更多信息，请参阅和。只是想知道“盒子”。这是从哪里来的？它是否自动引用表单中的复选框？是的，基本上是这样。但是，当您执行
form.powers
时，您基本上拥有这些复选框的集合。然后我们使用
[…form.powers]
将其转换为数组，这样我们就可以在其上使用
.map
.filter
等。。。一般来说，如果查看
.filter
，它会接受一个
回调
，该回调接受您查看的数组中的元素作为其第一个参数。例如：
[1,2,3]。过滤器（num=>num==1）
。这里
num
只是指数组
[1,2,3]
中的一个元素。同样的想法也适用于您的复选框。例如：
[checkbox\u obj1，checkbox\u obj2，checkbox\u obj3].filter（box=>box.checked）
，因此在这种情况下，
box
引用数组中的
checkbox
元素
box
只是传递到
filter
和
map
方法的回调函数中的变量名<代码>框
仅指正在处理的数组中的当前元素，但它可以命名为任何名称。谢谢！现在明白了。