运算符
1.算术运算符
-
运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。
-
①+：求和
②-：求差
③ *：求积
④/：求商
⑤%：取模（取余数）
⑥开发中经常作为某个数字是否被整除.
3.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>01-算术运算符.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 算术运算符 加减乘除 求余 取模
// let num1 = 10;
// let num2 = 2;
// // 加法
// console.log(num1 + num2); // 12
// // 减法
// console.log(num1 - num2); // 8
// // 乘法
// console.log(num1 * num2); // 20
// // 除法运算
// console.log(num1 / num2); // 5
// // 求余=取模 获得整数
// // 除法运算 获取除法元素后 剩下余数
// console.log(10 % 5);
// console.log(10 % 3);
// 如果一行内 出现了多个算术运算符
// 先乘除后加减 如果有括号 就先算括号
console.log(1 + 1 * 2);
console.log((1 + 1) * 2);
// 如果一行内 确实有很多个 算术运算符 都建议按照自己的想法来加括号
console.log(1 + (2 * 3 + 3) / 4 + 4 * 4 + 5);
</script>
</body>
</html>
2. 赋值运算符
1.对变量进行赋值的运算符 .
2.已经学过的赋值运算符：= 将等号右边的值赋予给左边, 要求左边必须是一个容器
3.其他赋值运算符：
①+=
② -=
③ *=
④/=
⑤ %=
4.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>03-赋值运算符.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// let num =1 ;
// num = num + 1;
// console.log(num); // 2
// let num = 1;
// // num += 1;
// num += 3;
// console.log(num); // 4
let num = 10;
// num -= 2;
// num *= 2;
// num /= 2;
// num %= 2;
console.log(num); // 8
</script>
</body>
</html>
3.一元运算符
1.自增：
①符号：++
②作用：让变量的值 +1
2.前置自增
1.先自加再使用（++在前 先加）
let i = 1
console.log(++i + 2) //结果=4
//i是2
//i先自加1,变成2以后,再和后面的2相加
3.后置自增
1.后置自增：先使用再自加（++在后 后加）
let i = 1
console.log(i++ + 2) //结果=3
//此时的i是1
//先和2相加,先运算输出完后,i在自加是2
注意;
1.前置自增和后置自增独立使用时二者并没有差别！
2.一般开发中我们都是独立使用
4.自减：
①符号：--
②作用：让变量的值 -1
4.比较运算符
1. 比较运算符的使用
①> ：大于
② <： 小于
③ >=： 大于或等于
④ <=： 小于或等于
⑤==： 左右两边相等
⑥===： 左右两边类型和值都相等
⑦ !==： 左右两边全等
⑧ 比较结果都为boolean类型，即只会得到true或false
2.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>05-比较运算符.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 比较后的结果 其实是一个 bool 类型 true , false
console.log(3 > 10); // 打印什么结果 false
console.log(3 > 1); // true
console.log(3 < 10); // true
console.log(3 < 3); // false
console.log(3 <= 3); // 小于或者等于 3
// 判断是否相等 要用 两个 "=" 号
console.log(3 == 2); // false
// let num = 4;
// num = 5; // 只写一个等于号 赋值
// console.log(num == 5); // 两个等于号才是判断
// 判断 3 不等于 5
// console.log(3!=5); // != 不等于
// 拿数字和字符串比较
console.log(3 == '3'); // true 因为两个 == 只会判断值 而不会判断类型
console.log(3 === '3'); // flase 3个等于号 既要判断类型 也要判断值
console.log(3 === 3); // true
console.log(3 != 3); // false
console.log(3 != '3'); // false
console.log(3 !== '3'); // true
console.log('============');
// 比较 一般都是对数字做比较
// 对于字符串做比较 更多是判断两者是否相等
// console.log('A' === 'B');
// 如果拿字符串去 大小的比较，判断的标准是
// 先把字符串 拿去做 转数字
// 转完了数字之后， 才根据数字做大小比较！
console.log('A' > 'B'); // 81 > 82 了解即可 ！！！
console.log('斌斌' > '万旺');
// NaN = A || NaN = B
console.log(NaN === NaN); // false 不能以为 两者代码一样就相等 （不是一个数字 ）
// js 处理小数 有问题 后面会补充 精度的问题！！
console.log(0.4 + 0.2 === 0.6);
// 类型转换
// console.log(4 > '3');
console.log(4 > Number('3'));
</script>
</body>
</html>
5.逻辑运算符
1.&&
名称:逻辑与
特点:符号两边都为true,结果才为true
作用:一假则假
2. ||
名称: 逻辑或
特点:符号两边有一个 ,true就为true
作用: 一真则真
3. !
名称: 逻辑非
特点:true变false ,false变true
作用: 真变假，假变真
2.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>06-逻辑运算符.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
有个数据 大于5 而且 小于 10
*/
let num = 6;
console.log(num > 5 && num < 10); // true
console.log(num > 5 && num < 4); // 一假则假 false
// 我有钱包 要不 等于 1块钱 要不就 等于 0
let money = 10;
// 一真则真
console.log(money === 1 || money === 0); // 只要满足了随便一个条件 那么这个钱包就是我的
let gender = true; // true 男生
console.log(gender); // true
console.log((!gender)); // 取反了 false
</script>
</body>
</html>
3.逻辑运算符里的短路
短路：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行
1.符号 :&&
短路条件:左边为false就短路
2.符号 :||
短路条件:左边为true就短路
3.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>07-短路运算.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 一假则假 && 左边为false 右边就不再去执行
// console.log(2 > 10 && 1 < 3 && 3 > 1 && 9 > 5 && 5 < 10 && 8 > 2);
// 工作中常见的写法
// 如果今天还下雨 那我就去吃海鲜
// 不下雨 不去吃海鲜了
// let rain = false;
// 左边成立了 右边才会去执行
// rain && console.log('下雨 去吃海鲜');
// 逻辑或 一真则真
// 只要 || 左边 成立了为true，右边就不再去执行
// console.log(100 > 3 || 2 > 6 || 9 > 10 || 10 > 11 || 13 > 20);
// 工作中 常用的技巧
// 如果下雨，那么我就不玩了
// let rain = false;
// rain || console.log('去玩');
// 两个短路运算 逻辑或 和 逻辑与
// 工作中的语法 逻辑与来说 满足了 就去执行
// 工作中的语法 逻辑或来说 不满足了 就去执行
// 逻辑运算的最终结果
// let result = 1 > 0 && 9 > 10; // false
// 那段代码是最后执行即可
// let result = 1 > 0 && 30;
// let result = 1 > 0 && false && 30;
// console.log(result);
// 我们的 undefined 如果 转换成 布尔类型 其实是个false
// 哪一些值转成 布尔类型后 false
// undefined null 0 空字符串 false NaN
console.log( Boolean(undefined) );
console.log( Boolean(null) );
console.log( Boolean(0) );
console.log( Boolean("") );
console.log( Boolean(false) );
console.log( Boolean(NaN) );
console.log( Boolean('') );
</script>
</body>
</html>
6.运算符优先级
7.语句
1.语句:
①if( 语句)
②for (循环语句)
③.if语句有三种使用：单分支、双分支、多分支
1.单分支
if (条件){
满足条件要执行的代码
}
2.双分支
if (条件){
满足条件要执行的代码
} else{
不满足条件执行的代码
}
3.多分支
if (条件1){
代码1
} else if(条件2{
代码2
} else if(条件3){
代码3
} else {
代码n
}
4. 三元运算符
1.?
①满足条件执行的代码
2.:
②不满足条件执行的代码
