为什么 if 语句没有在 Javascript 的 forEach 函数中运行？答案

【问题标题】：Why the if statement is not running in forEach function in Javascript?为什么 if 语句没有在 Javascript 的 forEach 函数中运行？
【发布时间】：2021-09-29 04:26:25
【问题描述】：

我一直在研究工具提示，为此我创建了一个 JavaScript 函数 Tooltip()，在其中我选择了所有 DOM 元素，例如 const targets = document.querySelectorAll('*')，在选择所有元素后，我在 targets 变量上添加了forEach 函数在每个函数内部，我创建了一个if 语句，在该语句中我检查了一个元素是否包含我在requiredAttrs 数组中提到的特定属性，但它无法以某种方式工作！而且我不知道我在哪里做错了。

完整代码

function Tooltip() {
      const requiredAttrs = ['data-tooltip', 'data-tooltip-position', 'data-tooltip-content'];
      const targets = document.querySelectorAll('*');

      targets.forEach((target, index) => {
            if (target.hasAttribute(requiredAttrs[index])) {
                  console.log('Y');
            } else {
                  console.log('No');
            }
      });
}

Tooltip();

<!DOCTYPE html>
<html dir="ltr" lang="en">
      <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <link rel="stylesheet" href="public/css/main.css" />
            <title>Pearl Framework</title>
      </head>
      <body class="vh-full grid-center">
            <style>
                  body {
                        background-color: #a1a1a1;
                  }

                  .box {
                        width: 100px;
                        height: 100px;
                        background-color: purple;
                  }
            </style>

            <div
                  class="box"
                  data-tooltip="true"
                  data-tooltip-position="top-center"
                  data-tooltip-content="Hello, World!"
            ></div>

            <script src="public/script/tooltip.js"></script>
      </body>
</html>

如您所见，<div class="box"></div> 具有所有 3 个属性，因此 if 语句应该运行，但 else 部分正在运行。

【问题讨论】：

标签： javascript arrays loops for-loop foreach

【解决方案1】：

targets 数组的索引与您要比较的 requiredAttrs 数组的索引不对应。你会想要这样的东西：

targets.forEach((target, index) => {
  const hasAttrs = requiredAttrs.every(attr => target.hasAttribute(attr));
  if (hasAttrs) {
    console.log('Y');
  } else {
    console.log('No');
  }
});

编辑：

这是有效的，因为您对 querySelectorAll 的调用实际上是在捕获页面上的每个元素并将其作为数组返回。在您的 forEach 调用中，您将使用当前元素的数组索引位置来检查这些属性是否存在，以检查 requiredAttrs。很可能当我们甚至迭代到具有您感兴趣的属性的 div 时，我们可能正在处理一个大于 requiredAttrs 数组长度的索引，更不用说我们只会检查一个 attrs，而不是全部。我的代码获取目标节点并调用 requiredAttrs 数组上的 .every 方法，以检查目标节点上是否存在每个所需的 attrs。

虽然这解决了最初的问题，但我应该注意，这可能会导致性能不佳，并且不是查找具有特定属性的元素的推荐方法。如果您想要一个元素集合，这些元素都保证在您的数组中具有属性，您可以简单地将它们添加到您的查询中，如下所示：

docmuent.querySelectorAll('*[data-tooltip][data-tooltip-position][data-tooltip-content]');

【讨论】：

对不起！从那以后我一直很忙。感谢?这个更好的方法

【解决方案2】：

一开始这里用index是不正确的，因为它是targets数组的索引，如果您查看 document.querySelectorAll('*') 的输出你可以看到，它还包括，html，head，和其他标签，

换句话说，您试图通过超出长度的索引访问 requiredAttrs

你必须用 for loop arround requiredAttrs 包装你的 if 语句

【讨论】：

我怎样才能排除html head body style script 和所有像这样的元素有什么简单的方法吗？？