添加“For Loop”而不是“forEach”答案

【问题标题】：Adding 'For Loop' instead of 'forEach'添加“For Loop”而不是“forEach”
【发布时间】：2018-11-22 14:43:33
【问题描述】：

这个：

function hideAllButtons(button) {
  button.querySelectorAll(".play, .pause, .speaker").forEach(hide);
}

改为：

https://jsfiddle.net/pezuLqvo/95/

  function hideAllButtons(button) {
    const buttons = button.querySelectorAll(".play, .pause, .speaker");
    for (let i = 0; i < buttons.length; i += 1) {
      hide(buttons[i]);
    }
  }

如何将 For 循环 添加到此代码中？

  function hideAllButtons(button) {
    const buttonSelectors = ".play, .pause, .speaker";
    button.querySelectorAll(buttonSelectors).forEach(hide);
  }

我已经起床这么远了：

function hideAllButtons(button) {
  const buttonSelectors = ".play, .pause, .speaker";
  for (let i = 0; i < buttons.length; i += 1) {
    hide(buttons[i]);
  }
}

这会去哪里？

(buttonSelectors)

【问题讨论】：

你想达到/不能达到什么目标？您的 buttonSelectors 只是字符串选择器，像这样应用选择：const buttons = button.querySelectorAll(buttonSelectors) 它应该可以正常工作。

标签： javascript for-loop foreach

【解决方案1】：

未使用函数的 button 参数。
创建一个只被使用的变量真的没有任何价值一次，所以消除 buttonSelectors 常量并得到所有按钮。
（仅供参考），.forEach() 不适用于节点列表上的所有浏览器，所以如果你确实使用它，首先将节点列表转换为数组并调用 .forEach() 在阵列上。以下是如何做到这一点的示例：

let btnArray = Array.prototype.slice.call(document.querySelectorAll(".play, .pause, .speaker")); btnArray.forEach(. . .)

所以，对于你的问题：

function hideAllButtons() {

  // Get the buttons node list
  let buttons = document.querySelectorAll(".play, .pause, .speaker");

  // Loop over them
  for (let i = 0; i < buttons.length; i++) {
    hide(buttons[i]);
  }
}

【讨论】：

如果我想使用它，它会如何添加？ (buttonSelector) 你能举个例子吗？
"先将节点列表转换为数组，然后在数组上调用.forEach()。"你能举一个例子说明如何做到这一点吗？
@MaryElliot let btnArray = Array.prototype.slice.call(document.querySelectorAll(".play, .pause, .speaker"));
如何将 Array 添加到此代码中？函数 pauseAllButtons() { 常量按钮 = document.querySelectorAll(".playButton"); button.forEach(function hidePause(button) { if (isPlaying(button)) { showPlayButton(button); } }); } jsfiddle.net/pezuLqvo/103
@MaryElliot 我已经向您展示过。将您的document.querySelector() 代码传递给Array.prototype.slice.call()，结果将是一个数组。

【解决方案2】：

  function hideAllButtons(button) {
    const buttonSelectors = ".play, .pause, .speaker";
    const buttons = button.querySelectorAll(buttonSelectors);
    for (let i = 0; i < buttons.length; i += 1) {
      hide(buttons[i]);
    }
  }

【讨论】：

这个不用let吗？
@MaryElliot let 不是变量声明的要求。它为您的变量提供块级范围，但这并不总是必要的。使用let 是一个很好的总体思路，但不是必需的。
const 不也提供块级作用域吗？
@MaryElliot 是的，但在这些示例中，let、var 和 const 都将提供相同的结果。

【解决方案3】：

您可能希望使用document.querySelectorAll 来获取与您的查询匹配的所有元素。

function hideAllButtons(button) {
  const buttonSelectors = ".play, .pause, .speaker"

  const buttons = document.querySelectorAll(buttonSelectors)

  for (let i = 0; i < buttons.length; i += 1) {
    hide(buttons[i])
  }
}

【讨论】：

【解决方案4】：

就像你的例子一样，在选择器下获取选中的按钮。

function hideAllButtons(button) {
  const buttonSelectors = ".play, .pause, .speaker";

  // Use the selectors to get all the buttons
  const buttons = document.querySelectorAll(buttonSelectors);

  for (let i = 0; i < buttons.length; i += 1) {
    hide(buttons[i])
  }
}

【讨论】：