Javascript:一次对多个数组使用foreach

Question

我有2个arrays或者更可能是NodeLists，

const mainSlides = document.querySelectorAll('.mainSlides')
const thumbSlides = document.querySelectorAll('.thumbSlides')

目前我正在像这样迭代它们:

mainSlides.forEach(slide => {
    slide.style.backgroundColor = `red`
})
thumbSlides.forEach(slide => {
    slide.style.backgroundColor = `red`
})

因为它们都设置了相同的属性ie;background-color:red;，是否有一种快捷的方式来循环通过两个节点一次?

const mainSlides = document.querySelectorAll('.mainSlides')
const thumbSlides = document.querySelectorAll('.thumbSlides')
mainSlides.forEach(slide => {
    slide.style.backgroundColor = `red`
})
thumbSlides.forEach(slide => {
  //  slide.style.backgroundColor = `red`
})

<div class="holder">
  <div class="mainSlides"> some mainSlides </div>
  <div class="mainSlides"> some mainSlides </div>
  <div class="mainSlides"> some mainSlides </div>
  <div class="mainSlides"> some mainSlides </div>
</div>
 <div class="holder">  
  <div class="thumbSlides"> some mainSlides </div>
  <div class="thumbSlides"> some mainSlides </div>
  <div class="thumbSlides"> some mainSlides </div>
  <div class="thumbSlides"> some mainSlides </div>
</div>

Answer 1

可以，您可以在一个选择器中同时选择:

const mainAndThumbSlides = document.querySelectorAll('.mainSlides,.thumbSlides')

Answer 2

可以同时选择mainSlides和thumbSlides:

const allSlides = document.querySelectorAll('.mainSlides, .thumbSlides');

或者，如果你不想同时选择它们(例如，如果你想进一步单独使用它们)，而只想在这个特定的动作中一起使用它们:

const allSlides = [...mainSlides, ...thumbSlides];
allSlides.forEach(slide => {
    slide.style.backgroundColor = 'red';
})