Javascript forEach / .map 显示未定义答案

【问题标题】：Javascript forEach / .map shows undefinedJavascript forEach / .map 显示未定义
【发布时间】：2016-07-24 05:51:41
【问题描述】：

当我运行这段代码时，在 Chrome 的源代码工具中，它显示第 7 行的 number = undefined (groceryList.forEach(function(number) {)。参数正在正确传递，如果我执行 console.log对于它正确显示的每个项目。与注释掉的 .map 部分有相同的问题，它与 foreach 执行相同的操作。

谁能告诉我我做错了什么？

//BUSINESS LOGIC

var alphabatize = function(item1,item2,item3,item4){
  groceryList = [item1,item2,item3,item4];
  groceryList.sort();
  upperGroceryList = []
  groceryList.forEach(function(number) {
    console.log(number);
    upperGroceryList.push(number.toUpperCase());
  });
  /* upperGroceryList = groceryList.map(function(grocery) {
    console.log(grocery);
    return grocery.toUpperCase();
  }); */
  return groceryList;
  return upperGroceryList;
};



// FRONT END

$(document).ready(function() {
   $("form#items-form").submit(function(event) {
     event.preventDefault();
     var item1 = $("input#item1").val();
     var item2 = $("input#item2").val();
     var item3 = $("input#item3").val();
     var item4 = $("input#item4").val();
     alphabatize(item1,item2,item3,item4);
     upperGroceryList.forEach(function(currentItem) {
       $("#display-list ul").append("<li>" + currentItem + "</li>");
     });
   });
})

【问题讨论】：

标签： javascript jquery foreach

【解决方案1】：

一个函数不能有两个 return 语句。相反，您可以返回一个包含两个数组的对象，例如：

  var obj = {
        groceryList : groceryList,
        upperGroceryList : upperGroceryList
  };

  return obj;

那么你可以这样使用：

  var arr = alphabatize(item1, item2, item3, item4);

  arr.upperGroceryList.forEach(function(currentItem) {
   $("#display-list ul").append("<li>" + currentItem + "</li>");
 });

【讨论】：

【解决方案2】：

这里有几件事。你的函数变量永远不会被定义。

var alphabatize = function(item1,item2,item3,item4){
                     var groceryList = [item1,item2,item3,item4], //use comma to define more than one with one var statement. 
                         upperGroceryList = []; //end var declaration with semicolon.

                         groceryList.sort();

                         groceryList.forEach(function(number) {
                                       console.log(number);
                                       upperGroceryList.push(number.toUpperCase());
                         });
  /* 
  You cannot have return more than once in a function.
  return groceryList;
  return upperGroceryList;
  */
};

你的 upperGroceryList forEach 函数也应该在 alphabatize 函数中。

所以完整的 alphabatize 函数应该如下所示。

var alphabatize = function(item1,item2,item3,item4){
                            var upperGroceryList = [],
                                groceryList = [item1,item2,item3,item4];

                            groceryList.sort();

                            groceryList.forEach(function(number) {
                                console.log(number);
                                upperGroceryList.push(number.toUpperCase());
                            });

                            upperGroceryList.forEach(function(currentItem) {
                              $("#display-list").append("<li>" + currentItem + "</li>");
                            });
                          };

我们的提交函数看起来像这样。

$(function(){
          $("#items-form").submit(function(event) {
              event.preventDefault();
              var item1 = $("#item1").val();
              var item2 = $("#item2").val();
              var item3 = $("#item3").val();
              var item4 = $("#item4").val();
              alphabatize(item1,item2,item3,item4);

          });

});

【讨论】：