javascript - 如果所有迭代都返回空，则执行某些操作，如果其中 1 次迭代返回某些内容，则执行其他操作

Question

我有一个值数组，我需要循环这些值以根据从文本框获取的值运行函数。

我的代码:

<label for="truck">Truck:</label>
<input type="text" id="truck" name="truck">
<button type="button" id="myButton">Click Me!</button>

const truckBtn = document.getElementById("myButton");
const truckID = document.getElementById("truck");
truckBtn.addEventListener("click", () => {

  let arrs = ["one", "two", "three"];

  for (const arr of arrs) {
     axiosFunction(arr, truckID.value).then(d=> {
      console.log(d.data);
      if (d.data.length > 0) {
         // do something
      } else alert("Not Found");
   });
  }
});

因此，如果 truckID.value 与我需要的内容匹配，则 d.data 的响应是:

[]
[]
[{...}]

这时它就会进入 if 语句。

其他情况是:

如果 truckID.value 与我需要的不匹配，则响应为:

[]
[]
[]

我的问题是，当我有 else 时，即使存在匹配，它也会转到 else 。当数组长度大于 0 至少 1 次迭代时，有没有办法编写 if 语句？如果所有迭代都返回长度 0，则执行 else 操作？

Answer 1

如果您可以重写 axiosFunction 后面的 API 以获取所有三个 arr 值并返回批处理，那将是理想的选择，这样您就不会进行多轮 -旅行。但假设你不能这样做，并且你可以等待所有往返返回(否则你无法知道它们是否都返回空)，你可以使用 Promise.all()等到它们全部解决。

<label for="truck">Truck:</label>
<input type="text" id="truck" name="truck">
<button type="button" id="myButton">Click Me!</button>

truckBtn.addEventListener("click", () => {

  let arrs = ["one", "two", "three"];
  Promise.all(arrs.map(arr => axiosFunction(arr, truckID.value)))
    .then(results => {
      console.log(results.map(d => d.data)); // [[], [], [...]]
      const firstValidResult = results.find(d => d.data.length > 0);
      if(firstValidResult) {
         // do something with firstValidResult.data
      } else alert("Not Found");
    });
});

此代码使用 find 假设您只期望一个有效结果。如果可能有多个过滤器，您可以调整它以使用过滤器。