JS基础易错点（1）自增和自减问题

本文链接：https://blog.youkuaiyun.com/GTX2077/article/details/107965826

自增与自减

（1）自增的含义

自增和自减性质相同，这里拿自增来具体说明这两者的性质。

自增指的是对于一个变量自增后，原变量的值会在基础上增加1，自增符号为（++）。
自增分成两种：后++(a++)和前++(++a）。无论是a++、还是++a，都会使原变量的值自增1，但不同的是a++和++a的值不同

这里就出现疑问了，怎么a++和++a的都会使原变量的值自增1，怎么还说a++和++a的值不同呢！

（2）问题所在

要想理解这个问题，首先要明确一个概念：a++和++a不是变量！
a++和++a是一个表达式，而不是变量，表达式有表达式的值，变量有变量的值。
a++和++a的值不同说的是这两个表达式的值不同，而不是a这个变量值不同，他们所得结果a这个变量的值是相同的

（3）a++和++a的区别

这里举个例子详细说明下a++和++a的区别。

这里我设了a、b两个值，都为1，a进行前++、b进行后++。然后输出控制台，其结果都为2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自增自减问题</title>
	<script type="text/javascript">
	var a = 1;
		a++;
		console.log("a="+a);
	var b = 1;
		++b;
		console.log("b="+b);
	</script>
</head>

<body>
</body>
</html>

在这里插入图片描述
~~请忽略语法不正确问题，我也不知道怎么回事~~
通过输出结果可以看出两种自增方式最后输出的值是一样的，也就是一个变量通过两种自增方式所得的最终值都是原变量+1

最终输出变量的相同了，那我们来验证他们本身值是否也相同。
让控制台直接输出a++和++b这两个表达式的值。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自增自减问题</title>
	<script type="text/javascript">
	var a = 1;
		console.log("a++="+ a++);
	var b = 1;
		console.log("++b="+ ++b);
	</script>
</head>

<body>
</body>
</html>

在这里插入图片描述
由此可以看出虽然a和b的值都为1，但a++和++b的值并不同，原因如下：

a++的值等于原变量的值（也就是变量自增前的值）
++b的值等于原变量的新值（也就是变量自增后的值）

简单来说a++和++b在js中的最终变量的运算结果相同，但运算的流程不同，所以导致这两个表达式的结果不同（这里是表达式的结果而不是最终变量，要分清）。

（4）练习例子

1.给a一个设置一个20的常量，让其进行如下运算并输出。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自增自减问题</title>
	<script type="text/javascript">
	var a = 20;
		var a = a++ + ++a + a;
		console.log("a="+a);
	</script>
</head>

<body>
</body>
</html>

在这里插入图片描述

其实这个运算可以分解为以下几个步骤

首先看式子的第一部分“a++”;a=20，那么a++=20(自增前的值）
经过第一部分a++表达式运算之后，a=21(a自增1)
然后看第二部分“++a”，这时a=21,那么++a=22（自增后的新值）；
最后看第三部分“a”，经过第二部分的++a表达式运算之后，a=22;
所以上面那个式子最终可以看做a=a++(20)+ ++a(22)+a(22)=64
所以，要想理解自增的含义，必须要分清a变量和++a或a++表达式的区别