javascript精雕细琢（二）：++、--那点事

目录

• 引言
• ++和--在数学运算中的计算规则
• ++和--在变量引用时的计算规则
• ++和--的数据转换应用

 

引言

　　对于接触JS时间不长的前端来说，刚开始要实现诸如轮播图，选项卡等小模块时，肯定会用到index索引来实现。而这其中很大一部分又会使用++（自加）、--（自减），所以清楚的知道++（自加）、--（自减）的计算模式，可以在运用时减少错误。本文将从数学运算、变量引用、数据转换3个方面，对++（自加）、--（自减）进行一个详细的说明，力求达到一个在通读全文后，明确++（自加）、--（自减）应用方式的效果。

 

一、++和--在数学运算中的计算规则

老规矩，先上代码

 　　　　let a = 1,
            b = 1;
        let num1 = a++ + b++, //num1执行前a=1,b=1，num1执行后a=2,b=2
            num2 = a++ + ++b, //num2执行前a=2,b=2，num2执行完后a=3,b=3
            num3 = ++a + b++, //num3执行前a=3,b=3，num3执行完后a=4,b=4
            num4 = ++a + ++b; //num4执行前a=4,b=4，num4执行完后a=5,b=5
        console.log(num1);    //结果为2，步骤分解: a + b（1 + 1）=> a++(2) => b++(2) => a=2,b=2;
        console.log(num2);　　//结果为5，步骤分解: a + (++b)（2 + 3） => a++(3) => a=3,b=3;
        console.log(num3);　　//结果为7，步骤分解: (++a) + b（4 + 3） => b++(4) => a=4,b=4;
        console.log(num4);　　//结果为10，步骤分解: (++a) + (++b)（5 + 5） => a=5,b=5;

　　通过以上代码，可以总结出++和--在数学运算出的计算规则如下（加减乘除没区别）：

　　　　1）当++、--写在变量前时，数学计算时，引用的是++、--未执行的变量值；

　　　　2）当++、--写在变量后时，数学计算时，引用的是++、--执行后的变量值；

　　

　　通过以上的理解，就不难看出，num1得到的求和结果实际上就是a + b，而num2实际上是a + (++b)，num3是(++a) + b，num4是(++a) + (++b)，但是求和归求和，++、--只是没在求和结果中执行，实际上变量的++、--都是执行了的，这一点要明确。

 

二、++和--在变量引用时的计算规则

上代码

 

　　　　 let num1 = 0,
            num2 = 0;
        let arr = [0, 1, 2, 3, 4, 5, 6];
        console.log(arr[num1++]); // 0  num1=1
        console.log(arr[++num2])  // 1  num2=1

 

　　通过以上代码，不难看出，当在变量引用时执行++、--，与数学运算有相似的规律。总结起来就是一句话——++、--在变量前，引用++、--执行后的变量值；++、--在变量后，引用当前变量值（即执行++、--前的值）。

 

三、++和--的数据转换应用

上代码

 

　　　　 let a = true;
        let b = false;
        let c = "a";
        console.log(++a); //2
        console.log(b++); //0
        console.log(c++); //NaN

 

　　一句话总结——对非Number类型的数据，应用++、--，相当于执行了Number()方法。如果转换后是number类型，则按上边的规则执行++和--，如果转换后不是number类型，则不执行++和--。输出NaN。不能直接进行类似++true的操作，必须通过声明变量值为true或false，然后再++、--。