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

      }); 

});