javascript - 无法在模板字符串中使用 forEach 函数进行输出

Question

const categoriesLght = document.querySelectorAll('#categories .item').length;
console.log(`There are ${categoriesLght} clasifications.`);
const h2s = document.querySelectorAll('h2');
const heading = h2s.forEach(element =>
  console.log(`Clasification: ${element.textContent}`),
);

const quantity = document.querySelectorAll('h2 + ul');
quantity.forEach(el =>
  console.log(`Quantity: ${el.childElementCount}`),
);

输出：

There are 3 clasifications.
Clasification: Student
Clasification: Fish
Clasification: Rocket
Quantity: 3
Quantity: 5
Quantity: 6

如果我尝试将函数放入模板字符串中，则会出现错误。试图找到一种方法来实现它。期望的输出是：

Clasification: Student
Quantity: 3 
Clasification: Fish
Quantity: 5
Clasification: Rocket
Quantity: 6

我正在寻找一种方法如何将 ForEach 方法的结果放入模板字符串中，以实现类似的事情（我想我正在寻找一些解构）：

str = [h2s.forEach, quantity.forEach]([category, count])=> (console.log(`Clasification: ${category.textContent},
Quantity: ${count.childElementCount} `));

标签： javascriptdomdestructuring

Answer 1

循环一个并使用索引来引用另一个

const h2s = document.querySelectorAll('h2');
const quantity = document.querySelectorAll('h2 + ul');

h2s.forEach((element, i) =>
  console.log(`Classification: ${element.textContent}, Quantity: ${quantity[i].childElementCount}`),
);