javascript for循环中 String拼接 区别于Number累和

本文目的在于复现for循环的运行过程,深究原理.

预计花费时间6min

不要前戏了,直接开始吧

当_calendar未赋值时,无法进行number类型的累加操作,
当为i=n时的an都拼接一个字符串时,比如 “/t”或者”\n”,+操作符会把_calendar转化为字符串类型,进行字符串的拼接.

一,单层for()循环 console.log放在for()之内时,

1, number非累和

var _calendar=0;
for (var i = 1; i <=31; i++) {
                _calendar=i;
                console.log(_calendar);
}
//结果为:
1 //i=1,a1=1;
2 //i=2,a2=2;
3 //i=3,a3=3;
4 //i=4,a4=4;
...
31//i=31,a31=31;

2, number累和

var _calendar=0;
for (var i = 1; i <=31; i++) {
                _calendar+=i;
                console.log(_calendar);
}
结果为:
1 //i=1,a1=1, sum1=a1;或者理解为sum1=sum的初始值0+a1
3 //i=2,a2=2, sum2=a1+a2=1+2=3;或者理解为sum2=sum1+a2
6 //i=3,a3=3, sum3=a1+a2+a3=1+2+3=6;或者理解为sum3=sum2+a3
10 //i=4,a4=4, sum4=a1+a2+a3+a4=1+2+3+4=10;或者理解为sum4=sum3+a4
...
496 //i=31,a31=31.sum31=496;

3,String非拼接

var _calendar="";
for (var i = 1; i <=31; i++) {
                _calendar="i";
                console.log(_calendar);
}
结果为:
i
i
i
i

4,String拼接

var _calendar="";
for (var i = 1; i <=31; i++) {
                // console.log("i="+i);
                _calendar+="i";
                console.log(_calendar);
}
结果为:
i//i=1,a1=i sum1=i  sum1 的初始值+a1;(""+i)
ii //i=2,a2=i sum2=ii sum2=sum1拼接a2,等价于a1+a2(i+i)
iii //i=3,a3=i sum3=iii sum3=sum2拼接a3,等价于a1+a2+a3(i+i+i)
iiii //i=4,a4=i sum4=****,sum4=sum1拼接a2,等价于a1+a2(i+i+i+i)
...
iiiii...iiii //i=31,a31=i,sum31=a1+a2+a3+...+a31

二, 单层for循环,console.log放在for()之外时,

1, number非累和

var _calendar=0;
for (var i = 1; i <=31; i++) {
                _calendar=i;    
}
console.log(_calendar);
结果为:
31//i=31,a31=31;

2, number累和

var _calendar=0;
for (var i = 1; i <=31; i++) {          
                _calendar+=i;           
}
console.log(_calendar); 
结果为:
496 //i=31,a31=31.sum31=1+2+3+4+...+31=496;

3,String非拼接

var _calendar="";
for (var i = 1; i <=31; i++) {
                _calendar = "i";                
}
console.log(_calendar); 
结果为:
i //i=31,a31=i.

4,String拼接

var _calendar="";
for (var i = 1; i <=31; i++) {
              _calendar+="i";                   
}
console.log(_calendar);
结果为:
iiiiii...i(31个i) //i=31,a31=i sum31=iiiii...ii(31个i)

三 两层for循环时,number累和 非累和

1,number非累和 在内层循环体内打印时,

var _calendar=0;
for(var j=0;j<2;j++){
for (var i = 1; i <=31; i++) {
                _calendar=i;    
                console.log(_calendar);     
}
}
结果为:
1
2
...
31
1
2
...
31

2,number非累和,在内层循环体外打印时

var _calendar=0;
for(var j=0;j<2;j++){
for (var i = 1; i <=31; i++) {
                _calendar=i;                        
}
console.log(_calendar); 
}
结果为:
31
31

3,number非累和,在外层循环体外打印时


var _calendar=0;
for(var j=0;j<2;j++){
for (var i = 1; i <=31; i++) {
                _calendar=i;                        
}
}
console.log(_calendar); 
结果为:
31

4,number累和,在内层循环体内打印时

var _calendar=0;
for(var j=0;j<2;j++){
for (var i = 1; i <=31; i++) {
                console.log("j="+j,"i="+i);
                _calendar+=i;
                console.log(_calendar);                         
}
}
结果为:
j=0 i=1   1
j=0 i=2   3
...
j=0 i=31  496
j=1 i=1    497 
...
j=1 i=31  992

5,number累和,在内层循环体外打印时

var _calendar=0;
for(var j=0;j<2;j++){
for (var i = 1; i <=31; i++) {
                console.log("j="+j,"i="+i);
                _calendar+=i;
                                        
}
console.log(_calendar); 
}
结果为:
496  //j=0,i=31
992  //j=1,i=31

6,number累和,在外层循环体外打印时

