美文网首页JavaScript 进阶营
javascript for循环中 String拼接 区别于Nu

javascript for循环中 String拼接 区别于Nu

作者: 斑翅果蝇 | 来源:发表于2018-08-25 10:08 被阅读40次

    本文目的在于复现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之间的累和运算

    相关文章

      网友评论

        本文标题:javascript for循环中 String拼接 区别于Nu

        本文链接:https://www.haomeiwen.com/subject/vebwiftx.html