Question

简单数组声明：

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个元素（可乐和精灵）时，它会向cocacola_sodas数组中返回5个新元素。该数组将显示["Sprite", "Coke", undefined, undefined, undefined]。为什么返回未定义的值？

Answer 1

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

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

Answer 2

@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的更多信息。

Answer 3

要详细说明@ellipsis答案：之所以选择过滤器更好，是因为它会生成一个新的未从原始数组中过滤掉的项目数组。

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

地图可能看起来像这样：

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

显然，上面的内容已简化，但是您可以看到映射的数组中的项与原始数组一样多。由于在项不等于2的情况下不返回任何内容，因此您返回undefined，因此，为什么在示例中有多余的项。

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

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

4 个答案: