在JS中主要的循环包含
- while
- do while
- for
- for-in
在这些循环中,使用最多的是for循环,下面将从几个方面来具体说说for循环
1.表达式:
for (var i=0;i<10;i++){
console.log(i);//打印的结果为:0123456789
}
上面这段代码是for循环最常见的写法.其中包含
var i=0 初始化部分,在进入循环前执行
i<10;循环成立的条件,为表达式,只有当真时才会执行循环体中的表达式
i++ 自增部分,每次执行循环完后才会调用的表达式
{console.log(i)} 循环体
for(var i=0,name='zhangsan';i<10;i++){
console.log(name+i);//打印的结果为:zhangsan0到zhangsan9
}
和上面的例子确实没什么不同,只是在初始化部分添加了一个参数name='zhangsan',意思无非就是声明了一个叫name的变量,也就说明了其实i=0;就是一个初始化变量的作用.
for(var i=0;
(function()
{if(i<10)
return true;
return false
})();i++){
console.log(i);//打印的结果为:0到9
}
上面的代码我画蛇添足的在条件判断中使用了一个立即执行函数,主要是证明条件部分是一个表达式,在for循环每次循环时都会执行该表达式,继续循环的条件是该表达式的值为真(true)
for(var i=0;i<10;i>5?i++:i+=2){
console.log(i);//打印结果为0 2 4 6 7 8 9
}
我在第三部分(自增部分)添加了写了一个三元运算符,目的也是为了证明这第三部分也是一个表达式,在每一次执行完循环后都会执行该表达式,从而确定i的值.
既然每次执行都会执行这个表达式,那么我们也可以这样写:
for(var i=0;i<10;i++,console.log(i)){}
和
for (var i=0;i<10;i++){
console.log(i);
}
上面两个表达式输出的结果是相同的吗?
答应是不同的,第一个先执行的i++,再执行的console.log() 而第二个先执行的console.log(),再执行的i++ ,原因嘛就是上面说的for表达式的自增部分是每一次循环结束后才执行的表达式
如果改写下:
for(var i=0;i<10;console.log(i),i++){}
和
for (var i=0;i<10;i++){
console.log(i);
}
以上两个打印结果就相同了.
2.还可以怎么写?
上面的 初始化,条件,自增部分都可以为空,我们依次来看看他们的写法
var i=0;
for(;i<10;i++){
console.log(i)//打印结果为:0到9
}
只是将初始化提前了.
var i=0;
for(;;i++){
console.log(i)//打印结果为:0到99
if(i==99){break;}
}
如果条件表达式为空,则表示死循环,为了避免内存溢出我这添加了一个i==99的条件和break;让循环终止
var i=0;
for(;;){
console.log(i)//打印结果为:0到98
i++;
if(i==99){break;}
}
如果自增表达式为空,也表示死循环,为了避免内存溢出我这添加了一个i==99的条件和break;让循环终止
3.循环体中的async会出什么幺蛾子?
for(var i=0;i<3;i++){
setTimeout(function(){
console.log(i);//等等一秒打印结果为3个3
},1000);
}
如何避免:
for(var i=0;i<3;i++){
(function(i){
setTimeout(function(){
console.log(i);//等等一秒打印结果为0,1,2
},1000);
})(i)
}
原因? 在下面分析
4.为什么使用ES6的let关键字不会有问题?
我们看下面的代码:
普通JS for中的async:
for(var i=0;i<3;i++){
setTimeout(function(){
console.log(i);//等等一秒打印结果为3个3
},1000);
}
使用闭包 for async:
for(var i=0;i<3;i++){
setTimeout(function(){
console.log(i);//等等一秒打印结果为0 1 2
},1000);
}
使用ES6 let 关键字的for async:
for(var i=0;i<3;i++){
setTimeout(function(){
console.log(i);//等等一秒打印结果为0 1 2
},1000);
}
其中 使用闭包的for async 和ES6 let 的for async 输出结果是相同的:
下面我用一些伪代码来说明一些原因:
我们先来为普通的for写一些伪代码:
function test(){
var i=0;
{
setTimeout(function(){
console.log(i);
},1000);
i++;
}
{
setTimeout(function(){
console.log(i);
},1000);
i++;
}
{
setTimeout(function(){
console.log(i);
},1000)
i++;
}
}
test();//输出结果为:3个3
等待1秒后i的值已经经过了3次i++(在for中每一次循环都会执行自增表达式) 当执行console.log()的时候 此时的i已经变成了3,则每次打印都为3
下面是闭包的for async 伪代码:
function test(){
var i=0;
{
function _0(i){
setTimeout(function(){
console.log(i);
},1000)
}
_0(i);
i++;
}
{
function _1(i){
setTimeout(function(){
console.log(i);
},1000)
}
_1(i);
i++;
}
{
function _2(i){
setTimeout(function(){
console.log(i);
},1000)
}
_2(i);
i++;
}
}
test()//打印结果为0 1 2
在ES6之前,JS的最小作用域是函数,并且声明的变量和函数都会得到提升,上面的例子中_0将i当成是参数,当执行到_0函数时,会在_0函数内部最开始就声明一个变量i并且赋值为0,所以在setTimeout打印时引用的i是_0函数中的i变量,也就是0,依次的,_1 函数 _2 函数也是相同的
而在ES6中for循环应该是这样的:
function test(){
let i=0;
{
setTimeout(function(){
console.log(i);
},1000);
i++;
}
{
setTimeout(function(){
console.log(i);
},1000);
i++;
}
{
setTimeout(function(){
console.log(i);
},1000)
i++;
}
}
test();//打印结果依然是3个3
那么是否是这样呢?
function test(){
{
let i=0;
setTimeout(function(){
console.log(i);
},1000);
}
{
let i=1;
setTimeout(function(){
console.log(i);
},1000);
}
{
let i=2;
setTimeout(function(){
console.log(i);
},1000)
}
}
test()//执行结果为0 1 2
