JavaScript運算符：遞增遞減運算符前置和後置的區別

從兩段代碼提及

var num1 = 2;
var num2 = 20;
var num3 = --num1 + num2;
var num4 = num1 + num2;
console.log(num1 +'-' + num2 +'-'+ num3 +'-' + num4)

將四個數分別打印是多少？

var num1 = 2;
var num2 = 20;
var num3 = num1-- + num2;
var num4 = num1 + num2;
console.log(num1 +'-' + num2 +'-'+ num3 +'-' + num4)

這段代碼運行以後將四個數分別打印又是多少？

若是你能果斷地說出答案而且能自圓其說，那也就不必繼續看下去了。

遞增運算符和遞減運算符

咱們都知道，JavaScript中的遞增運算符是 ++，遞減運算符是 --。簡單來講，遞增運算符就是將變量+1，遞減運算符就是讓變量-1，但是前置和後置結果是不同的，也是很容易混淆的。

前置型遞增（遞減）

前置型簡單理解就是先計算再賦值。例如

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

上面的表達式也能夠理解爲：

var a = 1;
a = a + 1;
var b = a;

後置型遞增（遞減）

後置型簡單理解就是先賦值再計算。例如

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

上面的表達式也能夠理解爲：

var a = 1;
var i = a;
a = a + 1;
var b = i;

原理

前置和後置型運算符之因此有上面的區別，是由於運算符的優先級。在各運算符按照優先級的不一樣由高到低排列順序中：

• 後置型遞增（遞減）運算符的優先級是17
• 前置型遞增（遞減）運算符的優先級是16
• 賦值運算符=的優先級是3

因此，++和--會優先於=執行。可是這邊我本身也還有個疑問，前置型的還能夠用優先級解釋，可是後置型的怎麼解釋呢，講道理它也比=的優先級高啊，這個我還有點疑問。

而後根據MDN上對遞增（++）的解釋:

• 若是後置（postfix）使用，即運算符位於操做數的後面（如 x++），那麼將會在遞增前返回數值。
• 若是前置（prefix）使用，即運算符位於操做數的前面（如 ++x），那麼將會在遞增後返回數值。

根據這個解釋，在例子中

var a = 1;
console.log(a++)  //1

a++其實是等於a遞增以前的數值的，也就是1，這個在開發中容易被忽略，要謹記。

總結

回到最上面的代碼，第一段代碼分別會打印：1-20-21-21，第二段代碼會打印：1-20-22-21

咱們開發中須要記住的是：前置型是先計算再返回數值，後置型是先返回數值再計算。

參考文章

• js中i++與++i的區別
• JavaScript運算符：遞增和遞減