使用多个数组源的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，但这是另外一回事了

array.prototype.map arrays arrays javascript