Javascript forEach / .map显示未定义

时间:2016-07-24 05:51:41

标签: javascript jquery foreach

当我运行此代码时,在检查中的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>");
     });
   });
})

2 个答案:

答案 0 :(得分:0)

您不能从函数中获得两个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>");
 });

答案 1 :(得分:0)

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

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

          });

});