遍历数组时如何将元素按每两个一组分配到不同DIV中？

看你的需求和示例，应该是要把数组按每4个元素为一组，分别放到不同的.best类DIV里对吧？你说自己的实现不够规范，那我给你分享两种业界常用的、可读性和可维护性都很强的实现方式：

方案一：直观的循环步长分组渲染 #

这种方法逻辑直白，适合快速理解，核心是通过设置循环步长，每次批量处理一组元素：

// 假设你的原始数据数组
const items = ["Pencil", 200, "Rubber", 250, "Sharpner", 300, "Pen", 400, "Paint", 500, "Box", 50];
const container = document.querySelector('.container');

// 以步长4循环，每次处理一组元素
for (let i = 0; i < items.length; i += 4) {
  // 截取当前组的元素（自动兼容数组长度不是4倍数的情况）
  const currentGroup = items.slice(i, i + 4);
  
  // 创建目标DIV元素
  const groupDiv = document.createElement('div');
  // 动态添加类名和ID
  const groupIndex = Math.floor(i / 4) + 1;
  groupDiv.className = `best order${groupIndex}`;
  groupDiv.id = `group-${groupIndex}`; // 或者你想要的one/two/three，可以用数组映射
  
  // 渲染组内内容，这里用模板字符串构建结构更清晰
  groupDiv.innerHTML = `
    <h1>Group ${groupIndex}</h1>
    <div class="item-list">
      ${currentGroup.map(item => `<span class="item">${item}</span>`).join(' ')}
    </div>
  `;
  
  // 将DIV加入容器
  container.appendChild(groupDiv);
}

这种方式的优势是逻辑连贯，边循环边渲染，不需要额外的数组转换，调试起来也很方便。

方案二：先分组再渲染（函数式风格） #

如果你更倾向于模块化的写法，可以先把数组拆分成若干子组，再单独处理渲染逻辑，代码的职责划分更清晰：

const items = ["Pencil", 200, "Rubber", 250, "Sharpner", 300, "Pen", 400, "Paint", 500, "Box", 50];
const container = document.querySelector('.container');

// 封装数组分组函数，可复用
const chunkArray = (arr, chunkSize) => {
  return arr.reduce((result, _, index) => {
    // 每chunkSize个元素创建一个新组
    if (index % chunkSize === 0) {
      result.push(arr.slice(index, index + chunkSize));
    }
    return result;
  }, []);
};

// 把原始数组分成每组4个元素的子数组
const groupedItems = chunkArray(items, 4);

// 遍历分组后的数组渲染DOM
groupedItems.forEach((group, index) => {
  const groupDiv = document.createElement('div');
  const groupNum = index + 1;
  groupDiv.className = `best order${groupNum}`;
  groupDiv.id = `group-${groupNum}`;
  
  groupDiv.innerHTML = `
    <h1>Group ${groupNum}</h1>
    <div class="item-list">
      ${group.map(item => `<span class="item">${item}</span>`).join(' ')}
    </div>
  `;
  
  container.appendChild(groupDiv);
});

这种写法把分组逻辑和渲染逻辑完全分离，后续如果要调整分组大小（比如改成每2个元素一组），只需要修改chunkArray的第二个参数即可，扩展性很强。

关键注意事项 #

1. 如果你的实际需求是每2个元素一组（和你最初描述一致，但和示例效果冲突），只需要把代码里的4替换成2就行；
2. 用模板字符串（` `）拼接HTML结构，比传统字符串拼接更易读，也方便添加样式类和调整结构；
3. 如果数组长度不是分组大小的整数倍，两种方案都会自动处理最后一组的剩余元素，不会出现报错；
4. 如果你用React/Vue等框架，核心逻辑还是先分组再循环渲染，只是DOM操作会被框架的语法替代。

内容的提问来源于stack exchange，提问作者soccerway