为何该数组以此方式填充？React多选Select代码疑问

嘿，我来帮你理清楚这段代码里数组填充的逻辑：

首先，咱们拆解代码里的关键步骤：

1. 获取options集合：event.target.options是一个类数组的HTMLCollection，包含了当前<select>下所有的<option>元素。
2. 提取索引键值：Object.keys(options)会把这个类数组对象的键（也就是每个option的位置索引，比如"0"、"1"这种字符串类型的索引）提取出来，形成一个数组。
3. 遍历判断选中状态：用map遍历这些索引时，只有当对应option的selected属性为true（用户选中了该选项），才会返回它的value；如果没选中，这个回调函数没有返回值，map就会自动给数组的对应位置填充undefined。

举个实际例子：假设你的<select>有3个选项，用户选中了第1和第3个，那最终的values数组会是["西柚味", undefined, "柠檬味"]——没被选中的位置就会是undefined。

其实这段代码可以优化一下，避免数组里出现undefined，比如直接把options转成数组后先过滤再取值：

handleChange = (event) => {
  const values = Array.from(event.target.options)
    .filter(option => option.selected)
    .map(option => option.value);
  console.log(values);
}

这样得到的数组就只会包含被选中的选项值，干净很多～

内容的提问来源于stack exchange，提问作者Colin Burke