前端学习

关于自增（自减）运算的一点问题

问题的引出

先来看一段代码

1
2
3
4
var a = 1;
var b = ++a + ++a;
console.log(a); // 3
console.log(b); //5

分析：这里a的计算过程很简单，第一个a是前置自增，所以一开始参与运算就自己变成2，后面一个a也是一样，但是第二个a的值自增之前已经是2了，所以自增之后就是3，那么赋值给b就是2+3=5了；而a的最终值是最后一次自增后的3.

1
2
3
4
5
6
var a = 1;
var b = a++ + ++a;
console.log(a) // 3
console.log(b); //4
//b=  1 + (2+1) 
//a = 1 + 2

分析：这里的第一个a由于是后置自增，按照运算的优先级来说是先进行计算的，第二优先级是前置自增，然后是+,最后才是赋值，但是有个问题：后置自增运算遵循的是递增操作是在整个语句求值之后执行的。那么，首先需要弄清出这里所说的整个语句求值之后具体是指哪个或者哪部分或者是赋值之前的后面所有语句？且按下不表.我们先看这段代码，这么分析，第一个a的值是先不进行自增计算的，也就是+号之前的a = 1，越过+号之后第二个前置自增的a，在没有进行自增之前到底是几？1 or 2？正确应该是2，第一个a在之前没有进行自增运算，但是到了第二个a这里的时候，第一个a遗留的自增运算已经结束，变成2了，那么在此基础上a进行最后一次自增就变成3，即a = 3. b的计算过程是b = 1 + 3 = 4. 这里我们不妨，做一下变换假如第二个a也是后置自增运算呢？那么第二个a参与加法运算的时候就是2，b的值就是 1 + 2 = 3了，而a的值会在加法结束之后自增变成3。
MDN上关于运算的优先级

1
2
3
4
5
6
var a = 1;
var b = a++ + a++;
console.log(a) //3
console.log(b); //3
//b = 1 + 2 =3
//a = 1 + 1 + 1 == > 3

分析：见上一条分析最后。这里有其他的观点指出后置自增运算可以看作是最后才进行自增运算的，像本例子两个完全一样的a后置自增，认为是1+1之后最后一个a再自增两次变成3的。然而实际并非如此。这里的a的自增运算并非最后一举自增两次形成，而是依次执行的，因而可以说上例说的整个执行语句指的就是，下一个运算符（+）之前的语句。

1
2
3
4
var a = 1;
var b = ++a + a++;
console.log(a) //3 1+1+1
console.log(b); //4

分析：第一个前置自增a先自增运算后a = 2，下一个a，能参与加法运算的也就是当前的2，所以b赋值是 2+2 =4.而a由于最后一次自增是后置，所以是前面运算完毕之后，在2的基础上自增1，a=3。

再多来几个看看

1
2
3
4
5
6
7
8
var a = 1;
var b = 2;
a++;
var num = ++a + a++ + a + ++b + b++;
//          3   3     4     3   3
console.log(num); // 16
console.log(a); //4
console.log(b); //4

分析：声明a变量赋值为1，紧接着a就有一个后置自增运算，幸运的是a没有参与到其他运算中，所以分号之后的a就变成2了。num中第一个前置自增a的值立马变成3，第一个加号之后的a由于是后置自增，在当前运算语句中是不能先自增的所以，此时的a值是前一个a的值即3，那么到第三个a出现的时候，第二个a的自增运算已经完成了，所以此时的a=4，同理可得b的第一个值是3，第二个b当前参与加法运算的值是3，但是运算完之后就自增变成4了。

1
2
3
4
5
6
7
8
9
var i = 1;
var j = 1;
var a = i++ + i++ + i++ + i++ + i++ + i++ + i++; // 7个
//      1 + 2 + 3 + 4 + 5 + 6 + 7
var b = ++j + ++j + ++j + ++j + ++j + ++j + ++j;
console.log(a); //28
console.log(i) //8
console.log(b); // 2+3+4+5+6+7+8 =35
console.log(j) // 8

再来更多一些，由于b的运算比较简单，不再赘述。看看a和i的变化，a总共有i的7次后置自增运算相加，第一个i后置自增，当前是1参与加法运算，后置可以理解为滞后一次自增，即当前参与运算不自增，第二个i累加了上一次i没有进行的自增，变成2，依次类推，a的运算过程是1+2+3+4+5+6+7=28，最后一个i是7，这是参与加法运算的i的值，还有一次后置自增，所以i的值最终结果是8.

1
2
3
4
5
6
7
8
9
var i = 1;
var b = i++ + ++i * i++ + i--;
//var b = i++ + ++i * (i++ + i--);
//        1       3 * 3     4
//        1       3 * (3 + 4) 
// i = 3, b = 14
// i = 3, b = 22
console.log(i);
console.log(b);

再来看一点好玩的，按照运算的优先级，i++(i–) > ++i > 乘 > + ,虽然有优先运算规则，但是i的运算过程是自左向右的，i的值是时刻变化的，后置自增遵循滞后一次自增，不难得出b运算中的第一个i是1，那为什么第二个变成了3呢？第二个i前置自增之前就已经是2了，自己再自增一次就变成3了，乘后面同样是后置自增，参与运算的自然是前一个i的值3，最后一个i需要先承接上一个i后置自增的后果变成4，等整个加法运算结束之后本身自减1，变成3，所以b的运算过程是1+3 3+4，i=3.我们可以验证一下i的变化或者自身运算是不是自左向右的，提升最后一个加法的优先级括起来，按照之前的思路分析，得出b的运算过程是1+3(3+4)=22,可以打印一下验证是正确的。

总结：
1.后置自增运算是滞后一次自增，当前参与的运算不自增；
2.同一变量的自增运算过程是自左向右的。

Recommended Posts