jon*_*puc 1 javascript arrays loops
通过书中的一些练习。必须将数组项打印到列表元素中。
这是本书提供的解决方案。
<!doctype html>
<html lang="en">
<head>
<title>Temperatures</title>
<meta charset="utf-8">
<script>
function showTemps() {
var tempByHour = new Array();
tempByHour[0] = 59.2;
tempByHour[1] = 60.1;
tempByHour[2] = 63;
tempByHour[3] = 65;
tempByHour[4] = 62;
for (var i = 0; i < tempByHour.length; i++) {
var theTemp = tempByHour[i];
var id = "temp" + i;
var li = document.getElementById(id);
if (i == 0) {
li.innerHTML = "The temperature at noon was " + theTemp;
} else {
li.innerHTML = "The temperature at " + [i] + " was " + theTemp;
}
}
}
window.onload = showTemps;
</script>
</head>
<body>
<h1>Temperatures</h1>
<ul>
<li id="temp0"></li>
<li id="temp1"></li>
<li id="temp2"></li>
<li id="temp3"></li>
<li id="temp4"></li>
</ul>
</body>
</html>我一开始尝试反对这本书的解决方案，并尝试只使用 for 循环并使用 create element 方法，并以这种方式将消息与它们一起打印出来，但没有运气。
var messageGen = function() {
var forecastByHour = [32, 15, 19, 25, 21];
for (var i =0; i <= forecastByHour.length; i++) {
var temp = forecastByHour[i];
var message = "On the " + [i] + " hour the expected forcase is to be" + temp;
var listItems = document.createElement("li");
listItems.innerHTML = message
}
}
有人对此有更简单的解决方案吗？
您可以使用像map和 之类的奇特的数组操作函数join来有效地构建 HTML 并操作您的temperatures. 一旦您了解其背后的高级方法（请参阅链接的 MDN 文档页面），此代码将比发布的解决方案更容易理解。
function showTemperatures() {
var temperatures = [59.2, 60.1, 63, 65, 62].map(function (t, i) {
return 'The temperature at ' + (i || 'noon') + ' was ' + t
})
document.getElementById('temperatures').innerHTML =
'<li>' + temperatures.join('</li><li>') + '</li>'
}
showTemperatures()<h1>Temperatures</h1>
<ul id="temperatures"></ul>