当前位置：首页 > news >正文

【JavaScript】自增和自减、逻辑运算符

news 来源：原创 2025/4/27 8:13:45

1、自增和自减

（1）自增（++）

通过自增可以使变量在自身的基础上增加1；对于一个变量自增以后，原变量的值会立即自增1.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var ch = 1;ch++;document.writeln("ch=" + ch);</script>
</head>
<body>
</body>
</html>

结果:

自增分为两种：后++（例如：a++)和前++（例如：++a）

无论是a++还是++a，都会立即使原变量的值自增1，不同的是：a++和++a的值不同，a++的值等于原变量的值（自增前的值）；++a的值等于原变量新值（自增后的值）

后置++：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var ch = 1;document.writeln(ch++);document.writeln("<br>");document.writeln("ch=" + ch);</script>
</head><body>
</body></html>

结果：

前置++：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var ch = 1;document.writeln(++ch);document.writeln("<br>");document.writeln("ch=" + ch);</script>
</head><body>
</body></html>

结果：

（2）自减（--）

通过自减可以使变量在自身的基础上减1；自减分为两种：后--（a--)和前--（--a),无论是a--还是--a都会立即使原变量的值自减1；

不同的是：a--和--a的值不同，a--的值等于原变量的值（自减前的值）；--a的值等于原变量新值（自减后的值）

后置--：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var number = 20;document.writeln(number--);document.writeln("<br>");document.writeln("number=" + number);</script>
</head><body>
</body></html>

结果：

前置--：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var number = 20;document.writeln(--number);document.writeln("<br>");document.writeln("number=" + number);</script>
</head><body>
</body></html>

结果：

2、逻辑运算符

（1）！（非）

!可以用来对一个值进行非运算；所谓非运算就是对一个布尔值进行取反操作。

true变为false，false变true.

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var ch = false;var ch = !ch;document.writeln(ch);</script>
</head><body>
</body></html>

结果：

注意：如果对一个值进行两次取反，它不会变化

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var ch = false;var ch = !!ch;document.writeln(ch);</script>
</head><body>
</body></html>

结果：

如果对非布尔值进行运算，则会先将其转换为布尔值，然后再去取反

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var ch = 10;ch = !ch;document.writeln("ch=" + ch);document.writeln("<br>");document.writeln(typeof ch);</script>
</head><body>
</body></html>

结果：

特殊用法：利用这一特性：如果对非布尔值进行运算，则会先将其转换为布尔值，然后再去取反，可以将一个其他的数据类型转换为布尔值。可以为一个任意数据类型取两次反，来将其转换为布尔值。原理和Boolean()函数一样。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var ch = 10;ch = !!ch;document.writeln("ch=" + ch);document.writeln("<br>");document.writeln(typeof ch);</script>
</head><body>
</body></html>

结果：

（2）&&（与）

&&可以对其两侧的值进行与运算并返回结果。

运算规则：两个值只要有一个值为false就返回false,只有两个值都为true时，才会返回true。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var res1 = true && true;var res2 = true && false;document.writeln("res1=" + res1);document.writeln("<br>");document.writeln("res2=" + res2);</script>
</head><body>
</body></html>

结果：

注意：JS中的“与”属于短路的与，&&的左操作数为false，则不会看右操作数。，左操作数为true时，才会看右操作数。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>true && alert("hai");</script>
</head><body>
</body></html>

结果:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>false && alert("hai");</script>
</head><body>
</body></html>

结果：

（3）||（或）

运算规则：||的左右操作数都为false，则返回false，只要有一个true，则返回true。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var ch = false || false;var ch2 = true || false;document.writeln("ch=" + ch);document.writeln("<br>");document.writeln("ch2=" + ch2);</script>
</head><body>
</body></html>

结果：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>false || alert("ha");</script>
</head><body>
</body></html>

结果：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>true || alert("ha");</script>
</head><body>
</body></html>

结果：