用javascript在表中显示多维数组值的最佳方法_Javascript_Multidimensional Array

用javascript在表中显示多维数组值的最佳方法

javascript

用javascript在表中显示多维数组值的最佳方法,javascript,multidimensional-array,Javascript,Multidimensional Array,我在程序下面创建的表中显示数组值时遇到问题。我已经创建了对象的实例和这些实例的数组。我使用for循环在表中显示值，但出现错误：有人能帮我确定问题吗预期产出：输出：功能巡航（巡航日期、巡航目的地、巡航URL、船舶名称、船舶描述、船舶URL、价格）{ this.cruise\u Date=巡航日期； this.cruise\u Destination=cruise\u Destination； this.cruise\u URL=cruise\u URL； this.ship\u Nam

我在程序下面创建的表中显示数组值时遇到问题。我已经创建了对象的实例和这些实例的数组。我使用for循环在表中显示值，但出现错误：有人能帮我确定问题吗

预期产出：

输出：


功能巡航（巡航日期、巡航目的地、巡航URL、船舶名称、船舶描述、船舶URL、价格）{
this.cruise\u Date=巡航日期；
this.cruise\u Destination=cruise\u Destination；
this.cruise\u URL=cruise\u URL；
this.ship\u Name=船舶名称；
this.ship\u Description=ship\u Description；
this.ship\u url=ship\u url；
this.price=价格
}
功能显示列表（邮轮日期、邮轮目的地、船名、价格）{
this.date=cruise\u date；
this.destination=巡航\目的地；
this.ship=船舶名称；
this.price=价格；
this.display=displayClass；
}
函数displayClass（）{
记录（本日期）；
文件。写入（此。目的地）；
文件。书写（本船）；
记录（本价格）；
}   
var myCruise=新邮轮（“2018年10月13日”），
"", 
“皇家加勒比”，
'$' + 179); 
var myCruise2=新邮轮（“2018年10月13日”，
"", 
“嘉年华灵感”，
'$' + 179); 
var myCruise3=新邮轮（“2018年10月13日”，
"", 
“迪士尼邮轮”，
'$' + 179); 
实例=新阵列（myCruise、myCruise2、myCruise3）；
列表=新数组（“出发”、“目的地”、“发货”、“价格来源”）；
对于（i=0；i<4；i++）{
文件。书写（“”+列表[i]+“”）；
}
对于（j=0；j<4；j++）{
编写（''+实例[j]+''）；
}

有几个问题我可以马上发现。首先，Cruise方法需要7个参数，但您只传递了4个，并且它们不匹配（例如，您将price值指定给name参数）：

功能巡航（巡航日期、巡航目的地、巡航URL、船舶名称、船舶描述、船舶URL、价格）{
[...]
var myCruise=新邮轮（“2018年10月13日”），
"", 
“皇家加勒比”，
'$' + 179);

接下来，一般建议不要使用document.write。我不想解释为什么，关于这一点有很多信息，虽然在这种情况下可能会起作用，但如果可以避免的话，这通常不是一个好的做法

既然您正在用JavaScript构建表内容，您是否考虑过将数据存储为JSON类型的对象，并使用ES6模板来显示它？这需要在页面中添加babel transpiler，但无论如何，这都是值得的，因为它能够利用现代JS/ES，并且可以让您做一些可读性更高的事情/m可以这样管理（如果您想要将数据推送到外部JSON文件中，这也会更容易）：

HTML:

JavaScript:

const Cruises = [
  {
    date: "13 Oct 2018",
    destination: "3 Night Bahmas cruise",
    url: "http://www.example.com",
    name: "Royal Caribbean",
    price: "179"
  },
  {
    date: "14 Oct 2018",
    destination: "4 Nights Baja Mexico Itinerary",
    url: "http://www.example.com",
    name: "Carnival Inspiration",
    price: "279"
  },
  {
    date: "15 Oct 2018",
    destination: "5 - Night Alaskan Cruise from Vancouver",
    url: "http://www.example.com",
    name: "Disney Cruise Line",
    price: "379"
  }  
];

const h = `<table border="", align="center", cellpadding="8" >
  <thead>
    <tr>
      <td>Departs</td><td>Destination</td><td>Ship</td><td>Price from</td>
    </tr>
  </thead>
  <tbody>
    ${
          Cruises.map(cruise => 
        `<tr>
          <td>${cruise.date}</td>
          <td><a href="${cruise.url}">${cruise.destination}</a></td>
          <td><a href="${cruise.url}">${cruise.name}</a></td>
          <td>$${cruise.price}</td>
         </tr>`
            )
    }
  </tbody>
</table>`;
document.querySelector('#cruise').innerHTML = h;

const巡航=[
{
日期：“2018年10月13日”，
目的地：“3晚巴哈马邮轮”，
url:“http://www.example.com",
名称：“皇家加勒比”，
价格：“179”
},
{
日期：“2018年10月14日”，
目的地：“4晚巴哈墨西哥行程”，
url:“http://www.example.com",
名称：“嘉年华灵感”，
价格：“279”
},
{
日期：“2018年10月15日”，
目的地：“从温哥华出发的5晚阿拉斯加邮轮”，
url:“http://www.example.com",
名称：“迪士尼邮轮”，
价格：“379”
}  
];
常数h=`
目的地发货价格
${
巡航地图（巡航=>
`
${cruise.date}
$${cruise.price}
`
)
}
`;
document.querySelector（'#cruise'）.innerHTML=h；

这是它的一部分

function Cruise(cruise_Date, cruise_Destination, cruise_URL, ship_Name, ship_Description, ship_url, the_price ) {
[...]
var myCruise = new Cruise("13 Oct 2018", 
            "<a href ='#'> 3 Night Bahmas cruise </a>", 
            "Royal Caribbean", 
            '$' + 179);

<html>
<head>
    <title></title>
</head>
<body>
  <div id="cruise"></div>
</body>
</html>

const Cruises = [
  {
    date: "13 Oct 2018",
    destination: "3 Night Bahmas cruise",
    url: "http://www.example.com",
    name: "Royal Caribbean",
    price: "179"
  },
  {
    date: "14 Oct 2018",
    destination: "4 Nights Baja Mexico Itinerary",
    url: "http://www.example.com",
    name: "Carnival Inspiration",
    price: "279"
  },
  {
    date: "15 Oct 2018",
    destination: "5 - Night Alaskan Cruise from Vancouver",
    url: "http://www.example.com",
    name: "Disney Cruise Line",
    price: "379"
  }  
];

const h = `<table border="", align="center", cellpadding="8" >
  <thead>
    <tr>
      <td>Departs</td><td>Destination</td><td>Ship</td><td>Price from</td>
    </tr>
  </thead>
  <tbody>
    ${
          Cruises.map(cruise => 
        `<tr>
          <td>${cruise.date}</td>
          <td><a href="${cruise.url}">${cruise.destination}</a></td>
          <td><a href="${cruise.url}">${cruise.name}</a></td>
          <td>$${cruise.price}</td>
         </tr>`
            )
    }
  </tbody>
</table>`;
document.querySelector('#cruise').innerHTML = h;