var _calendar=0;
for(var j=0;j<2;j++){
for (var i = 1; i <=31; i++) {
                // console.log("j="+j,"i="+i);
                _calendar+=i;                                       
}
}
console.log(_calendar); 
结果为:
992 //j=1,i=31

四 两层for循环时,String拼接与非拼接

1,String非拼接,在内层循环体内打印时

var _calendar="";
for(var j=0;j<2;j++){
for (var i = 1; i <=31; i++) {
               // console.log("j="+j,"i="+i);
               _calendar="i";  
               console.log(_calendar);                                     
}
}
结果为:
i
i
...
i(共62个)

2,String非拼接,在内层循环体外打印时

var _calendar="";
for(var j=0;j<2;j++){
for (var i = 1; i <=31; i++) {
                // console.log("j="+j,"i="+i);
                _calendar="i";  
                                                    
}
console.log(_calendar); 
}
结果为:
i //j=0,i=31
i //j=1,i=31

3,String非拼接,在外层循环体外打印时

var _calendar="";
for(var j=0;j<2;j++){
for (var i = 1; i <=31; i++) {
                console.log("j="+j,"i="+i);
                _calendar="i";  
                                                    
}
}
console.log(_calendar); 
结果为:
i //j=1,i=31

4,String拼接,在内层循环体内打印时

var _calendar="";
for(var j=0;j<2;j++){
for (var i = 1; i <=31; i++) {
                console.log("j="+j,"i="+i);
                _calendar+="i"; 
                console.log(_calendar);                                     
}
}
结果为:
i //j=0,i=1
ii //j=0,i=2
...
iii(31个) //j=0, i=31
iii(32个) //j=1,i=1
...
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii(自己数一数是不是62个) //j=1,i=31

5,String拼接,在内层循环体外打印时

var _calendar="";
for(var j=0;j<2;j++){
for (var i = 1; i <=31; i++) {
                console.log("j="+j,"i="+i);
                _calendar+="i"; 
                                                
}
console.log(_calendar); 
}
结果为:
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiii //j=0 i=31 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii //j=1 i=31

5,String拼接,在外层循环体外打印时

var _calendar="";
for(var j=0;j<2;j++){
for (var i = 1; i <=31; i++) {
            console.log("j="+j,"i="+i);
            _calendar+="i";                                                 
}
}
console.log(_calendar); 
结果为:
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii //j=1 i=31

补充:以上都是把var _calendar声明赋值在循环体外,研究下在不同位置声明有什么区别?那么我们以String拼接,在内层循环体内打印时为例子.

在内层for循环之外声明:

for(var j=0;j<2;j++){
    var _calendar="";//注意这个的位置
for (var i = 1; i <=31; i++) {
        console.log("j="+j,"i="+i);
        _calendar+="i";
        console.log(_calendar);                                             
}
}
结果为:
i //j=0,i=1
ii // j=0,i=2
...
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiii //j=0,i=31
i //j=1,i=1
ii //j=1,i=2
...
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiii //j=1 i=31

在内层for循环之内声明:

1在内层最顶端声明并赋值
for(var j=0;j<2;j++){
for (var i = 1; i <=31; i++) {
    var _calendar="";
        console.log("j="+j,"i="+i);
        _calendar+="i";
        console.log(_calendar);                                             
}
}
结果为:
i
i
i
...
i
2在内层最底端赋值(非严格模式下的声明提升问题)
for(var j=0;j<2;j++){
for (var i = 1; i <=31; i++) {
            console.log("j="+j,"i="+i);
            _calendar+="i"; 
            console.log(_calendar); 
            var _calendar="";                                               
}
}
结果为:
undefinedi //j=0,i=1 ,因为累加操作的初始化值typeof为undefined
i //j=0 i=2

五,既有Number累和又有String拼接

var _calendar="";
for(var j=0;j<2;j++){
for (var i = 1; i <=31; i++) {
         console.log("j="+j,"i="+i);
         _calendar+=i+"i";
        console.log(_calendar);                                             
}
}
结果为:
1i  //j=0 i=1
1i2i //j=0 i=2
...
1i2i3i4i5i6i7i8i9i10i11i12i13i14i15i16i17i18i19i20i21i22i23i24i25i26i27i28i29i30i31i //j=0 i=31
1i2i3i4i5i6i7i8i9i10i11i12i13i14i15i16i17i18i19i20i21i22i23i24i25i26i27i28i29i30i31i1i2i3i4i5i6i7i8i9i10i11i12i13i14i15i16i17i18i19i20i21i22i23i24i25i26i27i28i29i30i31i //j=1 i=31

当number与字符串进行+运算时,会把number转为字符串进行字符串的拼接,并且不再进行number之间的累和运算

    原文作者:斑翅果蝇
    原文地址: https://www.jianshu.com/p/5baf67eec76e
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