Question

在书中进行一些练习。不得不将数组项打印到列表元素中。

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

<!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
}

}

任何人都有一个更简单的解决方案吗？

Answer 1

您可以使用花哨的数组操作函数（如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>

Answer 2

这就是我如何处理这个问题：

制作一组数据。
根据参数创建一个生成li的函数。
使用for循环将lichi li附加到目标ul元素。

var tempByHour = [ 59.2, 60.1, 63, 65, 62 ];

function createLi(temp, i) {
    var li = document.createElement("LI");
    
    if (i === 0) {
        li.innerText = "The temperature at noon was " + temp;
    } else {
        li.innerText = "The temperature at " + i + "was " + temp;
    }
    
    return li;
}

var i,
    len = tempByHour.length,
    target = document.getElementById("temps");

for (i = 0; i < len; i++) {
    target.appendChild(createLi(tempByHour[i], i));
}

<h1>Temperatures</h1>
<ul id="temps"></ul>

我使用for循环而不是map或forEach循环。如果你对不同的方法进行基准测试，那么for循环比map＆amp;比每个循环快〜80％。

将数组项打印到列表项中的简单方法（JavaScript）

2 个答案: