Javascript for each/.map显示undefined

Question

当我在inspect的Chrome源代码工具中运行此代码时，它表示第7行（groceryList.forEach（function（number）{））的number = undefined。参数正确传递并且如果我为每个项目做一个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>"); 
 
    }); 
 
    }); 
 
})

Answer 1

函数不能有两个返回语句。相反，你可以返回一个对象包含像两个数组：

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

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

      }); 

});