这个语句可以说相当方便了，特别是数据庞大的循环简直是神器！但难点在于理解边界在哪里。
先来说说 for 循环的语法吧；
for(初始条件;条件判断;条件变化){
// 循环的代码
}
执行顺序：
1. 先初始条件
2. 开始条件判断
3. 如果成立，执行要循环的代码块
4. 条件变化
2，3,4,2,3,4....
直到条件判断不成立，整个循环结束
注意：
条件判断一直为true，循环会一直执行下去，称之为死循环
for循环中一定要写两个分号
对于执行顺序，那是一定要认清的，否则循环的次数就可能跟预想的有出入, 还要注意的是最好不要让电脑陷入死循环，除非你是勇士，浏览器会卡死，分分钟挂掉，所以说，作为一个正经程序员要善待浏览器这个好朋友哇！！！
还记得99乘法表吗 ？是的，我们用for循环做了一个，部分代码如下：
<script>var box = document.getElementById(‘box‘);//自定义一个变量str,初始为空字符var str =‘‘;//使用for循环确定总共有9列，即生成九个div.// i 为列数 ， j 为行数for(var i = 1 ; i < 10 ; i++ ){//将str拼合起来str +=‘<div>‘;//每一列列数不变， 行数从 i 开始循环一直到 9for(var j = i ;j < 10 ;j++){var n = i + ‘x‘ +j + ‘=‘ +i*jstr += ‘<span>‘+n+‘</span>‘}str += ‘</div>‘}box.innerHTML = str;</script>如果用 html+css 也能做出来，但 js 相对来说写的字符就少一些，否则81个小方块再填不同的算式，那得整到猴年马月啊。
单单使用 for 循环难免太乏味，所以我做了一个 if + for 的小东东 ，一个 V 形小方盒，最有特色的地方就是找规律，定位每个小盒子left,top值，一起来看：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><style>.box{position:relative;width: 300px;height: 300px;border:1px solid #000000;margin:0 auto;}.box div{position:absolute;width:60px;height: 60px;background-color: mediumpurple;color:#fff;}</style><body><!--生成一个容器放置V形变换的 div --><div class="box"><!--<div style="‘left:‘+i*60‘px‘;‘top:‘+(2-i)*60+‘px‘">1</div><div>2</div><div>3</div><div>4</div><div>5</div>--></div><script>//声明变量var box = document.getElementsByClassName(‘box‘) //自定义空标签（用来拼接内嵌div）var str = ‘‘//进入 for 循环，生成5个 divfor(var i = 0 ; i< 5; i++){//判断i的大小，left 值从 0 以每个 div 的宽度递增if(i <= 2){//当 i <= 2 时，top值从 0 ?的高度以每个 div 高度递增至 2 个 divstr +=‘<div style="left:‘+i*60+‘px;top:‘+i*60+‘px">‘+i+‘</div>‘}else{//当 i > 2 时，top值从 2 个 div 的高度以每个 div 高度递减至 0str +=‘<div style="left:‘+i*60+‘px;top:‘+(4-i)*60+‘px">‘+i+‘</div>‘}}//把 str 值赋给 box 里边的divbox[0].innerHTML = str</script></body></html>现在已经意识到原来数学找规律真不是白学的，虽然买菜用不上微积分，用不上找规律，但在使用计算机时，数学真的是太重要了，嗯~要重新重视起来了，。
js - for循环语句
原文地址：https://www.cnblogs.com/zyuu/p/8205909.html