for循环 for in循环与for of循环的对比差异

1、for循环

var size=[1,2,3,4,5,6,7] //申明一个数组
for(var i=0; i<size.length; i++){ 
    document.write(size[i] + " ");//数组元素
}

2、for in 可以循环数组和对象

var x;//可以不定义，也可以在括号内定义
var size=[1,2,3,4,5,6,7] //申明一个数组
var obj={name:'liushenghua',age:24,sex:'man'} //申明一个对象
for(x in size){ 
    document.write(size[x] + " ");//数组元素
}
for(x in obj){ 
    document.write(obj[x] + " ");//对象元素
}

3、for...off是 ES6 新引入的特性。它既比传统的for循环简洁，同时弥补了forEach和for-in循环的短板

var size=[1,2,3,4,5,6,7] //申明一个数组
for(var value of size){ 
    document.write(value==7?value + "--":value + " ");//数组元素
}
//let 循环内部有效
for(let value of size){ 
    document.write(value==7?value + "--":value + " ");//数组元素
}
//const 循环里的不可修改的静态变量
for(const value of size){ 
    document.write(value + " ");//数组元素
}
//循环一个字符串
let iterable = "boo";
for (let value of iterable) {
  console.log(value);
}

for循环和while循环其实是可以相互转换的
while

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i]){
    document.write(cars[i] + "<br>");
    i++;
}

for循环

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];)
{
    document.write(cars[i] + "<br>");
    i++;
}

定义了数组后对数组进行赋值，中间如有某些下标未被使用（即未被赋值），在遍历的时候，采用一般的 for 循环和 for...in 循环得到的结果不同。for...in 循环会自动跳过那些没被赋值的元素，而 for 循环则不会，它会显示出 undefined。

<p>点击下面的按钮，循环遍历</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
    var array = new Array();
    var x;
    var txt=""
    array[0] = 1;
    array[3] = 2;
    array[4] = 3;
    array[10] = 4;
    for( x in array ){
        alert(array[x]);     // 依次显示出 1 2 3 4
    } 
    alert(array.length);    // 结果是11
    for( var i=0 ; i<4 ; i++){
        alert(array[i]);     // 依次显示出 1 undefined undefined 2 
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>

for循环通过break可以随时跳出循环，当花括号只有一个时，不用括号，continue可以跳过此步骤
break

for (i=0;i<10;i++)
{
    if (i==3) break；
    x=x + "The number is " + i + "<br>";
}

continue

for (i=0;i<10;i++)
{
    if (i==3) continue；
    x=x + "The number is " + i + "<br>";
}