你是真的懂for循环的 i++ 与 ++i 吗？

Dear 丶 2022-09-03 05:30 170阅读 0赞

前记：昨天晚上，当台风伴随暴雨，雨滴拍打窗台，滴答滴答。惊动了，我小手一抖，撸码撸错了位置，把 **i++**，撸出了 **++i** 。  
可能小手反射弧过长，大脑反应迟钝，小手就顺带点了Run。。。  
结果。。。。竟然程序正常运行了？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTUxNTQz_size_16_color_FFFFFF_t_70]  
我滴个乖乖。这个是什么gui ?  
吓得我赶紧连忙一口气连撸出10行代码。

let i = 0 ;
    console.log(i); 	//0
    console.log(i++); 	//0
    console.log(i++);	//1
    console.log(i);		//2
    console.log( '\n' );
    let j = 0 ;
    console.log(j);		//0
    console.log(++j);	//1
    console.log(++j);	//1
    console.log(j);		//2

输出结果的确如我所料，经查阅资料，得到一个官方解析。

> i++ 返回原来的值，++i 返回加1后的值

不错不错，看来大学【程序设计】还是没白学的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTUxNTQz_size_16_color_FFFFFF_t_70 1]  
那么，问题就来了，既然i++与++i结果不一样，为什么刚才的for循环，竟然？？  
这不解之谜，我马上拿起电脑再撸10行代码。  
这次我除了 i++ 与 ++i 外，再增加了一个最常见的一个i+=1进行试验。

for(let i = 0 ; i < 5 ; i++){ 
        console.log('i++,',i);
    }
    console.log( '\n' );	//这个是分割符号
    for(let i = 0 ; i < 5 ; ++i){ 
        console.log('++i,',i);
    }
    console.log( '\n' );	//这个是分割符号
    for(let i = 0 ; i < 5 ; i+=1){ 
        console.log('i+=1,',i);
    }

一顿猛虎操作后，结果如下：

i++, 0
    i++, 1
    i++, 2
    i++, 3
    i++, 4
    
    ++i, 0
    ++i, 1
    ++i, 2
    ++i, 3
    ++i, 4
    
    i+=1, 0
    i+=1, 1
    i+=1, 2
    i+=1, 3
    i+=1, 4

惊喜吧？竟然 **在for 循环中 i++，++i，i+=1结果一致**。

经查阅：

> `for (语句 1; 语句 2; 语句 3) { 被执行的代码块 }`  
> 语句 1 （代码块）开始前执行
> 
> 语句 2 定义运行循环（代码块）的条件
> 
> 语句 3 在循环（代码块）已被执行之后执行

其实从这上面资料可以看出， i++、++i、i+=1的意义是等价的，执行完该行代码后，才进入下一轮循环体。  
就好像说你要走100米，先出哪只脚没什么分别。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTUxNTQz_size_16_color_FFFFFF_t_70 2]  
解决完这个疑问，再也不怕写手撕算法时，傻傻分不清楚了。  
但是，值得注意的一点是， i++、++i、i+=1，执行的顺序不同，执行性能也是有所区别。  
至于快多少呢？下面亲测十轮。

console.time('foreach1');
    for(let i = 0 ; i < 5 ; i++){ 
    }
    console.timeEnd('foreach1');
    
    console.time('foreach2');
    for(let i = 0 ; i < 5 ; i+=1){ 
    }
    console.timeEnd('foreach2');
    
    console.time('foreach3');
    for(let i = 0 ; i < 5 ; ++i){ 
    }
    console.timeEnd('foreach3');

经多次测量，结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTUxNTQz_size_16_color_FFFFFF_t_70 3]  
实验结论，**++i的消耗最小，其次是i+=1，性能消耗最大是i++**。  
通过此轮实验，追求性能极致的小哥哥姐姐们，懂得以后for循环用哪个递增了啵？

觉得有帮到你的，点个赞再走！  
你的点赞，是我坚持的动力！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTUxNTQz_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTUxNTQz_size_16_color_FFFFFF_t_70]: /images/20220829/fd40e1e0d9be4e3c85088bc7c64cc011.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTUxNTQz_size_16_color_FFFFFF_t_70 1]: /images/20220829/f2fd64fa6cfe440e8cfccf6fd31ae31c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTUxNTQz_size_16_color_FFFFFF_t_70 2]: /images/20220829/2ddf1c7dff0d4a718ff55c0c7b17fcb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTUxNTQz_size_16_color_FFFFFF_t_70 3]: /images/20220829/442186db1b004a1dbc86953784060a19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE1OTUxNTQz_size_16_color_FFFFFF_t_70 4]: /images/20220829/b9c8ecc1542b42b38ac4575286874d61.png