运算符
运算符
运算符operator也被称为操作符，用于实现赋值、比较和执行算术运算等功能的符号
js中常见的运算符有算术运算符、递增和递减运算符、比较运算符、逻辑运算符、赋值运算符?
?算术运算符
算术运算符使用的符号，用于执行两个变量或值的算术运算
运算符之间要留有空格? console.log(1 + 1);
浮点数（就是小数）在进行算术符进行计算时，它的精确度不如整数
| 运算符 | 描述 | 实例 | 用途 |
| + | 加 | 10+20=30 | |
| - | 减 | 10-20=-10 | |
| * | 乘 | 10*20=200 | |
| / | 除 | 10/20=0.5 | |
| % | 取余数（取模） | 返回触发的余数9%2=1 | 余数为0说明数能被整除 |
?案列：算术运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//----- /除法
console.log(2 / 2);//1
//-----%取余
console.log(5 % 3);//余为2
// 浮点数问题
console.log(0.1 + 0.2);//0.30000000000000004
console.log(0.07 * 100);//7.000000000000001
</script>
</body>
</html>表达式与返回值?
?表达式是由数字、运算符、变量等能求得数值的有意义排列方法所得的组合
?表达式最终都会有一个结果，返回给我们，称这个结果为返回值
?案列：表达式与返回值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//2+2为表达式，4为返回值
console.log(2 + 2);//4
</script>
</body>
</html>?前增/后增 递增/递减运算符?
如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（--）运算符
?放在变量前的++/--称为 前置递增/减运算符，放在变量后的++/--称为 后置递增/减运算符
?前置、后置自增单独使用，效果是一样的，但是在表达式上使用符号的前后位置会对结果有影响
案例：递增/递减运算符?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// 自增加1方式一
var num=1;
num=num+1;
console.log(num);//2
//递增方式用在变量上没有差别
var age=2;
age++;
console.log(age);//3
var num=2;
++num;
console.log(num);//3
//递增方式在表达式上符号的前后会对结果有影响
var bed=10;
console.log(bed++ +10);//20
var tub=10;
console.log(++tub +10);//21
</script>
</body>
</html>比较运算符
比较运算符也叫关系运算符，就是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true/false）作为比较运算的结果
| 运算符名称 | 说明 | 案列 | 结果 |
| < | 小于 | 3<5 | true |
| > | 大于 | 3>5 | false |
| >= | 大于或等于 | 2>=2 | true |
| <= | 小于或等于 | 4<=3 | false |
| == | 判断值是否相等，会自动转换值类型 | 37=='37' | true |
| != | 不等于 | 37！=37 | false |
| === | 全等于，值和数据类型都要一样 | 37===37 | true |
| !== | 不全等于 | 37！==37 | false |
?案列：比较运算符
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
console.log(5 > 3);//true
//>= <=满足一个条件即可
console.log(2 >= 2);//true
//==自动转换值类型（隐式转换）,值相等就可以
console.log(37 =='37');//true
console.log(37 == 37);//true
//!=
console.log(18 != 18);//false
// ===必须值和数据类型一致
console.log(18 === 18);//true
console.log(18 === "18");//false
//!==
console.log(18 !== 18);//false
console.log(18 !== "18");//true
</script>
</body>
</html>
逻辑运算符
逻辑运算符是用于进行布尔值运算的运算符，返回值也是布尔值，经常用于多个条件的判断
?逻辑与 &&? ? ?两个结果都为true,结果才是true,只要有一个false，结果就是false
?逻辑或 ||? ? ? ? ?两个结果为false，结果才是false,只要有一个为true,结果就是true
?逻辑非 !? ? ? 值取反
| 逻辑运算符 | 说明 | 案例 |
| && | 逻辑与? ?and | true && false |
| || | 逻辑或? ?or | true | | false |
| ！ | 逻辑非? ?not | ! true |
?案例1：逻辑运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//逻辑与 && 两个结果都为true,结果才是true,只要有一个false，结果就是false
console.log(3 > 5 && 3 > 2);//false
console.log(3 < 5 && 3 > 2);//true
//逻辑或 || 两个结果为false，结果才是false,只要有一个为true,结果就是true
console.log(3 > 5 || 3 > 2 );//true
console.log(3 > 5 || 3 < 2);//false
//逻辑非 !
console.log(!true);//false
</script>
</body>
</html>?案例2：逻辑运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var num = 7;
var str = "我爱你~中国~";
//str.length为7
console.log(num > 5 && str.length >= num);//true
console.log(num < 5 && str.length >= num);//false
console.log(!(num<10));//false
console.log(!(num<10 || str.length == num));//false
</script>
</body>
</html>?逻辑中断 ||? /??&&
逻辑中断也叫短路运算，当值或者表达式参与逻辑运算时就是短路运算
当有多个表达式/值时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值
逻辑与 &&? ? ?
表达式1 && 表达式2
如果第一个表达式的值为真，就返回表达式2，如果第一个表达式的值为假，就返回表达式1
?逻辑或? ||? ? ?
表达式1 ||?表达式2
如果第一个表达式的值为真，就返回表达式1，如果第一个表达式的值为假，就返回表达式2
?案例1：逻辑中断
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//短路运算
//逻辑与 && 表达式1为真，返回表达式2,1为假，返回1
//数字里只有0是假的，其他都是真的
// 如果有空的或者否定的为假，其余为真
//假的有 0 空字符串'' null undefined NaN
console.log(123 && 456);//456
console.log(123 && 456 && 789);//789
console.log(0 && 123);//0
//逻辑或 || 表达式1为真，返回表达式1，表达式1为假，返回表达式2
console.log(123 || 456);//123
console.log(123 || 456 || 678);//123
console.log('' || 345 || 678);//345
</script>
</body>
</html>
?案例2:num值
?
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var num=0;
console.log(123 || num++);//123
console.log(num);//0
</script>
</body>
</html>赋值运算符
用来把数据赋值给变量的运算符
| 赋值运算符 | 说明 | 案例 |
| = | 直接赋值 | var name="我是小可爱" |
| +=、-= | 加减一个数后，在赋值 | var age=10; age+=5; |
| *=、/=、%= | 乘除取模后，在赋值 | var age=2; age*=5; ? |
?
?案例：赋值运算符
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// 方法一
var num=0;
num=num+5;
console.log(num);
//方法二
var age=10;
age+=5;
console.log(age);
</script>
</body>
</html>
运算符优先级
| 优先级 | 运算符 | 顺序 |
| 1 | 小括号 | （） |
| 2 | 一元运算符 | ++? --? ！ |
| 3 | 算术运算符 | 先* / % 后+ - |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == !=? ===? !== |
| 6 | 逻辑运算符 | 先&& 后 || |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | ， |
?案例：运算符优先级
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// 一元运算符
//++num !num
//二元运算符，二元表达式
//2+3
console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true);//true
var num=10;
console.log(5 == num / 2 && (2 + 2 * num).toString() ==='22');//true
var a = 3 > 5 && 2 < 7 && 3 == 4;
console.log(a);//false
var b = 3 <=4 || 3 > 1 || 3 != 2;
console.log(b);//true
var c = 2 === "2";
console.log(c);//false
var d = !c || b && a;
console.log(d);//true
</script>
</body>
</html>三元表达式
三元表达式也能做一些简单的条件选择，有三元运算符组成的式子称为三元表达式
条件表达式 ? 表达式1 ： 表达式2
如果条件表达式结果为真，返回表达式1，如果条件表达式结果为假，返回表达式2
案列：三元表达式
?
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// 表达式是有结果的
var num=10;
var result = num > 5 ? '是的' : '不是的';
console.log(result);
// 用户输入数字，如果数字小于10，就在前面补0，比如01,09,如果数字大于10，就不需要补，比如20
var time=prompt("请你输入0-59之间的一个数字");
var result2 = time < 10 ? '0'+ time : time;
alert(result2);
</script>
</body>
</html>推荐看
JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili