從二維數組的“循環”返回值

Question

我有一個陣列。

 var citycode = [ ["In Milan", 0], ["Rom", 5], ["Modena", 6], ["Others", 20] ]; 

如何從For循環中為此Array返回值：

<div class="loop"><span>In Milan</span><span>0</span> </div>
<div class="loop"><span>Rom</span><span>5</span> </div>
....

非常感謝你。

Answer 1

使用函數式編程，無需循環。

 var cityCode = [ ["In Milan", 0], ["Rom", 5], ["Modena", 6], ["Others", 20] ]; const result = cityCode.map(code => `<div class="loop"><span>${code[0]}</span><span>${code[1]}</span></div>` ).join('') document.body.innerHTML = result; console.log(result); 

Answer 2

 var citycode = [ ["In Milan", 0], ["Rom", 5], ["Modena", 6], ["Others", 20] ]; for (var i = 0; i < citycode.length; i++) { for (var o = 0; o < citycode[i].length; o++) { console.log(citycode[i][o]) } } 

使用2 for循環來獲取每個項目

Answer 3

您可以創建DOM元素並追加body 。

 var citycode = [["In Milan", 0], ["Rom", 5], ["Modena", 6], ["Others", 20]]; citycode.forEach(function (city) { var div = document.createElement('div'); city.forEach(function (a) { var span = document.createElement('span'); span.appendChild(document.createTextNode(a)); this.appendChild(span); }, div); this.appendChild(div); }, document.body); 

Answer 4

不要迂腐，但OP要求循環..

    var htmlContent = "";
            for (var i = 0; citycode.length > i; i++) {
              htmlContent += '<div class="loop"><span>' + citycode[i][0] + '</span><span>' + citycode[i][1] + '</span></div>'
    }

Answer 5

我猜Array.prototype.reduce()是這些工作的理想選擇。 您可以按照以下方式執行功能;

基本上你不應該在DOM上工作，而是在文檔片段上工作，一旦完成你的工作，就可以將文檔片段一次性地附加到DOM的正確位置。

 var citycode = [["In Milan ", 0], ["Rom ", 5], ["Modena ", 6], ["Others ", 20]], mainDiv = document.getElementById("main"); mainDiv.appendChild(citycode.reduce(function(p,c){ var d = document.createElement("div"); d.classList.add("loop"); c.reduce(function(dv,sp){ var s = document.createElement("span"); s.textContent = sp; dv.appendChild(s); return dv; },d); p.appendChild(d); return p; },document.createDocumentFragment())); 

 .loop {color: red} 

 <div id="main"></div>