题目讲解:
补充: 浏览器控制台可以输入验证代码
运算符
包括 加、减、乘、除、求余 (取模)
代码演示:
<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);
</script>
</body>
如果一行内,出现了多个算数运算符
先乘除后加减 如果有括号 就先算括号
代码:
console.log(1 + 1 * 2);
console.log((1 + 1) * 2);
如果一行内 确实有很多个 算术运算符 都建议按照自己的想法来加括号
代码:
console.log(1 + (2 * 3 + 3) / 4 + 4 * 4 + 5);
案例圆的面积:
赋值运算符
代码演示:
<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>
一元运算符:
重要: 1 前置自增和后置自增单独使用没有区别
2 工作中,基本都是单独使用
前置自增:
先自加再使用(记忆口诀:++在前 先加)
代码:
// // 难点
// let i = 1;
// // console.log(++i + 2); // 4
// // 先自加 再使用
// i = i + 1;
// console.log(i + 2);
后置自增:
先使用再自加 (记忆口诀:++在后 后加)
代码:
// // 难点
// let i = 1;
// console.log(i++ + 2); // 3
// // 1 先执行
// console.log(i + 2); // 3
// // 2 使用是后置自增
// i = i + 1;
// console.log(i); // 2
代码演示:
<body>
<script>
//let num =1 ;
// // ++num;
// // num++;
// // 1 都可以理解为 num = num + 1
// // 2
// console.log(num);
// let i = 1;
// console.log(i++);
// console.log(i); // 2
// console.log(++i); // 前置 先加加 再计算结果
// // i = i + 1; // i = 3
// // console.log(i);
// let i =1;
// 在工作中,基本都是 i++ 或者 ++i 独立使用
let i = 5;
console.log(--i); // 4
console.log(i--); // 打印的结果是 4
console.log(i); // 3
</script>
</body>
比较运算符:
Boolean类型
代码演示:
<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); // 两个等于号才是判断
// 拿数字和字符串比较
console.log(3 == '3'); // true 因为两个 == 只会判断值 而不会判断类型
console.log(3 === '3'); // flase 3个等于号 既要判断类型 也要判断值
console.log(3 === 3); // true
=== 既要判断类型 也要判断值
代码
console.log(3 === '3'); // flase 3个等于号 既要判断类型 也要判断值
!=
代码:
// 判断 3 不等于 5
// console.log(3!=5); // != 不等于
console.log(3 != 3); // false
console.log(3 != '3'); // false
!==(既要判断类型 也要判断值)
代码:
console.log(3 !== '3'); // true
字符串比较:
了解:字符串大小比较,先把字符串转数字再比较
代码:
对于字符串做比较 更多是判断两者是否相等
// console.log('A' === 'B');
console.log('A' > 'B'); // 81 > 82
console.log('斌斌' > '万旺');
补充:
1 NaN不等于任何值,包括它本身
代码:
// NaN = A || NaN = B
console.log(NaN === NaN); // false 不能以为 两者代码一样就相等 (不是一个数字 )
2 尽量不要比较小数,因为小数有精度问题
代码:
// js 处理小数 有问题 后面会补充 精度的问题!!
console.log(0.4 + 0.2 === 0.6);
3 不同类型之间比较会发生隐式转换
// 类型转换
// console.log(4 > '3');
console.log(4 > Number('3'));
总结:
===推荐使用
逻辑运算符:
演示代码:
<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>
短路:
逻辑与
一假则假 && 左边为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('去玩');
总结:
逻辑与 满足了 就去执行
逻辑或 不满足 就去执行
==========================================
undefind 如果 转换成布尔类型 其实是个false
哪些值转换成布尔类型后 为false
undefined null 0 "" false NaN
代码:
<script>
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>
课堂案例:
<script>
let num = +prompt("请输入一个整数");
// console.log( (4 % num === 0) && (100 % num ===0) );
=============================================
// 判断一个数是4的倍数,且不是100的倍数
console.log( (num % 4 === 0) && (num % 100 !==0) );
</script>
补充知识:
/*
若整数b除以非零整数a,商为整数,且余数 为零,b为被除数,a为除数 , 读作“a整除b”或“b能被a整除
b / a
被除数 / 除数
b能被a整除
a整除b
num / 4 num / 100
4的倍数 或者 100的倍数
(num % 4 == 0) && ( num % 100 !== 0)
*/
运算符优先级
表达式和语句
表达式:
语句:
分支语句:
if分支语句
三种使用:单分支、双分支、多分支
单分支使用语法:
代码演示:
<script>
let score = +prompt('请输入您的分数');
// if 单分支
if (score > 700) {
alert('恭喜你 来啦');
}
</script>
双分支使用语法:
代码演示:
<body>
<script>
let score = +prompt('考试的分数');
if (score > 700) {
alert('nice');
} else {
alert('so bad');
}
</script>
</body>
多分支使用语法:
代码演示:
<body>
<script>
// let day = 1;
let day = +prompt('请输入今天是星期几');
if (day === 1) {
console.log('煲仔饭');
} else if (day === 2) {
console.log('生猛海鲜');
} else if (day === 3) {
console.log('烤全羊');
} else if (day === 4) {
console.log('吃牢饭');
} else if (day === 5) {
console.log('软饭');
} else {
// 6 7 ........
console.log('白饭');
}
</script>
</body>
三元运算符
语法:
代码演示:
<body>
<script>
let num1 = 10;
let num2 = 99;
let num3;
num3 = ( (num1 > num2) ? num1 : num2);
console.log(num3);
</script>
</body>
课堂案例:
判断两个数的最大值:
方法一:
// if 方式
let num1 = 10;
let num2 = 9;
if (num1 > num2) {
console.log('num1 要大于 num2 ');
console.log(num1);
} else {
console.log('num2 要大于或者等于 num1 ');
console.log(num2);
}
方法二:
// 三元表达式
num1 > num2 ? console.log(num1) : console.log(num2);
let num1 = 10;
let num2 = 99;
let num3; // 就要等于 num1 和 num2 中 大的值
num3 = ( (num1 > num2) ? num1 : num2);
console.log(num3);
数字补0案例:
方法一:
<body>
<script>
let num = +prompt('请输入时间');
let strNum = num < 10 ? '0' + num : num;
console.log(strNum);
</script>
</body>
方法二:
<body>
<script>
let strNum;
if (num < 10) {
strNum = '0' + num;
} else {
strNum = num;
}
console.log(strNum);
</script>
</body>
简易计算器案例:
注意:在prompt前面加上隐式转换
<body>
<script>
let num1 = +prompt('请输入第一个数字');
let num2 = +prompt('请输入第二个数字');
let operator = prompt('请输入 "+" "-" "*" "/ " 任意一种');
// 判断当前的操作符 是什么
if (operator === '+') {
console.log(num1 + num2);
} else if (operator === '-') {
console.log(num1 - num2);
} else if (operator === '*') {
console.log(num1 * num2);
} else if (operator === '/') {
console.log(num1 / num2);
}
</script>
</body>