你如何在 ES6 中执行 forEach？答案

【问题标题】：How do you do forEach in ES6?你如何在 ES6 中执行 forEach？
【发布时间】：2017-10-19 08:24:15
【问题描述】：

如何对 es6 执行相同的功能？我正在尝试将此文本添加到列表项中

var names = [ "Jon", "Nick", "Bill", "Tom" ];

$('#names-list li').each(function (index) {
 $(this).text(names[index]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="names-list">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>

【问题讨论】：

“我怎样才能对 es6 做同样的功能？” 完全一样。你的意思是什么？
您的意思是“如果没有 jQuery，我该怎么做？”这个问题似乎与 ES6 本身没有太大关系。

标签： javascript jquery ecmascript-6

【解决方案1】：

ES6 似乎与您的要求无关。

您的问题的要点似乎是“我如何在没有 jQuery 的情况下实现这一目标？”。在这种情况下，等效的方法是使用querySelectorAll() 获取li 元素，forEach() 循环它们，然后设置textContent，如下所示：

var names = ["Jon", "Nick", "Bill", "Tom"];

document.querySelectorAll('#names-list li').forEach(function(li, index) {
  li.textContent = names[index];
});

<ul id="names-list">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

【讨论】：

ES6 和 querySelectorAll 并没有真正连接。
也许吧，但我认为 OP 的主题是“我如何在没有 jQuery 的情况下做到这一点”。为了避免混淆，我删除了对 ES6 的引用。
我知道 - 因此我之前关于阅读字里行间的评论并说 OP 是在询问如何在没有 jQuery 的情况下拥有相同的逻辑。
我认为 jQuery text() 方法更像是设置 textContent 而不是 innerText 会触发回流和其他一些不好的事情。
@Kaiido 我检查了the source，你是对的。我更新了答案。谢谢。

【解决方案2】：

如果您正在寻找 100% ES6，那么您就去吧：

const names = ["Jon", "Nick", "Bill", "Tom"];

const namesList = document.querySelectorAll("#names-list li");

for (let i in namesList) {
  namesList[i].innerText = names[i];
};

但如果我有任何编码风格，我不会真的写出这样的代码。

【讨论】：