易错回顾
let str = "123abc"
console.log(parseInt(str)) //123
console.log(Number(str)) //NaN
console.log( typeof Object) //function
console.log( typeof Function) //function
js 注释(// /****/) 有两种 css注释 只有一种 （//）
let flag = new Boolean("true") //转布尔型 显示转换
算术运算符
- 加减乘除 求余 取模（获的整数后的余数）
// 加减乘除
console.log('10 + 10 -----> ', 10 + 10);
console.log('10 -5 -----> ', 10 -5);
console.log('10 * 10 -----> ', 10 * 10);
console.log('10 / 2 -----> ', 10 / 2);
// 先乘除后加减
console.log('10 + 2 * 5 -----> ', 10 + 2 * 5);
// 有括号先算括号内的，再乘除，最后加减 ，从左到右一次运算
console.log('10 * 2 + (10 + 10) * 2 -----> ',1 + 10 * 2 + (10 + 10) * 2);
求余=取模 获得整数
除法运算 获取除法元素后 剩下 余数
console.log(10 % 5); // 0
console.log(10 % 3); //1
如果一行内，出现了多个运算符，先乘除后加减 如果有括号 先算括号
console.log(1 + 1 * 2)
console.log((1 + 1)*2)
多个运算符时，一般按自己的想法来 加括号
console.log(1 + (2* 3 +3) / 4 + 4 * 5 +5)
计算圆的面积
//π * r 的平方
// 在js中 通过什么来代表 π
Math.PI 表示 π
Math 表示数学
// π * r * r
// Math.PI 在js中表示 π
let r = prompt("请输入圆的半径")
console.log(' 圆的面积是 -----> ',r * Math.PI * r );
赋值运算符
定义：将等号右边的值赋给左边 ，要求左边必须是一个变量
作用：简化代码
// 以前
// let num = 1
// num = num + 1
// console.log('num -----> ', num);
// 现在
// let num = 1 ; num = num + 1;
// let num1 = 1; num1 += 1; console.log(num1) //2
// let num2 = 100; num2 -= 10; console.log(num2) //90
// let num3 = 100; num3 *= 10; console.log(num3) //1000
// let num4 = 100; num4 /= 10; console.log(num4) //10
let num5 = 100;
num5 %= 10;
console.log('num5 -----> ', num5); //0
JavaScript的运算符可以根据所需表达式的个数，分为一元运算符，二元运算符，三元运算符
一元运算符
正负号
二元运算符 let num = 1; num = num + 1 //两个数运算
一元运算符 let num1 = 1; num1++ ;num1--;++num1 ;num1--
运用：能使用一元运算符做一元运算
- 自增
符号：++
作用： 让变量的值 +1
当++写在变量前面时，先自加，再运算
当++写在变量后面时，后置自增，先使用后再加 (++在后面，后自增)
- 自减
符号：让变量减 - 1
后置自减：先运算，后自减
let num = 10; num--
console.log(num-- + 1) // 11 先运算，后自减
console.log(num) //9
原理分析：
一元运算符面试题
let num = 1
console.log(i++ + ++i + i) //7
分析:
1 3 3
（i++） (++i) (i)
i = i + 1 i = i + 1
i =2 i = 3
一元运算符关键在于：先输出，还是先运算
- 例题
// 区别在于，先运算，还是先自增自减，看清楚
let num = 10
console.log('num-- -----> ', num--); //10
console.log('num++ -----> ', num++); //9
console.log('num -----> ', num); //10
let num1 = 100
++num1
console.log('++num1 -----> ', num1); //101
// num1--
// console.log(' -----> ', num1); //100
console.log(' -----> ',num1-- ); //101
let i = 1
console.log('i++ -----> ', i++); //1 先输出后自加
console.log('i-- -----> ', i--); //2 先输出后自减
console.log('i -----> ', i); //1
比较运算符
作用：比较两个数据大小，是否相等
-
比较运算符 :比较后是一个布尔类型
console.log(3 > 100) //false console.log(3 < 100) //true
>
<
>=
<=
== :左右两边是否相等，将两边的数据进行转换为数值 注意：两个等于号（==），只会判断值，不会判断类型
=== ：全等号，除数值相等外，数据类型也要一致（如字符串型） 全等号 ，既要判断类型又要判断值
!= :不等号
!==
注意：判断等于要用两个==号,一个等于号为赋值
let num = 1
console.log(num == 2) //false
易错点：字符串和数字判断
let num = 2,num1 = "2"
console.log(num== num1) //true -----注意：两个等于号（==），只会判断值，不会判断类型
console.log(num=== num1) //false ------全等号 ，既要判断类型又要判断值
console.log(100 ！= 100) //false
console.log(100 ！= '100') //false ----!=全部判断
console.log(100 ！== '100') //true ---全等号
- 字符串比较
是比较字符对应ASCII表
比较一般是对数字做比较
对应字符串做比较，更多是判断两者是否相等
先把字符串 拿去转数字
转完数字之后，才根据数字做比较
console.log("A">"B") // 81>82
console.log("斌斌">"万旺") //true
注意：几个特殊的 NaN不等于任何值，包括它本身
console.log(NaN === NaN) //false 不能看两者代码一致就相等（不是数字）
如第一是 狗 第二个是猫
js 处理小数 有精度问题 ：小数之间不要做比较 后面会补充
console.log(0.4 + 0.2 === 0.6) // 不要对小数做比较，有精度问题
不同类型之间会发生隐式转换
console.log(4 > "3") //会有以下的默认转换
console.log(1 > Number("3")) //这样比较严谨
三种等号之间有什么样色区别？
- = ： 一个等号是赋值
- == ： 两个等号是判断是否相等，不判断类型
- === ： 三个等号表示全等号即判断类型又要判断数字是否相等
逻辑运算符
与（&&） 或（||） 非（！）
作用：如果判断一个数据大于10，小于20，怎么办
错误写法：10<数据<20
逻辑&&
名称：逻辑与 又称：“并且”
特点：两边都为true ，结果才为true，一个为假则为假
let num = 10
console.log(num>5 && num < 10) //true 一假则假
console.log(num>20 && num < 10) //false 一假则假
逻辑或||
名称：逻辑与 又称：“或”
特点：一边为true ，结果才为true，一个为真则为真
let num = 5
console.log(num>50 || num < 10) //true 一真则真
console.log(num>20 || num < 1) //false 两假则假
！
名称：逻辑非 又称：“取反”
特点：为条件的反值 ，结果为true，取反后为false
短路运算
&& 与||才有短路运算
- && 从左到右 碰到false就短路（右边不执行了） 前面判断满足条件，就执行后面判断
- || 从左往右 碰到true就短路（右边不执行了） 前面判断不满足，就执行后面判断
// && 与||才有短路运算
// && 一假则假 左边假则右边不执行
let rain = false
rain&& console.log('为true就去学校 -----> ', 为true就去学校); //左边成立，右边才执行
// || 或 左边成立，右边就不执行
console.log('1>10 ||4>3 || 2 > 1 || 2 >1000 //当从-----> ', 1>10 ||4>3 || 2 > 1 || 2 >1000); //当从左到右，有一个为真，右边不执行
逻辑运算的最终结果
let result = 100 > 0 && 1 > 1000
console.log(result) // false
let res = 10 > 1 && 30
console.log(res) // 30 ----运算结果都是最后被执行的结果的那段代码
//运算结果都是最后被执行的表达式值，一般用在变量赋值
let result1 = 1 >0 && false && 30 //false 那段代码是最后执行即可 逻辑运算的最终结果
- 转布尔类型为false
undefined 如果 转换成 布尔类型 是个false
console.log(Boolean(undefined)) //false
那些值转成布尔类型后 false
undefined null 0 ""(单双引号都行，里面为空) false NaN 其余为true
console.log(Boolean(null))
console.log(Boolean(0))
console.log(Boolean(""))
console.log(Boolean(false))
console.log(Boolean(NaN))
练习-判断输入一个数是4的倍数，且不是100的倍数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>判断一个数是4的倍数，且不是100的倍数</title>
</head>
<body>
<script>
//1,获取输入值
//2, 能被4整除 注意：整除和不整除的区别在于 a % b == 0 等于0 为可以正常
let num = prompt('输入数值')
// if(num % 4 === 0 && num % 100 !== 0) {
// console.log('num 是4的被数，且不是100的倍数 -----> ', num);
// } else if(num % 4 === 0 && num % 100 === 0){
// console.log('num 是4的倍数，且是100的倍数 -----> ', num);
// } else {
// console.log(' num-----> 都不能整除 ', );
// }
// 或者 逻辑与 还是逻辑或
// 数一数有几个条件
// console.log(' -----> ', (条件一)&& (条件二));
console.log(' -----> ', num % 4 === 0 && num % 100 !== 0);
// 总结：
// 1；逻辑与还是逻辑或
// 2：当前是几个判断条件
// 3：写出大体的结构
// 4按个往里面填充我们的代码即可
</script>
</body>
</html>
- 整除和不整除的关系
// a 能被 b 整除 = a % b
// 若整数b 除以非0整数a，商为整数，且余数为零 ，b为被除数，a 为除数 。读作 ：a 整除 b 或者 b能被 a 整除
b / a
// b 能被 a整除
// a 整除 b
( num / 4) (num /100)
(num % 4 === 0) && (num % 100 !== 0)
运算符的优先级
优先级 运算符 顺序
1 小括号 （）
2 一元运算符 ++ -- （逻辑非运算符最高）
3 算术运算符 先* /后+ -
4 关系运算符 > >= < <=
5 相等运算符 == ！== === !==
6
简化代码
let a = 3 > 5 && 2 < 7 && 3 === 4;
let b = 3 > 5
let c = 2 < 7
let d = 3 === 4
console.log(b && c && d)
语句
表达式和语句
表达式：一组代码的组合，JS会计算出一个结果
语句：js整句或者命令 ，js语句以分号结束（可以省略） if语句，for循环语句
区别：表达式计算出一个值，但语句用来自行使某件事发生（做什么）
表达式： 如 1 + 2
语句： alert() 弹框对话框
有些情况：可以把表达式理解为语句，因为在计算结果，也是做事
分支语句
1.程序三大流程控制语句
从上往下执行语句，叫顺序结构
有时根据条件选择执行代码，叫分支结构
某段代码被重复执行，叫循环结构
分支语句--可以选择执行想要的代码
- 分支语句包含 ：if分支语句 三元运算符
if语句
- 单分支语句
let sore = prompt('输入分数')
if(sore > 700) {
console.log('走，去黑马去')
}
能使用if语句执行满足条件的代码
- 双分支if语法
if(条件){
满足条件执行的代码} else{
不满足条件执行的代码
}
let sore = prompt("输入分数")
if(sore > 700){
alert('恭喜你考入黑马，成功走上人生巅峰')
}else{
alert('完犊子分数考太低，回去种田去')
}
-
多分支语句
先判断条件一，满足就执行条件一，其它不执行 if(条件一){代码}
条件一不满足，满足条件二，执行条件二 else if(条件二){代码}
条件一，条件二都不满足，满足条件三，执行条件三 else if(条件三){代码}
。。。。 else if(条件n){代码}
都不满足 ： 执行else {代码}
let day = +prompt('今天几号')
if(day > 0 && day <= 7){
alert('吃软饭')
}
else if(day > 7 && day < 1000) {
alert('吃海鲜大餐')
}
else if(day >= 1000 && day < 10000) {
alert('白米饭')
}
else if(day < 0 && day > -10000) {
alert('吃牢饭')
}
else{
alert('想什么呢，去讨饭吧')
}
三元运算符
利用三元运算符执行满足条件的语句
比if双分支 更简单 的写法 有时候叫做三元表达式
符号： ？与：配合使用
语法： 条件 ？满足条件执行的代码 ： 不满足条件的执行的代码
用来取值
判断2个数的最大值
let num1 = 10,num2 = 100
//三元表达式
num1 < num2 ? "num1小于num2" : "num1大于num2"
num1 < num2 ? console.log("num1小于num2") : console.log("num1大于num2")
用来取值
let num1 = 10,num2 = 100,num3 //num1和num2中大的值
num3 = ((num1 < num2) ? num1 : num2)
console.log(num3)
数字补0案例
let num1 = +prompt('输入数字');
let num2 = num1 < 10 ? '0' + num1 : num1;
alert(num2);
// es6新语法 字符串的补零方法
// let num1 = prompt('输入数字');
// let num3 = num1.padStart(2, '0');
// console.log('num3 -----> ', num3);
// alert(num3);
padStart(2,"0")
es6 的字符串补零方法 字符串.padStart(2,"0")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>补零</title>
</head>
<body>
<script>
分析
// 1.获取用户输入的第一个数
// let num = +prompt('输入时间')
// 2.如果是if(三元运算符)
// 条件？执行代码1：执行代码2
// num < 10?"补零":""
// 0 + num = num = 8
// let num1 = +prompt('输入数字');
// let num2 = num1 < 10 ? '0' + num1 : num1;
// alert(num2);
// es6新语法 字符串的补零方法
let num1 = prompt('输入数字');
let num2 = prompt('输入数字');
let num3 = prompt('输入数字');
let num11 = num1.padStart(2, '0');
let num22 = num2.padStart(2, '0');
let num33 = num3.padStart(2, '0');
console.log('num3 -----> ', num11);
console.log('num3 -----> ', num22);
console.log('num3 -----> ', num33);
alert(`${num11}:${num22}:${num33}`);
</script>
</body>
</html>
记忆计算器
1.分析
1.1 获取输入的三个
前两个数字
后一个 是运算 符 加减乘除
2.判断当前的运算符是什么
if(+) 执行数字相加
else if(-) 执行数字相减
else if(*) 执行数字相乘
else if(/) 执行数字相除
注意：运算符不需要转数字型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let num1 = +prompt('输入数字')
let num2 = +prompt('输入数字')
let num3 = prompt('输入运算符')
if(num3 === "+"){
alert(num1 + num2)
document.write(num1 + num2)
}
else if(num3 === "-") {
alert(num1 - num2)
document.write(num1 - num2)
}
else if(num3 === "*") {
alert(num1 * num2)
document.write(num1 * num2)
}
else if(num3 === "/") {
alert(num1 / num2)
document.write(num1 / num2)
}
else {
alert("符号错误，只能输出加减乘除")
}
</script>
</body>
</html>
易错
console.log("5"+3,"5"- 3) // "53" ,2
let a = 1;let b = ++a + ++a ;console.log(b) //5
“==”在比较两边值时，不需要比较两边的数据
NaN == NaN结果是false
200 == “200” 结果是true
undefined === undefined 结果是true
let s = 200&&"hello" 输出“hello” 相当于 console.log(s)
let num = 10 num += 5 let res = num++ console.log(res) console.log(num) //15,16
let num = 5;let res = ++num + num++ ;console.log(res) //12
let num = {} console.log({}) //{} console.log(!{}) //false
!!5 console.log(!!5) //true
!"" console.log(!"") //true
