gpt4 book ai didi

javascript - 将数组项打印到列表项中的更简单方法 (JavaScript)

转载 作者:行者123 更新时间:2023-11-30 08:27:14 25 4
gpt4 key购买 nike

正在做书中的一些练习。必须将数组项打印到列表元素中。

这是书中提供的解决方案。

<!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 循环并使用创建元素方法,并以这种方式将消息与它们一起打印出来,但没有成功。

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
}

}

有人对此有更简单的解决方案吗?

最佳答案

你可以使用奇特的数组操作函数,比如 mapjoin有效地构建 HTML 并操纵您的温度。一旦您理解了它背后的更高级别的方法(请参阅链接的 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>

关于javascript - 将数组项打印到列表项中的更简单方法 (JavaScript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43567079/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com