Question

我在嵌套for循环中打印2D数组时遇到问题。我在javascript中创建了对象，方法，数组和对象数组，现在我想通过使用for循环和2D数组来显示值。我尝试了我知道的方法，但我没有按照我的期望获得输出。谁能帮帮我吗？

code:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title> Trial </title>
    <script type="text/javascript">

        function item(item_name, item_taste, item_description) {
            this.name = item_name;
            this.taste = item_taste;
            this.description = item_description;    
            this.display = displayClass;
        }

        function displayClass(){
            document.documentElement.className = 'js';
            document.write(this.name);
            document.write(this.taste);
            document.write(this.item_description);
            document.write('<br />');
            }

            var myItem = new item("Pani Puri", "Spicy", "Crispy shells, Potatoes & Onions Served with sweet & chilled Tangy mintwater");   
            var myItem2 = new item("Aloo Tikki", "Spicy", "2 Whole Wheat Fried Breads Served With Potato Curry");  
            var myItem3 = new item("Papri chat", "Spicy", "Homemade chips, lentil dumplings, garbanzo bean, potato yogurt, chutney, onion & spices");

            var myItem4 = new item("Chicken Palak", "Meduim Spicy", "Boneless Chicken Cooked In Hot Spicy Sauce With Potatoes");
            var myItem5 = new item ("Chicken Korma", "Meduim Spicy", "Chicken In A Mild Creamy Sauce & Cashew Nuts");
            var myItem6 = new item("Chicken Masala", "Spicy", "Bite Sized Chicken Cooked In An Onion Based Sauce");

            var myItem7 = new item("Kheer", "Sweet", " Indian Rice Pudding Spiced With Cardamom");
            var myItem8 = new item("Rasmalai", "Sweet", "Made From Homemade Style Fresh Cheese In Sweetned Milk" );
            var myItem9 = new item("Gulab Jamun", "Sweet", "Sweet Round Shaped Pastry Fried & Soaked In Flavored Syrup");


            property = new Array("Varieties", "Taste", "Item Description");
            category = new Array("Chaats", "Chicken", "Dessert");

            chaats = new Array(myItem, myItem2, myItem3);
            chicken = new Array(myItem4, myItem5, myItem6);
            dessert = new Array(myItem7, myItem8, myItem9);

            var cat = new Array(chaats, chicken, dessert);

        </script>
       </head>
       <body>
        <table border="4", align="center", cellpadding="5", cellspacing="5" >            
           <thead>
                <tr>
                    <script type="text/javascript">                        
                           for (i = 0; i < 3; i++) {
                           document.write('<th>'+ property[i] +'</th>'); }

                    </script>
                </tr>
            </thead>
              <tbody>
                <tr>
                    <script type="text/javascript">
                        for (j = 0; j < 3; j++) {       
                            document.write("<th><tr>"  + category[j] + "</tr></th>");
                         for (k = 0; k < 3; k++) {
                            document.write("<td>" + cat[j][k] + "</td>");
                         }
                        }
                    </script>
                </tr>
            </tbody>
        </table>
      </body>
      </html>

预期产出：

输出：

Answer 1

您获得[object Object]，因为这是任何对象toString()的值。例如，如果您在Dev工具中将其键入JavaScript控制台，您将看到：

> var myObject = {hello: 'world'}
> myObject.toString()
"[object Object]"

您需要为item.prototype.toString添加定义，以确定您希望如何显示这些对象。例如，您可以使用以下代码段：

item.prototype.toString = function (category){
  return  '<tr><th>' + 
    category + ' </th><td>' +
    this.name + ' </td><td>' +
    this.taste + '</td><td>' +
    this.description + '</td></tr>';
}

然后修改最后一个脚本标记：

                    for (j = 0; j < 3; j++) {
                      for (k = 0; k < 3; k++) {
                        document.write( cat[j][k] ); // calls our item.toString() method
                      }
                    }

对于最终结果，如下所示（单击“运行代码段”以查看输出）：

 <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title> Trial </title>
    <script type="text/javascript">

        function item(item_name, item_taste, item_description) {
            this.name = item_name;
            this.taste = item_taste;
            this.description = item_description;    
            this.display = displayClass;
        }

item.prototype.toString = function (category){
  return  '<tr><th>' + 
    category + ' </th><td>' +
    this.name + ' </td><td>' +
    this.taste + '</td><td>' +
    this.description + '</td></tr>';
}

        function displayClass(){
            document.documentElement.className = 'js';
            document.write(this.name);
            document.write(this.taste);
            document.write(this.item_description);
            document.write('<br />');
            }

            var myItem = new item("Pani Puri", "Spicy", "Crispy shells, Potatoes & Onions Served with sweet & chilled Tangy mintwater");   
            var myItem2 = new item("Aloo Tikki", "Spicy", "2 Whole Wheat Fried Breads Served With Potato Curry");  
            var myItem3 = new item("Papri chat", "Spicy", "Homemade chips, lentil dumplings, garbanzo bean, potato yogurt, chutney, onion & spices");

            var myItem4 = new item("Chicken Palak", "Meduim Spicy", "Boneless Chicken Cooked In Hot Spicy Sauce With Potatoes");
            var myItem5 = new item ("Chicken Korma", "Meduim Spicy", "Chicken In A Mild Creamy Sauce & Cashew Nuts");
            var myItem6 = new item("Chicken Masala", "Spicy", "Bite Sized Chicken Cooked In An Onion Based Sauce");

            var myItem7 = new item("Kheer", "Sweet", " Indian Rice Pudding Spiced With Cardamom");
            var myItem8 = new item("Rasmalai", "Sweet", "Made From Homemade Style Fresh Cheese In Sweetned Milk" );
            var myItem9 = new item("Gulab Jamun", "Sweet", "Sweet Round Shaped Pastry Fried & Soaked In Flavored Syrup");


            property = new Array("Varieties", "Taste", "Item Description");
            category = new Array("Chaats", "Chicken", "Dessert");

            chaats = new Array(myItem, myItem2, myItem3);
            chicken = new Array(myItem4, myItem5, myItem6);
            dessert = new Array(myItem7, myItem8, myItem9);

            var cat = new Array(chaats, chicken, dessert);

        </script>
       </head>
       <body>
        <table border="4", align="center", cellpadding="5", cellspacing="5" >            
           <thead>
                <tr>
                  <th></th>
                    <script type="text/javascript">                        
                           for (i = 0; i < 3; i++) {
                             document.write('<th>'+ property[i] +'</th>'); }

                    </script>
                </tr>
            </thead>
              <tbody>
                <tr>
                    <script type="text/javascript">
                        for (j = 0; j < 3; j++) {       
                            // document.write("<tr><th colspan='3'>"  + category[j] + "</th></tr>");
                         for (k = 0; k < 3; k++) {
                            document.write( cat[j][k].toString(category[j]) );
                         }
                        }
                    </script>
                </tr>
            </tbody>
        </table>
      </body>
      </html>

Javascript：嵌套for循环到打印输出2D数组

1 个答案: