本文详细介绍了JavaScript中的各种运算符，包括算术运算符（如加减乘除、自增自减）、比较运算符（如大于、小于、等于）、逻辑运算符（如与、或、非）以及赋值运算符。还特别提到了浮点数精度问题、自增和自减运算符的前置与后置差异，并给出了运算符优先级的规则。此外，还讨论了Math对象的一些常见方法，如PI、sqrt等。
目录
运算符
运算符（operator）也被称为——是用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript中常用的运算符有:
- 算数运算符
- 自增和自减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
1 算术运算符
+ - * / %(取余 取模)
+ - 正负
++ 自增 -- 自减
2 赋值运算符
= += -= *= /= %=
3 比较运算符
> >= < <= ==等于 ===全等 （恒等 ，真等） != !==
4 逻辑运算
&& || ！
5 条件运算符(三目运算符)
表达式 ? 结果1 : 结果2
1 算术运算符
1.1 算术运算符概述
概念：算术运算使用的符号,用于执行两个变量或值的算术运算。
| 运算符 | 描述 | 实例 |
| + | 加 | 10 + 20 = 30 |
| - | 减 | 10-20 = ^10 |
| * | 乘 | 10*20 = 200 |
| / | 除 | 10/20 = 0.5 |
| % | 取余数（取模） | 返回除法的余数9%2 = 1 |
<script>
// + - * / %(取余 取模) (二元运算符)
var a = 10;
var b = 20;
var c = a + b;
console.log(c); //30
console.log(a - b, a * b, a / b, a % b);
//-10, 200, 0, 10
console.log(9 % 3, 8 % 3, 5 % 17);
//0, 2, 5
// 一元运算符 + -
console.log(10 + -2); //8
console.log(10 - -2); //12
</script>1.2 浮点数精度问题
浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数。
<script>
var result = 0.1 + 0.2;
console.log(result); //结果不是 0.3,而是:0.30000000000000004
console.log(0.07 * 100);//结果不是 7, 而是:7.000000000000001
</script>这里说明一下精度丢失的问题，当使用控制台输出0.2+0.1时，在控制台中得到的结果不是0.3，而是0.30000000000000004，出现了精度丢失。所以：不要直接判断两个浮点数是否相等。
1.3 表达式和返回值
表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合。
简单理解：是由数字、运算符、变量等组成的式子。
表达式最终都会有一个结果，返回给我们，我们将其称为返回值。
2 自增和自减运算符（也属于算术运算符）
自增运算符和自减运算符属于一元运算符。
| 运算符 | 描述 | 实例 |
| ++ | 自增 | x = ++y |
| x = y++ | ||
| -- | 自减 | x = --y |
| x = y-- |
2.1 自增和自减运算符概述
如果需要反复给数字变量添加或减去1，可以使用自增运算符或自减运算符来完成。
在JavaScript中，自增（+ + ）和自减（--）在变量前面时，我们可以称为前置运算符。
在变量后面时，我们可以称为后置运算符。
注意：递增和递减运算符必须和变量配合使用。
2.2 运算符的前置与后置
2.2.1 前置运算符
定义一个变量num，++num前置递增，即自加1，相当于num = num + 1，但是++num写起来更简单。可以将其简单理解为：先自增，再赋值。（目前还没有说明 return 的概念，这里先用C语言举例）
用代码理解，++num 类似于下方代码。
int temp = num;
num = num + 1;
return num;--num 与 ++num 类似，不再过多赘述。
2.2.2 后置运算符
num++ 为后置递增，同样为自加1，类似于num = num + 1 。与 ++num 不同的是，num++ 为先自增，再返回自增之前的值。用代码理解，num++类似于下方代码。
int temp = num;
num = num + 1;
return temp;同样的，num-- 与 num++类似，不再过多赘述。
（这里放一个我曾经考研时期看到的一个博客，详细介绍了 num++ 与 ++num 的区别。一看就懂的i++和++i详解_++i和i++_android_cai_niao的博客-CSDN博客）
小练习
分别计算以下结果。
var a = 10; ++a;var b = ++a + 2;var c = 10; c++;var d = c++ + 2;var e = 10; var f = e++ + ++e;以上结果分别为：
11
14
11
13
22
小结
- 前置递增和后置递增运算符可以简化代码的编写，让变量的值+1比以前写法更简单
- 单独使用时，运行结果相同
- 与其他代码联用时，执行结果会不同
- 后置：先自增，再返回自增之前的值
- 前置：先自增，再返回自增之后的值
- 开发时，大多使用后置递增/减，并且代码独占一行，例如：num++; 或者 num--;
3 比较运算符
概念：比较运算符（关系运算符）是比较两个值。比较运算后，会返回布尔值（true / false ）作为比较运算的结果。
| 运算符名称 | 说明 | 案例 | 结果 |
| < | 小于号 | 1 < 2 | true |
| > | 大于号 | 1 > 2 | false |
| >= | 大于等于号（大于或者等于） | 2 >= 2 | true |
| <= | 小于等于号（小于或者等于） | 3 <= 2 | false |
| == | 双等号（会转型） | 37 == 37 | true |
| != | 不等号 | 37 != 37 | false |
| === | 全等要求值和数据类型都一致 | 37 === '37' | false |
这里再举一个 == 与 === 的例子。
console.log(18 == '18');
console.log(18 === '18');可以看到在控制台中输出的结果如下。
| 符号 | 作用 | 描述 |
| = | 赋值 | 将=右边的值给=左边 |
| == | 判断 | 判断==两边是否相等，但此时可能发生隐式转换 |
| === | 全等 | 判断两边的值和数据类型是否完全相同 |
4 逻辑运算符
4.1 逻辑运算符概述
概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断。
| 运算符名称 | 说明 | 案例 | 结果 |
| && | and | (x < 10 && y > 1) 为 true | true |
| || | or | (x==5 || y==5) 为 false | false |
| ! | not | !(x==y) 为 true | true |
4.2 逻辑与&&
若 && 两边结果都为 true，则返回 true。否则，返回 false。
| var res = 2 > 1 && 3 > 1; | var res = 2 > 1 && 3 < 1; | |||
| true | true true | false | true false | |
| 两边都为true | 其中一个为false | |||
| var res = 2 < 1 && 3 > 1; | var res = 2 < 1 && 3 < 1; | |||
| false | false true | false | false false | |
| 其中一个为false | 两边都为false | |||
4.3 逻辑或||
若 || 两边结果都为 false，则返回 false。否则，返回 true。
| var res = 2 > 1 || 3 > 1; | var res = 2 > 1 || 3 < 1; | |||
| true | true true | true | true false | |
| 两边都为true | 其中一个为true | |||
| var res = 2 < 1 || 3 > 1; | var res = 2 < 1 || 3 < 1; | |||
| true | false true | false | false false | |
| 其中一个为true | 两边都为false | |||
4.4 逻辑非!
逻辑非（!）也叫作取反符，用来取一个布尔值相反的值，如 true 的相反值是 false。
var isOk = !true;
console.log(isOk); // false小练习
var num = 7; var str = '敲代码真好玩~' console.log(num > 5 && str.length >= num); console.log(num <5 && str.length >= num); console.log ( ! (num < 10)); console.log(!(num< 10 ||str.length == num ));运行结果如下：
4.5 短路运算（逻辑中断）
短路运算的原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值。
4.5.1 逻辑与
- 语法：表达式1 && 表达式2
- 如果第一个表达式的值为真，则返回表达式2
- 如果第一个表达式的值为假，则返回表达式1
console.log(123 && 456);
console.log(0 && 456);
console.log(123 && 456 && 789);上述结果如下图所示：
4.5.2 逻辑或
- 语法：表达式1 || 表达式2
- 如果第一个表达式的值为真，则返回表达式1
- 如果第一个表达式的值为假，则返回表达式2
console.log(123 || 456);
console.log(0 || 456);
console.log(123 || 456 || 789);上述结果如下图所示：
观察下方结果：
var num = 0; console.log(123 || num++); console.log(num);上述结果如下图所示：
总结：如果运算符两边是操作数，有一个操作数不是布尔值的情况，返回的不一定是布尔值，可能是原值。
5 赋值运算符
| 运算符名称 | 使用例 | 等同于 | 案例 | 结果 |
| = | x = y | x = 5 | x == 5 | |
| += | x += y | x = x + y | x = 5 x += 10 | x == 15 |
| -= | x -= y | x = x - y | x = 10 x -= 5 | x == 5 |
| *= | x *= y | x = x * y | x = 5 x *= 10 | x == 50 |
| /= | x /= y | x = x / y | x = 10 x /= 5 | x == 2 |
| %= | x %= y | x = x % y | x = 10 x %= 5 | x == 0 |
6 条件运算符（三元或三目运算符）
条件运算符使用格式：条件表达式 ? 值1 : 值2
若条件表达式的结果为true，则返回值1，若条件表达式的结果为false，则返回值2。
var age = 21;
var beverage = age >= 18 ? "Beer" : "Juice";
console.log(beverage);上述结果如下图所示：
7 运算符优先级及案例
- 一元运算符里面的逻辑非优先级很高
- 逻辑与比逻辑或优先级高
alert(1 || 'a' && 2); // 1从左到右算起
- （）圆括号的优先级最大
- 一元运算符 ++ 、 --( ++a 优先级小于 a++ )、 ! 、+... 、-...
- 算术运算符 **(幂) 、* 、 / 、 %(取余) 、 + 、 -
- 比较运算符 < 、> 、 >= 、<= 、 == 、 != 、=== 、!==
- 逻辑运算符 &&（逻辑与）、||（逻辑或）
- 三元运算符 条件表达式 ? 值1 : 值2
- 赋值运算符 =、 += 、-= 、*= 、/= 、%=
- 展开运算符 ...
- 逗号运算符 ,
也可以看下表。
下表按从最高到最低的优先级列出JavaScript运算符。具有相同优先级的运算符按从左至右的顺序求值。
| 运算符 | 描述 |
| . [] () | 字段访问、数组下标、函数调用以及表达式分组 |
| ++ -- - ~ ! delete new typeof void | 一元运算符、返回数据类型、对象创建、未定义值 |
| * / % | 乘法、除法、取模 |
| + - + | 加法、减法、字符串连接 |
| > >>> | 移位 |
| < <= > >= instanceof | 小于、小于等于、大于、大于等于、instanceof |
| == != === !== | 等于、不等于、严格相等、非严格相等 |
| & | 按位与 |
| ^ | 按位异或 |
| | | 按位或 |
| && | 逻辑与 |
| || | 逻辑或 |
| ? : | 条件 |
| = oP= | 赋值、运算赋值 |
| , | 多重求值 |
8 Math对象
这里多补充一个Math对象。
Math（算数）对象的作用是：执行普通的算数任务。
Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。
使用 Math 的属性/方法的语法：
var x = Math.PI;
var y = Math.sqrt(16);注意： Math对象无需在使用这个对象之前对它进行定义。
下面是可能常用的一些Math方法。
- Math.PI 圆周率
- Math.abs(x) 返回 x 的绝对值
- Math.ceil(x) 对数进行上舍入
- Math.floor(x) 对 x 进行下舍入（注意辨明和parseInt()的区别）
- Math.round(x) 四舍五入。
- Math.max(x,y,z,...,n) 返回 x,y,z,...,n中的最高值
- Math.min(x,y,z,...,n) 返回 x,y,z,...,n中的最低值
- Math.pow(x,y) 返回 x 的 y 次幂
- Math.random() 返回 0 ~ 1 之间的随机数 范围：[0,1) 左闭右开
- Math.sqrt(x) 返回数的平方根
使用案例如下：
console.log(Math.PI);
console.log(Math.abs(-5));
console.log(Math.ceil(5.18));
console.log(Math.ceil(-5.18));
console.log(Math.floor(5.18));
console.log(Math.floor(-5.18));
console.log(Math.round(5.45));
console.log(Math.round(5.55));
console.log(Math.max(8, 9, '15', '6'));
console.log(Math.min(15, 9, '100', 98));
console.log(Math.pow(2, 3));
console.log(2 ** 3);
console.log(Math.sqrt(64));结果如下图所示：
其中，在调用Math.max(x,y,z,...,n)方法时，其中的数字发生了隐式转换，字符串'15'转换为了number型15。
另外，2**3 与 Math.pow(2, 3) 的作用相同，同样为2的3次幂。
单独说一下随机数生成。生成某一特定区间的随机数公式为：
Math.floor( Math.random() * (max - min + 1) ) + min。其中，max为特定区间的最大值，min为特定区间的最小值。例如生成1~10之间的随机数（整数），方法为Math.floor( Math.rando,() * (10 - 1 + 1) ) + 1。
说明一下个人对于该公式的理解。
Math.random() 生成的为0~1之间的随机数并且取不到1，我们定义一个变量x用来存储生成的随机数。若现在需要生成最大值为20的随机整数，假设此时 x 为无限接近于1的数但是不等于1，我们需要对 x 乘 20（解释了公式中的max）并加上1，此时 x 为无限接近于21但不等于21的数字。通过 Math.floor() 方法x即可取到20（解释了公式中的 Math.floor() 以及为什么需要+1）。
接下来说明公式中的 min，x 同样为存储的随机数。如果我们需要取到一个2~20的随机数，由于 x 的最小值为0，0乘上任何数都为0，所以需要在公式的结果加上最小值（解释了为什么需要 + min）。由于我们需要生成2~20的随机数，并且在公式最后已经加上了2，所以Math.random() 乘上某个数的最大值为18，并且需要保证这个数与 max 和 min 有关联，不难想到 Math.floor( Math.random() * (max - min) )，但Math.random() * (max - min) 生成的数区间为 [0,18) 通过调用 Math.floor() 方法，生成的数字为0~17之间的整数，所以需要在max - min后+1（解释了为什么是max - min +1）。
生成20~30之间的随机整数：
console.log( Math.floor( Math.random() * (30 - 20 + 1) ) + 20);生成10次随机数的结果如下所示：
1054
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
