Javascript 为什么这个数组是这样填充的？

我从中获得了以下代码。唯一的区别是我使用的是多重选择：

class App extends React.Component {
  handleChange = (event) => {
    const { options } = event.target;
    const keys = Object.keys(options)
    let values = keys.map(k => {
      if (options[k].selected) {
        return options[k].value
      }
    });

    console.log(values);
  }

  render() {
    return (
      <form>
        <label>
          Pick your favorite La Croix flavor:
        </label>
        <select multiple onChange={this.handleChange}>
          <option value="grapefruit">Grapefruit</option>
          <option value="lime">Lime</option>
          <option value="coconut">Coconut</option>
          <option value="mango">Mango</option>
        </select>
      </form>
    );
  }
}

为什么

值

数组是这样填充的，而不仅仅是

[“lime”]

示例代码

更新

---

这似乎是StackBlitz的某种问题，因为它与JSFIDLE和CodeSandbox的预期一样工作。我打开了一个问题。谢谢你的回答

你不应该留下对象（我不是），我得到的是未定义的。这是因为您映射了所有元素，而对于未选择的元素，您没有返回任何内容（因此返回的是未定义的）

您可以过滤掉那些未定义的项目：

const values = keys
  .filter(k => options[k].selected)
  .map(k => options[k].value);

或者，您可以使用reduce在一次操作中完成此操作：

const values = keys.reduce((arr, k) =>
  options[k].selected ? [...arr, options[k].value] : arr, []
);

---

或者，如果条件满足，您可以使用传统的循环并推送到数组。

您不应该留下Object（我不是），我得到的是未定义的。这是因为您映射了所有元素，而对于未选择的元素，您没有返回任何内容（因此返回的是未定义的）

您可以过滤掉那些未定义的项目：

const values = keys
  .filter(k => options[k].selected)
  .map(k => options[k].value);

或者，您可以使用reduce在一次操作中完成此操作：

const values = keys.reduce((arr, k) =>
  options[k].selected ? [...arr, options[k].value] : arr, []
);

---

或者，如果满足条件，您可以使用传统的循环并推送到数组。

我已经在JSFIDLE上运行了您的代码，并且我只在日志中获得未定义的值，因为如果未选中，map函数将返回未定义的值

let values = keys.map(k => {
  if (options[k].selected) {
    return options[k].value
  }
});

---

返回

[undefined，“lime”，undefined，undefined]

我已经在JSFIDLE上运行了您的代码，并且我只在日志中获得了未定义的值，因为map函数在未选中时返回undefined

let values = keys.map(k => {
  if (options[k].selected) {
    return options[k].value
  }
});

---

返回

[undefined，“lime”，undefined，undefined]

对代码的小修改，如果未选择，则返回空白值，然后在末尾应用过滤器

class App extends React.Component {
  handleChange = (event) => {
    const { options } = event.target;
    const keys = Object.keys(options)
    let v=''; 
    let values = keys.map(k => {
      if (options[k].selected) {
         v=options[k].value
      }
      else{
        v='';
      }
      return v
    })

    console.log(values.filter(x => x != ''));
  }

---

对代码进行小的修改，如果未选择，则返回空白值，然后在末尾应用过滤器

class App extends React.Component {
  handleChange = (event) => {
    const { options } = event.target;
    const keys = Object.keys(options)
    let v=''; 
    let values = keys.map(k => {
      if (options[k].selected) {
         v=options[k].value
      }
      else{
        v='';
      }
      return v
    })

    console.log(values.filter(x => x != ''));
  }

---

在

映射

回调中，并不总是返回值，因此会生成

未定义的

值

您可以链接

数组。从

，

筛选

和

映射

：

let values = Array.from(event.target.options)
                  .filter(opt => opt.selected)
                  .map(opt => opt.value);

---

在

映射

回调中，并不总是返回值，因此会生成

未定义的

值

您可以链接

数组。从

，

筛选

和

映射

：

let values = Array.from(event.target.options)
                  .filter(opt => opt.selected)
                  .map(opt => opt.value);

---

因为您使用

keys.map（

，仅供参考，您可以使用该属性来获取所需的列表。不过，IE需要一个polyfill。因为您使用

keys.map（

，仅供参考，您可以使用该属性来获取所需的列表。不过，IE需要一个polyfill。我认为首先使用

.filter（）会更明智一些

，然后是

.map（）

…

键.filter（k=>options[k].selected）.map（k=>options[k].value）

奇怪，我没有得到

未定义的

，因为。奇怪，你使用的是什么浏览器/版本，对象的值是什么？我在你的示例中没有得到定义stackblitz@DominicTobias非常奇怪！我正在使用Google Chrome版本66.0.3359.117（官方版本）（64位）@DominicTobias关于incognito的事情也是一样！奇怪。我在他们的GitHub代表处发现了一个问题。谢谢你的帮助！我想先

.filter（）

，然后

.map（）

…

keys.filter（k=>options[k].selected）。map（k=>options[k].value）会更明智一些

奇怪，我没有得到

未定义的

，因为。奇怪，你使用的是什么浏览器/版本，对象的值是什么？我在你的示例中没有得到定义stackblitz@DominicTobias非常奇怪！我正在使用Google Chrome版本66.0.3359.117（官方版本）（64位）.@DominicTobias关于incognito的事情也是一样！奇怪。我在他们的GitHub代表处发现了一个问题。谢谢你的帮助！奇怪，我没有得到

未定义的

，因为。我想是的，我根本不应该返回对象^^奇怪，我没有得到

未定义的

，因为。我想是的，我根本不应该返回对象^^