js-中for循环那些事

jiezi

6 年前

for ([initialization]; [condition]; [final-expression]) {statement}

initialization
一个表达式 (包含赋值语句) 或者变量声明。典型地被用于初始化一个计数器。该表达式可以使用 var 关键字声明新的变量。初始化中的变量不是该循环的局部变量（子作用域），而是与 for 循环处在同样的作用域中（父作用域）。该表达式的结果无意义。
condition
一个条件表达式被用于确定每一次循环是否能被执行。如果该表达式的结果为 true，statement 将被执行。这个表达式是可选的。如果被忽略，那么就被认为永远为真 。如果计算结果为假，那么执行流程将被跳到 for 语句结构后面的第一条语句。
final-expression
每次循环的最后都要执行的表达式。执行时机是在下一次 condition 的计算之前。通常被用于更新或者递增计数器变量。
statement
只要 condition 的结果为 true 就会被执行的语句。要在循环体内执行多条语句，使用一个块语句（{…}）来包含要执行的语句。没有任何语句要执行，使用一个空语句（;）。可以使用break 主动跳出循环

初始化中的变量不是该循环的局部变量，而是与 for 循环处在同样的作用域中
初始化块中的表达式都是可以省略的，如果省略则需要在语句块中设置跳出条件，避免进入死循环
在 for 循环内部使用 异步函数、闭包等 时的问题：

setTimeOut 等异步函数时:

var arr = [1,3,5,7,9];
for (var i = 0; i < arr.length-1; i++) {setTimeout(function() {console.log("循环的值："+i);
        console.log("数组对应的值："+arr[i]);
    }, 1000);
}

存在闭包时：

function box() {var arr = [];
    for (var i = 0; i < 5; i++) {arr[i] = function () {return i;                            // 由于这个闭包的关系，他是循环完毕之后才返回，最终结果是 4 ++ 是 5}                                        // 这个匿名函数里面根本没有 i 这个变量，所以匿名函数会从父级函数中去找 i，}                                            // 当找到这个 i 的时候，for 循环已经循环完毕了，所以最终会返回 5
    return arr;
}
let boxArr = box();
console.log(boxArr[0]())

这时，会产生与我们预期所想得到的效果不同的结果，导致出现这种情况的原因主要是 for 语句表达式中 初始化中的变量不是该循环的局部变量（子作用域），而是与 for 循环处在同样的作用域中（父作用域）。
因此，解决方案比较流行的有两种：
第一种：使用 let 替代 var 声明 for 循环的表达式（推荐）

function box() {var arr = [];
    for (let i = 0; i < 5; i++) {arr[i] = function () {return i;}                                       
    }                                            
    return arr;
}
let boxArr = box();
console.log(boxArr[0]())

var arr = [1,3,5,7,9];
for (let i = 0; i < arr.length-1; i++) {setTimeout(function() {console.log("循环的值："+i);
        console.log("数组对应的值："+arr[i]);
    }, 1000);
}

第二种：使用自执行函数利用闭包特性来达到效果：

var arr = [1, 3, 5, 7, 9];
for (var i = 0; i < arr.length ; i++) {
    (j=>{setTimeout(() =>{console.log("循环的值：" + j);
            console.log("数组对应的值：" + arr[j]);
        }, 1000);
    })(i)
}

function box() {var arr = [];
    for (var i = 0; i < 5; i++) {((j)=>{arr[j] = ()=> j;})(i);
    }                                            
    return arr;
}
let boxArr = box();
console.log(boxArr[0]())
console.log(boxArr[1]())

js-中for循环那些事

语法

注意点：