js-中for循环那些事

43次阅读

共计 1692 个字符,预计需要花费 5 分钟才能阅读完成。

语法

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

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

注意点:

  1. 初始化中的变量不是该循环的局部变量,而是与 for 循环处在同样的作用域中
  2. 初始化块中的表达式都是可以省略的,如果省略则需要在语句块中设置跳出条件,避免进入死循环
  3. 在 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]())

正文完
 0