.map() 将不需要的未定义值存储到新数组中[重复]答案

【问题标题】：.map() is storing unwanted undefined values into new array [duplicate].map() 将不需要的未定义值存储到新数组中[重复]
【发布时间】：2019-07-23 20:08:34
【问题描述】：

简单的数组声明：

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

我想用.map()函数创建一个包含只有可口可乐公司所有的汽水的新数组，然后在控制台中显示这个新数组-

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

console.log(cocacola_sodas);

这段代码似乎有效，但我不确定为什么当只返回 2 个元素（可乐和雪碧）时，它会将 5 个新元素返回到 cocacola_sodas 数组中。该数组将显示["Sprite", "Coke", undefined, undefined, undefined]。为什么它返回未定义的值？

【问题讨论】：

因为这是映射函数为这些元素返回的内容。

标签： javascript arrays function return

【解决方案1】：

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

所以最好的考虑方法是给 map 一个包含 x 个元素的数组，无论你对传递给 map 的块内的那些元素做了什么，它总是会返回 X # 个新数组中的元素。

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

您可以在 MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map 阅读有关 map 和所有 Array.prototype.methods 的更多信息

【讨论】：

【解决方案2】：

使用过滤器代替地图。它是在这种情况下制造或使用的。正如其他答案所指出的那样，地图将始终返回与输入数组中相同数量的元素

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

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

【讨论】：

【解决方案3】：

详细说明@ellipsis 答案：过滤器在这里更好的原因是因为它正在生成一个新的项目数组，而不是从原始数组中过滤出来。

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

地图可能看起来像这样：

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]));

显然，为了清楚起见，上面的内容被简化了，但正如您所见，映射数组中的项目与原始数组一样多。由于您在 case item 不等于 2 的情况下不返回任何内容，因此您返回 undefined，因此您的示例中有额外的项目。

【讨论】：

【解决方案4】：

includes() 方法确定数组是否在其条目中包含某个值，并根据需要返回 true 或 false。

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

let cocaCola = ["Coke","Sprite"];

let cocacola_sodas = sodas.filter(soda => cocaCola.includes(soda))

console.log(cocacola_sodas);

【讨论】：