JavaScript基础之运算符详解
运算符
算术运算符
算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等。算术运算符接收数值作为操作数并返回单个数值。数值可以是文字或变量。
| 运算符 | 举例 | 说明 |
|---|---|---|
| + | 4+2 //返回6 | 求和 |
| - | 4-2 //返回2 | 求差 |
| * | 4*2 //返回8 | 求积 |
| / | 4/2 //返回2 | 求商 |
| % | 4%2 //返回0 | 取模（取余数）,开发中经常用于作为某个数字是否被整除 |
注意：在计算失败时，显示的结果是 NaN （not a number）
示例：加法运算符
var a=10,b=5;
var x="2",y="4";
//1.+加法
var sum=x+y;
console.log(10+5); //输出值：15
console.log(sum); //输出值：24
在减法运算符中，如果值是字符串、布尔值、Null或未定义，JavaScript引擎将：
- 首先，使用该函数将值转换为数字Number()
- 其次，再在进行减法
示例：减法运算符
//2.-减法
console.log(10-5); //输出值：5
console.log("10"-1); //输出值：9
//布尔值true运算相当于1
console.log(true-10); //输出值：-9，
//布尔值false运算相当于0
console.log(false-10); //输出值：-10
console.log(true-false); //输出值：1
var s;
console.log(10-s); //输出值：NaN
console.log(s-10); //输出值：NaN
var x=null;
console.log(10-x); //输出值：10
在乘法运算符中，如果任一值都不是数字，JavaScript引擎会使用该Number()函数将其隐式转换为数字并执行乘法
示例：乘法运算符（*）
//3. *乘法
console.log(10*5); //输出值：50
console.log("2"*2); //输出值：4
在除法运算符(/)中，如果其中一个值不是数字，JavaScript引擎会将其转换为数字以进行除法
示例：除法运算符
//4.除法
console.log(10/2); //输出值：5
console.log("4"/2); //输出值：2
示例：余数运算符
//5.余数
console.log(-11 % 2); //输出值：-1
console.log(5 % 2); //输出值：1
console.log(10 % 0); //输出值：NaN
JavaScrpt中优先级越高越先被执行，优先级相同时以书从左向右执行
- 乘，除，取余优先级相同
- 加，减优先级相同
- 乘，除，取余优先级大于加，减
- 使用 () 可以提升优先级
总结:先乘除后加减，有括号先算括号里面的
赋值运算符
赋值运算符（=）是对变量进行赋值的运算符。= 是将等号右边的值赋予给左边, 要求左边必须是一个容器（变量）
语法：
var x=y;
下表说明了赋值运算符，是另一个运算符和赋值的缩写
| 运算符 | 示例 | 等同于 |
|---|---|---|
| = | x = y | x = y |
| += | x += y | x= x + y |
| -+ | x -= y | x = x - y |
| *= | x * = y | x=x * y |
| /= | x / = y | x= x / y |
| &= | x & = y | x= x & y |
| | = | x | =y | x= x | y |
| ^ = | x ^ =y | x=x ^ y |
| ** = | x ** =y | x= x ** y |
| <<= | x << = y | x= x << y |
| >>= | x >> =y | x = x >> y |
| >>>= | x >>> y | x = x >>> y |
示例：
var x=10,y=1;
x +=10;
console.log(x); //输出值：20
x -=2;
console.log(x); //输出值：18
y *=5
console.log(y); //输出值：5
x /=10;
console.log(x); //输出值：1.8
x %=10;
console.log(x); //输出值：1.8
一元运算符
一元运算符作用于一个值。下表显示一元运算符及其含义：
| 一元运算符 | 说明 | 作用 |
|---|---|---|
| +x | 一元加 | 将值转换为数字 |
| - x | 一元减 | 将值转换为数字并将其取反 |
| ++x | 自增运算符（前缀） | 变量自身的值加1 |
| –x | 自减运算符（前缀） | 变量自身的值减1 |
| x++ | 自增运算符（后缀） | 变量自身的值加1 |
| x– | 自减运算符（后缀） | 变量自身的值减1 |
一元加号（+）
一元加号是一个简单的加号（+）。如果将一元加号放在数值之前，则不会执行任何操作。示例如下：
var x=10;
var y=+x;
console.log(y); //输出值：10
当你将一元运算符应用于非数字值时，它会使用Number()具有以下表中规则的函数执行数字转换：
| 值 | 结果 |
|---|---|
| boolean | false相当于0，true相当于1 |
| string | 根据一组特定规则转换为数字值 |
| object | 调用valueOf() 或 toString()方法来获取转换为数字的值 |
示例：使用一元运算符将字符串转换“10”为数字10
//1.使用一元运算符将字符串转换"10"为数字10
var s="10";
console.log(typeof +s); //输出值：number
console.log(s); //输出值：10
示例：使用一元加运算符 ( +) 将布尔值转换为数字false为0和true为 1。
//2.true为1，false为0
var a=true,b=false;
console.log(+a); //输出值：1
console.log(+b); //输出值：0
一元减号（-）
一元减号运算符是单个减号（-）。如果将一元减运算符应用于数字，则会对该数字求负。以下示例：
var minX=10;
var minY=-minX;
console.log(minY); //输出值：-10
如果将一元减运算符应用于非数字值，它会使用与一元加运算符相同的规则将该值转换为数字，然后对该值求反。
自增/自减运算符
自增运算符有两个加号（++）,自减运算符有两个减号（–）
自增和自减运算符都有两个版本：前缀和后缀。您可以将自增或自减运算符的前缀和后缀版本放置在它们所应用的变量之前和之后。
前缀递增或递减时，JavaScript 在计算语句之前会更改变量
// 1. 前置自增
//前缀递增或递减时，JavaScript 在计算语句之前会更改变量
var i = 1,t=1;
++i;
--t;
console.log(i,t); //输出值：2,0
var i = 1,t=1;
console.log(++i + 1); // 输出值:3
console.log(--t +1); //输出值：1
后缀递增或递减运算符在计算语句后更改值
//2. 后置自增
//后缀递增或递减运算符在计算语句后更改值
var i = 1,t=1;
i++;
t--;
console.log(i,t); //输出值：2 0
var i = 1,t=1;
console.log(i++ + 1); //输出值：2
console.log(t-- +1); //输出值：2
console.log(i,t); //输出值：2 0
将递增/递减运算符应用于非数字值时，它执行以下步骤：
- 首先，使用与一元加 (+) 运算符相同的规则将值转换为数字。
- 然后，对该值加一或减一。
注意：
- 只有变量能够使用自增和自减运算符
- 可以在变量前面也可以在变量后面，比如: x 或者 ++x
位运算符
在JavaScript中，位运算执行时会先将操作数转换为二进制数，操作完成后将返回值转换为十进制。
位运算符作用如下
| 运算符 | 描述 | 举例 | 等同于 | 结果 | 十进制 |
|---|---|---|---|---|---|
| & | 与 | 5&1 | 0101&0001 | 0001 | 1 |
| | | 或 | 5|1 | 0101|0001 | 0101 | 5 |
| ^ | 异或 | 5^1 | 0101^0001 | 0100 | 4 |
| << | 有符号左位移 | 5<<1 | 0101<<1 | 1010 | 10 |
| >> | 有符号右位移 | 5>>1 | 0101>>1 | 0010 | 2 |
| >>> | 无符号右位移 | 5>>>1 | 0101>>>1 | 0010 | 2 |
<script>
console.log(5&1); //输出值： 1
console.log(5|1); //输出值： 5
console.log(5^1); //输出值：4
console.log(5<<1); //输出值：10
console.log(5>>1); //输出值：2
console.log(5>>>1); //输出值：2
</script>
比较运算符
JavaScript脚本语言中比较运算符用于比较两个数据大小、是否相等，根据比较结果返回一个布尔值（true / false），指示比较结果是否为真
下表显示JavaScript中的比较运算符
| 运算符 | 作用 |
|---|---|
| > | 左边是否大于右边 |
| < | 左边是否小于右边 |
| >= | 左边是否大于或等于右边 |
| <= | 左边是否小于或等于右边 |
| == | 左右两边值是否相等 |
| === | 左右两边是否类型和值都相等 |
| != | 左右值不相等 |
| !== | 左右两边是否不全等（值或类型之一不相等） |
<script>
console.log(3 > 5)
console.log(3 >= 3)
console.log(2 == 2)
// 比较运算符有隐式转换 把'2' 转换为 2 双等号 只判断值
console.log(2 == '2') // true
// console.log(undefined === null)
// === 全等 判断 值 和 数据类型都一样才行
// 以后判断是否相等 请用 ===
console.log(2 === '2')
console.log(NaN === NaN) // NaN 不等于任何人，包括他自己
console.log(2 !== '2') // true
console.log(2 != '2') // false
console.log('a' < 'b') // true
console.log('aa' < 'ab') // true
console.log('aa' < 'aac') // true
</script>
逻辑运算符
在JavaScript中，逻辑运算符用于两个逻辑型数据之间的操作，返回值的数据类型为布尔值。可以把多个布尔值放到一起运算，最终返回一个布尔值
| 运算符 | 描述 | 特点 | 口诀 |
|---|---|---|---|
| && | 逻辑与 | 符号两边有一个假的结果为假 | 一假则假 |
| || | 逻辑或 | 符号两边有一个真的结果为真 | 一真则真 |
| ! | 逻辑非 | true变false false变true | 真变假，假变真 |
| A | B | A && B | A || B | !A |
|---|---|---|---|---|
| false | false | false | false | true |
| false | true | false | true | true |
| true | false | false | true | false |
| true | true | true | true | false |
示例：
<script>
//逻辑与 一假则假
console.log(true && true); //输出值：true
console.log(false && true); //输出值：false
console.log(true && false); //输出值：false
console.log(false && false); //输出值：flse
//逻辑或 一真则真
console.log(true || true); //输出值：true
console.log(true || false); //输出值：true
console.log(false || true ); //输出值：true
console.log(false || false); //输出值：false
//逻辑非 取反
console.log(!true); //输出值：false
console.log(!false); //输出值：true
</script>
逻辑运算符优先级： ！> && > ||
三元运算符
三元运算符是JavaScript唯一使用三个操作数的运算符：一个条件后跟一个问号(?)，如果条件为真，则执行冒号（:）前的表达式；若条件为假，则执行最后的表达式。
语法：
condition ? exprIfTrue : exprIfFalse
参数说明
- condition：计算结果用作条件的表达式
- exprIfTrue：如果condition计算结果为真（true），则执行该表达式
- exprIfFalse：如果condition计算结果为假（false），则执行该表达式
除了false,可能的假值表达式还有：null,NaN,0,空字符串（“”）和undefined。如果condition是其中任何一个，那么三元运算符中就执行exprIfFalse表达式执行的结果
示例：
<script>
var a=10,b=2,max;
max=a>b?a:b;
console.log(max); //输出值：10
</script>