JavaScript for循环

一、for语句

for(1; 2; 4){
    3;
}
1：定义语句
2：判断语句
3：执行体
4：（迭代）变化语句
1->2(true)->3->4->2(ture)->3->4->2->3->4->2(false)

var oBtn = document.getElementById('btn');
var oBox = document.getElementById('box');
oBtn.onclick = function(){
    var str='';
    for(var i = 0;i<10;i++){
        str += "<div></div>";
        console.log(str);
    }
    oBox.innerHTML += str;  
}

二、遍历数组

var oLis = document.getElementsByTagName('li');
for(var i =0;i<4;i++){
    oLis[i].index = i;
    oLis[i].onclick = function(){
        alert(this.index);//谁调用这个函数 this就是谁
        alert(i);//此时i均为4
    }
}

三、遍历字符串

var str = "𠮷";//乱码 因为𠮷字已经不是utf8的范围了！
var str = "54321";
console.log(str.length);//经过了两次类型转换
console.log(typeof str);//string
for(var i=0; i<str.length; i++){
    console.log(str[i]);
}

四、跳出循环和终止循环

1. 跳过某一个循环：continue。
2. 终止循环：break。

for(var i=0;i<50;i++){
    if (i == 25) {
        console.log(i+10);
        continue;
    }
    //25判断完了 跳到26去了!
    console.log(i);
}

for(var i=0;i<10000;i++){
    if (i == 25) {
        console.log(i+10);
        break;//终止循环
    }
    //25判断完了 就挂了
    console.log(i);
}

五、label标签

1. 用于给for循环打个标记，便于终止和跳出。
2. 可以看做一个变量，但是不能用var定义，会报错。

out:
for(var i=0;i<2;i++){
    in:
    for( var j = 0;j<3;j++){
        if (j === 2) {
            continue out;
        }
        console.log(`里层执行了第${j}次`);
    }
    console.log(`外层执行了第${i}次`);
}

六、for循环的性能

1. 使用console.time('tag')和console.timeEnd('tag')系统会打印出大致的代码执行时间。
2. 尽量减少回流：当我们在页面上增加元素，改变元素宽高，放大缩小我们的窗口，改变标签的属性"<div></div>" ，此时页面会发生重新渲染。
3. 尽量把arr.length取出来，再循环。

var oBtn = document.getElementById('btn');
var oBox = document.getElementById('box');
oBtn.onclick = function(){
    console.time('tag1');
    for(var i = 0;i<10;i++){
        //1.循环的每次执行 都要取出我们的innerHTML 
        //2. 随着代码量的增多 innerHTML 也越来越多 越来越慢! 重新渲染了10次
        oBox.innerHTML += "<div></div>";
    }
    console.timeEnd('tag1');
}


var oBtn = document.getElementById('btn');
var oBox = document.getElementById('box');
oBtn.onclick = function(){
    console.time('tag1');
    var str='';
    for(var i = 0;i<10;i++){
        str += "<div></div>";
    }
    oBox.innerHTML += str; //随着代码量的增多 innerHTML 也越来越多 越来越慢! 重新渲染了 1次!!!!!!
    console.timeEnd('tag1');
}

var oLis = document.getElementsByTagName('li');
console.time('tag1');
for(var i=0;i<oLis.length;i++){
    oLis[i].style.backgroundColor = '#f60';
}
console.timeEnd('tag1');


console.time('tag2');
var i=0,
    len=oLis.length;
for(; i<len;i++){
    oLis[i].style.backgroundColor = '#f60';
}
console.timeEnd('tag2');


console.time('tag3');
for(var i=-1;oLis[++i];){ //当取出undefined之后 循环结束
    oLis[i].style.backgroundColor = '#f60'; 
}
console.timeEnd('tag3');
/**第三种性能最好，但不推荐，因为如果数组中的数组为[0,null,undefined,'',NaN,false]时，将自动退出/

七、文档流

1. document.write只会写入到一个打开的文档流中，将内容追加到body后边。
2. 如果用.write书写js代码的时候，需要用到转义\。
3. 当window的资源加载完毕之后，我们认为文档流关闭，此时write会重新打开文档流，覆盖原有内容。
4. 注册事件不影响文档流加载，代码读取完毕之后，注册的事件还在。

var oBox = document.getElementById('box');
window.onload = function(){
    // document.open();//打开文档流
    document.write(`<script>alert(1)<\/script>`);
    // document.close();//关闭文档流
}

document.onclick = function(){
    // document.open();//打开文档流
    document.write(`123'`);
    // document.close();//关闭文档流
}