您将如何将这个for循环转换为foreach？这是我练习模板字符串的代码
您将如何将这个for循环转换为foreach？这是我练习模板字符串的代码
提问于 2018-07-24 05:45:11
我正在练习模板字符串，我可以从简单的数组中获取数据，但是如果你看到我这里有多个信息，我想把它显示在表中。我已经成功地使用了for loop(请参见)，但我想为此尝试一下forEach。
const player_table = document.querySelector('.players');
const data =[
{id:"uma"+815, name:"Ambar Jadhav", username:"ansurex", email:"ansurex@gmail.com"},
{id:"umb"+822, name:"Meet Agarwal", username:"agarwalind", email:"meet.ind@yahoo.com"},
{id:"umc"+830, name:"Omkar Kureshi", username:"kureshio", email:"omkara.re@gmail.com"},
{id:"umd"+815, name:"Subodh Bhave", username:"subha01", email:"subh.drama@yahoo.com"}
];
let template = '';
for( let i = 0; i < data.length; i++ ){
let info = data[i];
template += `<tr><td> ${info.id} </td><td> ${info.name} </td><td> ${info.username}</td><td> ${info.email}</td></tr>`
}
player_table.insertAdjacentHTML("beforeend",template)回答 1
Stack Overflow用户
发布于 2018-07-24 05:53:36
您可以使用Array.prototype.forEach，它接受一个带有数组项和数组项索引作为参数的function。
data.forEach(function(item, index){
template += `<tr><td> ${item.id} </td><td> ${item.name} </td><td> ${item.username}</td><td> ${item.email}</td></tr>`;
});
<table id="result"></table>
<script>
var template = "";
const data =[
{id:"uma"+815, name:"Ambar Jadhav", username:"ansurex", email:"ansurex@gmail.com"},
{id:"umb"+822, name:"Meet Agarwal", username:"agarwalind", email:"meet.ind@yahoo.com"},
{id:"umc"+830, name:"Omkar Kureshi", username:"kureshio", email:"omkara.re@gmail.com"},
{id:"umd"+815, name:"Subodh Bhave", username:"subha01", email:"subh.drama@yahoo.com"}
];
data.forEach(function(item, index){
template += `<tr><td> ${item.id} </td><td> ${item.name} </td><td> ${item.username}</td><td> ${item.email}</td></tr>`;
});
document.getElementById("result").innerHTML = template;
</script>
根据stwilz的建议，Array.prototype.reduce在这种情况下也可以工作。
<table id="result"></table>
<script>
const data =[
{id:"uma"+815, name:"Ambar Jadhav", username:"ansurex", email:"ansurex@gmail.com"},
{id:"umb"+822, name:"Meet Agarwal", username:"agarwalind", email:"meet.ind@yahoo.com"},
{id:"umc"+830, name:"Omkar Kureshi", username:"kureshio", email:"omkara.re@gmail.com"},
{id:"umd"+815, name:"Subodh Bhave", username:"subha01", email:"subh.drama@yahoo.com"}
];
const template = data.reduce((collection, item, index) => collection + `<tr><td> ${item.id} </td><td> ${item.name} </td><td> ${item.username}</td><td> ${item.email}</td></tr>`, '')
document.getElementById("result").innerHTML = template;
</script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51487599
复制相关文章
相似问题