配列項目をリスト項目に簡単に印刷する（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ループを使用して、ターゲットul要素にliを追加します。私は、ループの代わりに、マップやforeach文で使用

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ループはfor eachループよりもマップが&〜80％速く、〜60％高速です。

出典

2017-04-23 03:53:00

'forEach'と' map'は若干性能が劣るかもしれませんが、ほとんどのアプリケーションでは、速度の損失は追加された読みやすさで補う以上のものです。 – gyre

Gotcha！これをバックポケットに入れておきます。ありがとうございました！ – jonathanpuc

私は、この状況では1ミリ秒の割合で話していることを知っていますが、それは特定の状況を追加します。高トラフィックのWeb APIなど。私は個人的には、常に実行可能なコードを正しく実行しようとしています。なぜなら、ループをうまく構築すれば、ループは読みやすくなります。 –

配列項目をリスト項目に簡単に印刷する（JavaScript）

答えて

関連する問題