如何解决使用多个数组源的JavaScript .map
我有一个提供4个值的测试:
fPortTotal
=防火墙测试中具有多少个端口的数字。
fProtocol
=带有端口协议(例如UDP,TCP)的数组
fPorts
=具有哪个端口号的数组
fStatus
=取决于端口的打开或关闭数组
[0]是第一个端口,[1]是第二个端口,依此类推。
我想使用.map方法在<p>
中显示每个端口的信息。问题是我在理解.map方法以及如何使用它方面有很多困难。我相信该功能的“骨架”应如下所示:
function populateFw(fPorts,fStatus,fPortTotal,fProtocol) {
var output = document.getElementById('firewallRes');
var text = document.createElement ('p');
text.id = 'firewallEndResults';
text.innerHTML = arrayOfArrays.map;
}
任何帮助将不胜感激。
解决方法
您可以尝试以下操作:
function populateFw(fPorts,fStatus,fPortTotal,fProtocol) {
var output = document.getElementById('firewallRes');
fPorts.forEach((port,index) => {
const text = document.createElement('p');
text.innerText= `${port}: ${fProtocol[index]} - ${fStatus[index]}`;
output.appendChild(text);
})
}
,
ForEach在这里会更好。 Map返回一个对象,您不需要它。
fStatus.forEach((_,index)=>{
//then using index acces all the information
const protocol = fProtocol[index];
const protNumber = fPorts[index]
....
text.innerHTML += 'Protocol is '+protocol+' and port number is '+protNumber;
});
编辑:Talmacel玛丽安·席尔维(Mal Silviu)的例子基本上是同一回事。
,这样做:
for(i=0; i<fPorts; i++){
var text = document.createElement ('p');
text.id = `firewallEndResults${i}`;
text.innerHTML = `${fStatus[i]},${fPortTotal[i]},${fProtocol[i]}`;
somediv.appendChild(text); // don't forget
}
map是用于更改数组项的功能,需要回调
const newArray = arrayOfArrays.map(callback)
或
const newArray = arrayOfArrays.map((i)=> {周期性地做某事})
如果您使用React,则可以在JSX中使用map,但这是另外一回事了
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。