javascript - JS - 我的网站上的 NodeList.forEach 异步吗？

Question

我正在为我的网页编写一些 JS。

我使用 document.querySelectorAll 然后使用 NodeList.forEach 查询了一个 div 列表( https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach )

但是我想知道我的代码是否会按顺序运行 - 即 NodeList.forEach 中的回调将一些项目推送到数组中。

我能确定下一步只会在 forEach 遍历每个元素后发生吗？

  //Get all the selected tags
  selectedTags = document.querySelectorAll('[class*=lpSelectedTag]');
  selectedTagsArray = [];

  //Get the values attribute
  selectedTags.forEach(function(currentValue) { 
    selectedTagsArray.push(currentValue.attributes.value.value); 
  });

  //Then create some fancy string using selectedTagsArray

所以在我制作“花式字符串”的最后一点 - 该行是否总是出现在 forEach 之后？

谢谢。

Answer 1

Can I be certain that the next step will only happen once that forEach has iterated through each element?

是的。 NodeList#forEach 是一个同步操作。

---

旁注:您可以使用 Array.prototype.map:

selectedTagsArray = Array.prototype.map.call(selectedTags, function(currentValue) { 
    return currentValue.attributes.value.value; 
});

或者在 ES2015+ 中:

selectedTagsArray = Array.from(selectedTags).map(function(currentValue) { 
    return currentValue.attributes.value.value; 
});

或:

selectedTagsArray = [...selectedTags].map(function(currentValue) { 
    return currentValue.attributes.value.value; 
});

---

旁注 2:如果您想要 input 的当前值，它不是属性；使用 value 属性:currentValue.value，而不是 currentValue.attributes.value.value。