(一)if else语句
if else用来表示中文里的,如果....,就....,否则....
// 条件为true, 执行if后面的括号代码, 否则执行 else 后面括号代码
if(条件) {
// todo
}else{
// todo
}
// 多重判断
if(条件){
// todo
} else if(条件) {
// todo
} else {
// todo
}
例1:是否下雨
<!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>
<p>控制台输出内容</p>
<script>
// 条件为true时,执行if后面的内容,否则执行else后面的内容
// 是否下雨
var isRaining = false;
if (isRaining){
console.log('下雨了,带上伞');
}else{
console.log('今天天气真好')
}
</script>
</body>
</html>
例2:多重判断
根据用户的输入判断用户的性别, 输入1弹出男性, 输入2弹出女性, 输入其它, 弹出性别未知
<!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>
// 根据用户的输入判断用户的性别,输入1弹出男性,输出2弹出女性,输入其它的,弹出性别未知
// 声明一个性别的变量
var gender = prompt('请输入数字');
if(gender == 1){
alert('男人');
}else if(gender ==2){
alert('女人');
}else{
alert('性别未知');
}
</script>
</body>
</html>
(二)数据的类型转换
2.1数据的类型转换有两种方式
- 隐试转换(语句自动转换)
- 显示转换(自己利用转换类型转换)
例1:隐式转换
// 隐式转换==>语句自动转换
var a ='aa';
var b = 'bb';
// 此时如果执行a+b，结果为aabb，因为是字符串相加就是拼接在一起
//此时a+b的值在if语句的条件判断例自动转换为布尔类型，aabb的值转换为布尔类型为true
if(a+b){
console.log('答案是正确的')
}else{
console.log('答案是错误的')
} //会打印答案是正确的;此时if语句会自动的偷偷的将（）里面的值转换成布尔类型
例2:显式转换
// 显示转换==>自己手动转换
var str = '123';
// 转换成数字类型：调用Number()方法；首字母大写
var num = Number(str);
console.log(num); //结果为123
// 可以利用typeof来查看num的数据类型
console.log(typeof(num)); //number
var str2 = 'abcd';
var num2 = Number(str2);
console.log(num2); //结果为NaN（不为数字的数字）
console.log('num2的数据类型为：',typeof(num2));
var str3='' ; //空的字符串，空格，null的数字类型的值为0;
//没有赋值的变量的值时undefined,再将undefined转换成数字类型就变成了NaN(不为数字的数字)
var num3 = Number(str3);
console.log(num3);
2.2数据的类型转换规则
例1：其它类型转数字类型
转数字类型的方法
- Number(变量名)==>首字母大写
- (值)*1
<!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>
// 布尔转数字类型
var str1 = true;
var str2 = false;
var num1 = Number(str1);
var num2 = Number(str2);
console.log('true转数字类型的值是：',num1); //1
console.log('false转数字类型的值是：',num2); //0
// 字符串转数字类型
var str3 = '';
var num3 = Number(str3);
console.log('空字符转数字类型是：',num3); //0
var str4 =' ';
var num4 = Number(str4);
console.log('空格字符串转数字类型是：',num4); //0
var str5 = '123';
var num5 = Number(str5);
console.log('数字字符串转数字类型是：',num5); //123
var str6='123abc';
var num6 = Number(str6);
console.log('数字和字符转数字类型是：',num6); //NaN
var str7;
var num7 = Number(str7);
console.log('undefined转数字类型是：',num7); //NaN
var str8=null;
var num8 = Number(str8);
console.log('null的转数字类型是：',num8); //0
var obj1 = {};
var objnum1= Number(obj1);
console.log('空对象的转数字类型是：',objnum1); //NaN
var obj2 = {a:2,b:3};
var objnum2 = Number(obj2);
console.log('对象转数字类型是：',objnum2); //NaN
var arry1 = [];
var arrynum1 = Number(arry1);
console.log('空数组转数字类型是：',arrynum1); //0
var arry2 = ['a','b','c','d'];
var arrynum2 = Number(arry2);
console.log('数组转数字类型是：',arrynum2); //NaN
</script>
</body>
</html>
例2：其它类型转布尔类型
转换方法：
- Boolean（变量名）
- !!变量
<!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>
//数字转布尔
var str1 = 100;
var num1 = !!str1;
console.log('整数转布尔类型是：',num1); //true
var str2 = 88.88;
var num2 = !!str2;
console.log('小数转布尔类型是：',num2); //true
var str3 = NaN;
var num3 =!!str3;
console.log('NaN转布尔类型是：',num3); //false
var str4 = 0;
var num4 = !!str4;
console.log('0转布尔类型是：',num4); //false
var str5 = Infinity;
var num5 = !!str5;
console.log('无限大转布尔类型是：',num5); //true
//字符串转布尔
var str6 = '';
var num6 = !!str6;
console.log('空字符转布尔类型是：',num6); //false
var str7 = ' ';
var num7 = !!str7;
//空格字符串不为空
console.log('空格字符串转布尔类型：',num7); //true
var str8 = '123abs';
var num8 =!!str8;
//非空字符串转为true
console.log('有内容的字符串转布尔类型：',num8); //true
var str9;
var num9 =!!str9;
console.log('undefined转布尔是：',num9); //false
var str10 = null;
var num10 = !!str10;
console.log('null转布尔类型是：',num10); //false
var str11 = {};
var num11=!!str11;
console.log('对象转布尔类型是：',num11); //true
var str12 =[];
var num12 = !!str12;
console.log('数组转布尔类型是：',num12); //true
</script>
</body>
</html>
例3：其它类型转字符串类型
转换方法：
- String(变量名）
- 变量名+' '
一般规律：其它类型转字符串类型都是直接给原来的变量加上双引号即可；
<!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>
var str1=123;
var num1 = String(str1);
console.log('数字转字符串是：',num1);
// var str2=abc;
// var num2 = String(str2);
// console.log('字母转字符串是：',报错);
var str3 = {}
var num3 = String(str3);
console.log('对象转字符串是：',num3); //[object Object]
var str4 =[];
var num4 = String(str4);
//空数组和空格数组转字符串都为空的，什么也没有
console.log('空数组转字符串是：',num4); //空的
var str5 =['a','b','c'];
var num5 = String(str5);
console.log('空数组转字符串是：',num5); //a,b,c
</script>
</body>
</html>
类型转换规则总结
[图片上传中...(image.png-92ec1-1662271273994-0)]
[图片上传中...(image.png-622636-1662271316849-0)]
(三)运算符
3.1：算术运算符
- / %
- 相加的时候，有一个数字为字符串时，则+表示字符串的拼接；
总结：从网页上输入的都是字符串
<!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>
var a = 20;
var b = 7;
// 对a和b进行5中运算
console.log(a + b); //27
console.log(a - b); //13
console.log(a * b); //140
console.log(a / b); //2.857142857142857
console.log(a % b); //6
</script>
</body>
</html>
3.2:计算两数相加
用户从网页上输入的都是字符串
var num1 = 100;
var num2 = prompt();
console.log(typeof num2); //num2的值时字符串
var sum = num1+num2;
console.log('sum的值：',sum); //100100
3.3：关系运算符
也可以说时比较运算符：>, >=, ==,!= ===,!== < <=
var a =10;
var b = '10';
var c= 20;
//比较a和b是否相等
//两个等号：等于会进行类型转换，然后比较值
console.log(a==b); //true
//三个等号：全（恒）等于，会先进行比较类型，然后再进行比较值
console.log(a===b); //false
3.4:逻辑运算符-逻辑非
逻辑非 !, 取反即可, 结果要么是true, 要么是false
如果变量不是布尔类型, 会先自动转换成布尔, 然后取反
<!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>
//说出下面变量取反后的值
var num1 = false; //true
var num2 = true; //false
var num3 = ''; //true
var num4 = null; //true
var num5; //true
//如果str为空，则打印111，否则打印222
//写法1
var str ='';
if(str===''){
console.log(1111);
}else{
console.log(2222);
}
//写法2
var str ='';
if(!str){
console.log(1111);
}else{
console.log(2222);
}
//undefined,null
var username;
var obj=null;
if(username===undefined){
//执行操作
}
//写法简写
if(!username){
//执行操作
}
if(!obj){
//执行操作
}
</script>
</body>
</html>
3.5:取反再取反
- 取反！
- 取反再取反！！(和布尔类型一样）
<script>
var num = 100;
if (num) {
console.log(111);
} else {
console.log(222);
}
// 以上代码可以写成
if (!!num) {
console.log(111);
} else {
console.log(222);
}
</script>
3.6:逻辑运算符-逻辑与
- 逻辑与 &&：中文里面并且的意思
- 规律：前者为true取后者，前者为false取前者
<!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>
//参与运算都是布尔类型
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false
//其它类型
var num1 = 100;
var num2 = 0;
//num1为true取后者num2的值
console.log(num1 && num2); //0
//num2为false取前者num1的值
console.log(num2 && num1); //0
//实际运用
var a = 'wed';
var b;
//前者为true取后者，后者c是没有声明的变量，所以报错
console.log(a&&c); //报错
//前者为false取前者，此时前者的值为undefined，前者为false时，代码不会向后执行
console.log(b&&c); //undefined
</script>
</body>
</html>
3.7:逻辑运算符-逻辑或
- 逻辑或||：中文里面或者的意思
- 规律：前者为true取前者，前者为false取后者（与逻辑与的规律相反）
<!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>
//前者为true取前者，前者为false取后者
console.log(true||true); //true
console.log(true||false); //true
console.log(false||false); //false
console.log(false||true); //true
var num1 = 100;
var num2 = 0;
console.log(num1||num2); //100
console.log(num2||num1); //100
var a = 'wed';
var b;
console.log(a||c); //wed
console.log(b||c); //报错
</script>
</body>
</html>
(四)一元运算符（自加和自减）
- 一元运算符是指参与运算的变量只有一个
- 一元运算符有自加，自减，赋值，取反等。
- i++(i先运算，运算结束后i自加）
实际上：i++也是先自加1，但是计算的时候使用原来的值；
- ++i(i先自己加1，再跟其它的数相加）
<!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>
//自加
var i = 10;
var j = 20;
var num1 = 10 + i++;
//i运算完成后是11
console.log(num1); //20
var num2 = 10 + ++i;
//此时的i是12,因为上一个式子中有一个i++,第一个i++时，值为10 ，运算完成后自加了1，所以是11
//num2中的++i,在运算之前会自加1，所以在11的i的基础上加1，就是12
console.log(num2); //22
var num3 = 20 + j++;
console.log(num3); //40
var num4 = 20 + ++j;
console.log(num4); //42
//自减
var a = 10;
var b = 20;
var a1 = 10 + a--;
console.log(a1); //20
var a2 = 10 + --a;
console.log(a2); //18
var b1 = 10 + b--;
console.log(b1); //30
var b2 = 10 + --b;
console.log(b2); //28
//自加和自减法
var s = 10;
var c=20;
//10+12+20+18=60
var sum = s++ + ++s +c-- + --c;
console.log('自加和自减的值是：',sum);
</script>
</body>
</html>
4.1:复合赋值运算符
var a= 10;
//a=a+10;
a+=10;
a-=10;
a*=10;
a/=10;
a%=10;
//+=，-=，*=，/=，%=这些符号是简写
(五）运算符优先级
() > 自加(自减) > 算术 > 关系 > 逻辑 > 赋值
- 逻辑与：前者为true取后者，前者false取前者
- 逻辑非：前者为true取前者，前者false取后者
<!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>
//前者为true取后者，前者为false取前者
var a = 10;
var b = 10;
// 计算式子的值
//此时的a是11
var num1 = 20 + 'abc' && 21 - ++a == 10;
console.log(num1); //true
var num2 = 20 + ('abc' && 21) - ++b;
console.log(num2); //30
//此时的a是12
var num3 = 20 + ('abc' && 21) - ++a;
console.log(num3); //29
</script>
</body>
</html>
