Javascript .map（）正在将不需要的未定义值存储到新数组中

简单数组声明：

let sodas = ["Sprite", "Coke", "Mountain Dew", "Dr. Pepper", "Sunkist"];

我想使用.map函数创建一个新数组，其中包含仅由CocaCola公司拥有的苏打水，然后在控制台中显示此新数组-

let cocacola_sodas = sodas.map(soda => {
  if ((soda == "Coke") || (soda == "Sprite")) {
    return soda;
  }
})

console.log(cocacola_sodas);

---

这段代码似乎有效，但我不确定为什么它会将5个新元素返回到cocacola_sodas数组中，而其中只有2个应该返回coke和sprite。数组将显示[Sprite，Coke，undefined，undefined，undefined]。为什么它返回未定义的值

使用过滤器而不是贴图。它是在这种情况下制造或使用的。正如其他答案所指出的，映射将始终返回与输入数组中存在的元素数相同的元素数

让苏打水=[雪碧，可乐，山露，胡椒博士，桑基斯特]； 让cocacola_苏打水=苏打水{ 如果苏打水==可乐| |苏打水==雪碧{ 返碱； } }

---

console.logcocacola_苏打水 要详细说明@省略号答案： 这里过滤器更好的原因是，它正在生成一个新的项目数组，而不是从原始数组中过滤出来

映射之所以给您显示结果，是因为它不是过滤，而是更改每个元素并将其提供给结果数组。我认为一个代码示例将有助于澄清

地图在引擎盖下可能看起来像这样：

var array = ['one', 'two', three];
var mapFunc = function(item) {
    if(item == 'two')
        return item;
};
var mappedArray = [];
for(var i = 0; i < array.length; i++)
    mappedArray.push(mapFunc(array[i]));

---

显然，上面的内容已简化为清晰的内容，但正如您所看到的，映射数组中的项与原始数组中的项一样多。由于在item不等于2的情况下不返回任何内容，因此返回undefined，这就是为什么在示例中有额外的项。

@awoldt，为了帮助您了解实际发生的情况，Array.prototype.map将始终将相同数量的元素从输入数组返回到新数组

所以最好的方法是给map一个包含x个元素的数组，不管你对传递给map的块中的元素做了什么，它都会在新数组中返回x个元素

正如所建议的，类似于filter/reduce的东西将返回一个新数组，其中只包含满足您在传递给这些助手的块中设置的条件的元素

您可以在MDN上阅读有关map和所有Array.prototype.methods的更多信息。includes方法确定数组的条目中是否包含某个值，并根据需要返回true或false

让苏打水=[雪碧，可乐，山露，胡椒博士，桑基斯特]； 让可口可乐=[可乐，雪碧]； 让cocacola_sodas=sodas.filtersoda=>cocacola.IncludeSoda

---

console.logcocacola_苏打水；因为这就是映射函数为这些元素返回的结果。