javascript - JS : for loop inside forEach

Question

我正在尝试使用 forEach 内的 for 循环在多个 div 内创建 4 个 canvas 元素.

这里是一个示例代码:

const wavePart = document.querySelectorAll('.waves');
wavePart.forEach(element => {
  for (i; i < 4; i += 1) {
    let can = document.createElement('canvas');
    element.appendChild(can);
   }
});

此代码仅在 first wavePart 内创建 4 个 Canvas ，它不会循环遍历所有容器。我做错了什么吗？

Answer 1

是的，你是:

1. 依靠i由某些包含代码定义，并且

2. 未设置 i 的初始值在你的循环中

因此，i留在 4第一个之后forEach回调，等等任何后续回调，for循环体永远不会运行，因为 i < 4此时总是错误的。

相反，声明 i在本地回调中，并将其设置为 0首先:

const wavePart = document.querySelectorAll('.waves');
wavePart.forEach(element => {
  for (let i = 0; i < 4; i += 1) {
  //   ^^^^^^^^^
    let can = document.createElement('canvas');
    element.appendChild(can);
   }
});