JavaScript 分組輸出：for 循環按每 10 個數字生成 div 結構

需求：數字 0-30（或 1-30）按每 10 個一組，輸出 <div id="1">1-10</div> 結構。關鍵點在於分組邏輯與邊界處理（含 0 的情況）。

核心邏輯：整除與取模

組號 = Math.floor(num / 10) + 1（從 1 開始），組內範圍 = [group*10 - 9, group*10]。對 0 特判或納入第 0 組。

完整示例（含 0-30）

const MAX = 30, STEP = 10;
let html = '';
for (let i = 0; i <= MAX; i += STEP) {
    const group = i / STEP + 1; // 1,2,3...
    const start = i === 0 ? 0 : i; // 0 組特殊處理
    const end = Math.min(i + STEP - 1, MAX);
    html += `
${start}-${end}
`;
}
document.body.innerHTML = html;
/* 輸出：
0-9
10-19
20-29
30-30
*/

若需 1-30（不含 0）

for (let i = 1; i <= 30; i += 10) {
    const group = (i - 1) / 10 + 1;
    const end = Math.min(i + 9, 30);
    html += `
${i}-${end}
`;
}
/* 輸出：
1-10
11-20
21-30
*/

進階：函數式寫法（ES6+）

const range = (start, end) => Array.from({length: end - start + 1}, (_, i) => start + i);
const chunk = (arr, size) => Array.from({length: Math.ceil(arr.length / size)}, (_, i) => arr.slice(i * size, i * size + size));

chunk(range(1, 30), 10).forEach((group, idx) => {
    document.body.insertAdjacentHTML('beforeend', `
${group[0]}-${group[group.length-1]}
`);
});

此法語義清晰，易擴展（如改變步長、過濾條件）。