如何使用JavaScript将用forEach分析的数组项添加到字符串中？

Question

我有一个数组，其中包含要动态插入字符串的值，而该字符串又是innerHTML字符串的一部分。我已经制定了如何使用forEach解析数组项目，但我无法弄清楚如何取值forEach返回并将它们插入到字符串中。

这样做的目的是要取代以下，非常低效的，代码（可以忽略当前的代码使用iframe的事实，这是没有直接关系到我的问题）：

let container = document.querySelector('.container'); 
let btnLoad50 = document.getElementById('btn50'); 
let btnLoad51 = document.getElementById('btn51'); 
let btnLoad53 = document.getElementById('btn53'); 

btnLoad50.addEventListener('click', function(btnFunc) { 
    container.innerHTML = '<iframe src="pages/_route50.php" title="Route 50" width="900px" height="900px">'; 
}) 

btnLoad51.addEventListener('click', function(btnFunc) { 
    container.innerHTML = '<iframe src="pages/_route51.php" title="Route 51" width="900px" height="900px">'; 
}) 

btnLoad53.addEventListener('click', function(btnFunc) { 
    container.innerHTML = '<iframe src="pages/_route53.php" title="Route 53" width="900px" height="900px">'; 
}) 

的我正在针对底层的HTML是这样的：

<p>Some unrelated text.</p> 

    <div class="btn_div"> 
     <button name="load" class="btn">Click This</button> 
    </div> 

    <div class="container"> 
    <p>Something will be added here</p> 
    </div> 

这是我想出迄今：

这部分来自persp工作ective它解析使用forEach法阵和注销的项目在控制台中正确地迭代列表：

const rList = [50, 51, 53]; 
const btn = document.querySelector('.btn'); 
const container = document.querySelector('.container'); 

const routes = rList.forEach(e => console.log(`This is btn${e}`)); 

以下部分给了我一个ul列表，当我按一下按钮但每个内容产品This is route btnundefined，而不是This is route btn50，This is route btn51等：

btn.addEventListener('click', function() { 
    container.innerHTML = ` 
     <ul> 
     <li>This is route btn${routes}</li> 
     <li>This is route btn${routes}</li> 
     <li>This is route btn${routes}</li> 
     </ul>`; 
}); 

我怎样才能把它都到了这里？我期望的结果如下：

1. 解析数组，将数组中的项作为值返回;
2. 将项目传递给我的eventListener函数，在我的页面的container元素中创建一个ul列表，并使用递增的btn + item字符串。

我正在寻找一个香草JavaScript解决方案在这里。虽然我感谢来自JQuery专业人士的帮助，但我并未使用JQuery。

Answer 1

forEach总是返回undefined。IIF要返回值的数组，你必须使用map：

const rList = [50, 51, 53]; 
 
const routes = rList.map(e => `This is btn${e}`); 
 

 
console.log(routes);

或使用forEach但做某事喜欢：

const rList = [50, 51, 53]; 
 
let routes = [] 
 
rList.forEach(e => routes.push(`This is btn${e}`)); 
 
console.log(routes);

当你在点击使用时有路由填充呈现数据再次映射：

const rList = [50, 51, 53]; 
 
const routes = rList.map(e => `This is btn${e}`); 
 
const btn = document.querySelector('.btn'); 
 
const container = document.querySelector('.container'); 
 

 

 
btn.addEventListener('click', function() { 
 
    container.innerHTML = ` 
 
    <ul> 
 
     ${routes.map(route => `<li>${route}</li>`).join('')} 
 
    </ul>`; 
 
});

<p>Some unrelated text.</p> 
 

 
<div class="btn_div"> 
 
    <button name="load" class="btn">Click This</button> 
 
    </div> 
 

 
<div class="container"> 
 
    <p>Something will be added here</p> 
 
</div>

编辑：如在评论OP请求。 我会用forEach这种方式，但在这种情况下，我真的认为map工作更好。我很少使用forEach或裸for循环进行数据转发。如果在这种情况下优于map,filter和reduce。

btn.addEventListener('click', function() { 
 
    let htmlString = `<ul>`; 
 
    routes.forEach(route => htmlString +=`<li>${route}</li>`); 
 
    htmlString += </ul>`; 
 
    container.innerHTML = htmlString; 
 
});