js中i++与++i的区别

导语

在javascript中，我们常常搞不懂i++与++i的区别，今天我们就来简单说一下。

i++的例子:

var i=1;
console.log(i); // 输出1

var a=i++;
console.log(i); //输出2
console.log(a); //输出1

++i的例子：

var i=1;
console.log(i);

var a=++i;
console.log(i); //输出2
console.log(a); //输出2

解释

我们通过两个例子，可以看出其中不同，当使用i++赋值给a后，a的值为1，而使用++i赋值给a后，a的值为2，而两例中i最终都为2

可见：

* 使用i++时，i先将自身的值赋值给变量a，然后再自增1

* 使用++i时，i先将自身的值自增1,再将自增后的值赋值给变量a

原理：

运算符优先级

我们知道，++作为后置递增时，优先级为16，而作为前置递增时，优先级为15

=作为赋值运算符时，优先级为3

所以，++会优先于=而执行

++运算符前置与后置的区别

我们看看MDN上对该运算符的说明：

If used postfix, with operator after operand (for example, x++), then it returns the value before incrementing.
If used prefix with operator before operand (for example, ++x), then it returns the value after incrementing.

简单翻译：

如果该运算符作为后置操作符，则返回它递增之前的值；
如果该运算符作为前置操作符，则返回它递增之后的值

所以，我们就知道， ++运算符会返回一个值，如果前置，则返回操作对象递增之后的值，如果后置，则返回操作对象递增之前的值。

当var a = i++时，实际上做了如下操作

i=1
j=i;
i=i+1;
a=j;

而var a = ++i时，实际上做了如下操作

i=1
j=i+1;
i=i+1
a=j;

拓展

设i=1，a = (i++)+(i++)+(++i)

那么a的值是？

我们可以将该运算简化为：

var i =1;

b=function(){

var j;
j=i;
i=i+1; //2

return j; //1

};

c=function(){

var m;
m=i; //2
i=i+1; //3

retrun m; //2

};

d=function(){

var n;
n=i+1; //4
i=i+1; //4

return n; //4

}

var a = b + c +d;

a=1+2+4=7;

所以当i=1，a = (i++)+(i++)+(++i)=1+2+4=7

var n = 0;
var m = 0;
console.log(++n);//1 //先运算再赋值
console.log(m++);//0 //先赋值再运算

var i = 1;
var a = i++;
console.log(a + "__" + i);//1__2   //a = 1;  此时i为2，但赋给a的是1
var b = ++i;
console.log(b+"__" + i);//3__3

//i++返回的是自增之前的值，++i返回的则是自增后的值。