JavaScript .map 使用多个数组源

Question

我有一个提供 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;
}

如有任何帮助，我们将不胜感激。

Answer 1

您可以尝试这样的操作：

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);
    })
}

Answer 2

ForEach 在这里会更好。映射 returns 一个对象，你不需要那个。

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 Marian Silviu 的例子也基本相同。

Answer 3

这样做：

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，但这是另外一回事了

JavaScript .map 使用多个数组源

JavaScript .map using multiple array sources

javascript

arrays

array.prototype.map