將數組項目打印到列表項目（JavaScript）中的更簡單的方法

在書中進行一些練習。必須將數組項打印到列表元素中。將數組項目打印到列表項目（JavaScript）中的更簡單的方法

這是本書提供的解決方案。

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

}

人有一個簡單的解決方案呢？

來源

2017-04-23 jonathanpuc

你已經展示了可以工作的代碼，提到了一個抽象代碼，沒有提供代碼，並希望得到你沒有發佈的代碼的幫助 - 祝你好運......還有，你使用「print」這個詞 - 沒有任何東西將會「打印」任何東西的代碼 –

您可以使用像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>

來源

2017-04-23 03:43:25 gyre

哦，這看起來確實很漂亮。一定會看看它，謝謝！ – jonathanpuc

很高興幫助！祝你好運與你的其他項目:) – gyre

這是我會怎麼處理這個問題：

使數據的數組。
創建一個函數來根據參數生成一個li。
使用for循環將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循環，而不是地圖或foreach循環。如果您使用不同的方法進行基準測試，for循環的速度比forEach循環要快80％，比映射快012％。

來源

2017-04-23 03:53:00

'forEach'和'map'的性能可能會稍差，但對於大多數應用程序來說，速度的損失比增加的可讀性補償更多。 – gyre

嘿！將這個放在我的後兜裏。謝謝！ – jonathanpuc

我知道在這種情況下我們正在談論毫秒級的分數，但它確實會累加某些情況。如高流量的Web API。我個人總是試着去找我能夠找到的性能最高的代碼，因爲如果你對它們進行了很好的構建，循環相當容易閱讀。 –

將數組項目打印到列表項目（JavaScript）中的更簡單的方法

回答

相關問題