JavaScript基础语法（2）
操作符
变量可以存储数据，我们还需要学习操作符来操作这些数据
算术运算符
//快速的说出以下的结果？
console.log(123 + 123);
console.log("123" + 123);
console.log(123 - 123);
console.log(123 - "123");
console.log(12 * "12");
console.log(12 / 12);
console.log(10 % 2);
赋值运算符
赋值运算符有： = , +=, -=, *=, /=, %=
var num = 10;
num += 1; //num = num + 1;
num -= 1; //num = num - 1;
num *= 2; //num = num * 2;
num /= 2; //num = num / 2;
num % = 2; //num = num % 2;
一元运算符
一元运算符：只有一个操作数的运算符
二元运算符：有两个操作数的运算符，比如算术运算符、赋值运算符
自增运算符：++
-
先自增：
++i -
后自增：
i++
//先自增：
var num = 1;
console.log(++num); //先自增：表示先加1，后返回值
//后自增：
var num = 1;
console.log(num++);// 后自增：表示先返回值，后+1
自减运算符：--
-
先自减：
--i -
后自减：
i--
练习：
//1. 思考思考
var num = 5;
console.log(num++);
console.log(++num);
//2. 猜猜看
var a = 1; var b = ++a + ++a; console.log(b);
var a = 1; var b = a++ + ++a; console.log(b);
var a = 1; var b = a++ + a++; console.log(b);
var a = 1; var b = ++a + a++; console.log(b);
逻辑运算符
-
&&：与运算符，表示且，只有当两个操作数都为true的时候，结果才是true -
||：或运算符，表示或，只要有其中一个操作数是true,结果就是true -
!：非运算符，取反
console.log( true && true );
console.log( false && true );
console.log( true && false );
console.log( false && false );
console.log( true || true );
console.log( false || true );
console.log( true || false );
console.log( false || false );
console.log(!true);
console.log(!false);
比较运算符
比较运算符也叫关系运算符， < > >= <= == != === !==， 关系运算符的结果是布尔类型
var a = 5;
var b = 6;
console.log(a > b);//大于
console.log(a < b);//小于
console.log(a >= b);//大于等于
console.log(a <= b);//小于等于
console.log(a == b); //相等，只比较值，不比较类型
console.log(a === b); //全等，比较类型和值
console.log(a != b); // 不等， 只判断值，不判断类型
console.log(a !== b); // 不全等 判断值，且判断类型
运算符优先级
-
()的优先级最高 -
一元运算符(++, --, !)
-
算术运算符（先
*/%, 后+-） -
关系运算符 (先
> < >= <=， 后== === != !==) -
逻辑运算符（先
&&后||）
不用死记，如果不确定的时候，使用()增加优先级
//猜猜看
var result = ((4 >= 6) || ("人" != "狗")) && !(((12 * 2) == 144) && true);
console.log(result);
//蒙一下
var num = 10;
console.log(5 == num / 2 && (2 + 2 * num).toString() === "22");
#
类型转换
查看变量的类型
typeof关键字可以查看数据的类型
var num = 11;
console.log(typeof num);
num = "abc";
console.log(typeof num);
小技巧：在控制台可以根据颜色来判断数据的类型哦(^__^)
转换成数字类型
-
Number()
console.log(Number('55'));
Number()可以把任意值转换成数值类型，但是如果字符串中有不是数字的字符，返回NaN
-
parseInt()
var num1 = parseInt("12.3abc"); // 返回12，如果第一个字符是数字会解析直到遇到非数字结束
var num2 = parseInt("abc123"); // 返回NaN，如果第一个字符不是数字或者正负符号就返回NaN
-
parseFloat()
parseFloat()把字符串转换成浮点数
parseFloat()和parseInt()非常相似，不同之处在与
parseFloat会解析第一个. 遇到第二个.或者非数字结束
如果解析的内容里只有整数，解析成整数
-
算术运算
var str = '500';
console.log(+str); // 取正
console.log(-str); // 取负
console.log(str - 0);
NaN
NaN: not a number, 表示一个number类型的非数字
在js中，NaN用来表示一个非数字的特殊值，当发现无法进行运算时，js不会报错，而是会返回一个NaN
NaN的注意事项：
-
NaN的类型是number类型的，表示一个非数字
-
NaN不等于任何值，包括NaN本身
-
通过isNaN()可以判断一个number类型的值, 是否是一个数字，返回false的时候，表示是一个数字。
var num = 5;
console.log(isNaN(5));
转换成字符串
-
toString()
var num = 5;
console.log(num.toString());// 把数值5变成字符串5
//将来所有的数据都会有toString()方法，除了null和undefined
-
String()
var num = 5;
num = String(num);
console.log(num);
-
拼串，使用起来最方便
var num = 5;
num = num + "";
console.log(num);
转换成布尔类型
所有的值都可以转换成布尔类型
其中，""，NaN，undefined，null，0，false这几个值会转换成false，其他值都会转换成true
-
Boolean()
console.log(Boolean(1));
console.log(Boolean(0));
-
!!
var a = "abc";
console.log(!!a);
流程控制
程序的三种基本结构
顺序结构
从上到下执行的代码就是顺序结构
程序默认就是由上到下一行一行的顺序执行的
console.log("哈哈1");
console.log("哈哈2");
console.log("哈哈3");
分支结构
分支结构，也叫选择结构，根据不同的情况，执行对应代码
循环结构
循环结构：重复做一件事情
分支结构
if语句
-
单独的if语句
//语法
if (条件){
//只有当条件为 true 时执行的代码
}
var age = 8;
if(age < 12) {
console.log("不准玩王者荣耀");
}
-
if..else语句
if (条件){
//当条件为 true 时执行的代码
} else {
//当条件不为 true 时执行的代码
}
var age = 8;
if(age < 12) {
console.log("不准玩王者荣耀");
}else {
console.log("可以玩王者荣耀");
}
-
if..else if..else语句
if (条件 1){
//当条件 1 为 true 时执行的代码
} else if (条件 2) {
//当条件 2 为 true 时执行的代码
} else {
//当条件 1 和 条件 2 都不为 true 时执行的代码
}
var age = 8;
if(age < 12) {
console.log("不准玩王者荣耀");
}else if(age < 18){
console.log("可以玩王者荣耀2个小时");
}else {
console.log("可以玩王者荣耀一天");
}
案例：
1. 判断一个数是偶数还是奇数
2. 判断年龄大于16，并且是个男孩，就可以开始撩妹了
3. 如果你有钱 或者 你很帅 ，就可以很快找到女朋友
3. 素质教育，把百分制分数转换成ABCDE
A: 90-100
B: 80-89
C: 70-79
D: 60-69
E: 0-59
三元运算符
用法1：
var 结果 = 判断条件 ? 值1 ： 值2
如果判断条件为true， 结果就是值1， 如果为false， 结果就是 值2
案例：
//思考1：求两个数的最小值
//思考2：判断成年还是未成年
//思考3：求三个数的最小值
switch语句
if..else适用于范围的判断，switch..case适用于具体的值的判断
语法格式:
switch (变量) {
case 值1:
语句1;
break;
case 值2:
语句2;
break;
case 值3:
语句3;
break;
…
default:
默认语句;
break;
}
注意：
break可以省略，如果省略，代码会继续执行下一个case
switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换（例如，字符串'10' 不等于数值 10）
案例：
输入一个数字，显示星期几
素质教育（把分数变成ABCDE）千万不要写100个case哟
//测试题：
var num = "10";
switch (num) {
case 10:
console.log("10");
case 20:
console.log("20");
case 30:
console.log("30");
default:
console.log("lalala");
}
使用场景
-
如果是范围性的判断，使用if..else会更加方便
-
如果是对具体值的判断，使用switch..case语句会更加方便，当然用if..else也是可以的。
-
如果if..else比较简单，可以使用三元运算符进行替代。
//练习1：土豪的儿子, 输入ABCDE
//如果考了A： 买玛莎拉蒂
//如果考了B： 买宝马
//如果考了C： 买三轮
//如果考了D： 买摩拜自行车
//如果考了E： 断绝父子关系
//如果是其他值，提示代码有bug
//练习2： 买手机，输入自己的工资
//如果超过30000: 买苹果手机
//如果10000-30000： 买vivo手机
//如果5000-10000 ： 买魅族手机
//如果低于5000 ： 还买个锤子
//练习3： 输入自己的银行卡金额
//如果超过1000W : 高富帅
//如果不超过 ：穷矮丑
循环语句
在javascript中，循环语句有三种，while、do..while、for循环。
while循环
基本语法：
//当循环条件为true时，执行循环体，
//当循环条件为false时，结束循环。
while(循环条件){
//循环体：需要循环执行的语句
}
代码示例：
//计算1-100之间所有数的和
//1. 初始化变量
var i = 1;
var sum = 0;
while(i <= 100){//判断条件
sum += i;//循环体
i++;//自增，修改循环条件（不能省略）
}
console.log(sum);
练习：
//1. 计算所有偶数的和
//2. 循环表白案例
//3. 循环登录案例，只有当用户输入admin的时候才能登录成功，否则一直弹框
do..while循环
do..while循环和while循环非常像，二者经常可以相互替代，但是do..while的特点是不管条件成不成立，都会执行一次。
基础语法：
do{
//循环体;
}while(循环条件);
代码示例：
//初始化变量
var i = 1;
var sum = 0;
do{
sum += i;//循环体
i++;//自增
}while(i <= 100);//循环条件
思考：
// 1. 计算所有偶数的和
// 2. 循环输入账号密码的案例用do..while怎么写？
// 3. 循环表白的案例用do..while怎么写？
思考：
// while循环与do..while循环的区别是啥？
断点调试
断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。
调试步骤：
浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点
调试中的相关操作：
Watch:监视，通过watch可以监视变量的值的变化，非常的常用。
F10:程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
F8：跳到下一个断点处，如果后面没有断点了，则程序执行结束。
苦口婆心一下：
<font color="red">
-
代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试，知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。
-
今天学的代码调试非常的简单，只要求同学们记住代码调试的这几个按钮的作用即可，后面还会学到很多的代码调试技巧。
</font>
for循环（重点）
写while循环的经常会忘记自增，for循环其实是while循环演化过来的，语法更加的简洁明了，使用非常的广泛。
for循环语法：
//1. for循环使用分号分隔
//2. for循环有2个分号，两个分号不能少
for(初始化语句;判断语句;自增语句){
//循环体
}
执行顺序：1243 ---- 243 -----243(直到循环条件变成false)
-
初始化语句
-
判断语句
-
自增或者自减
-
循环体
for循环代码示例：
//计算1-100之间所有数的和
var sum = 0;
for(var i = 1; i <= 100; i++){
sum += i;
}
思考1：
//1 求1-100之间所有数的和、平均值
//2 求1-100之间所有数的乘积
//3 计算1-100之间能3整除的数的和
思考2：
//1 计算1-100之间不能被7整除的数的和
//2 求1-100之间所有偶数的和
//3 同时求1-100之间所有偶数和奇数的和
思考3（双重for循环）：
//1 打印正方形
//2 打印直角三角形
//3 打印9*9乘法表
break和continue
break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）
continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）
思考：
//1. 找到1-100之间第一个能被7整除的数
//2. 打印1-10之间所有的数，除了5这个数
思考1：
//输出结果是什么？
for(var i = 1; i <=10; i++) {
if(i == 5){
continue;
}
if(i == 7){
break;
}
console.log(i);
}
思考2：
//1. 求1-100之间不能被7整除的整数的和（用continue）
//2. 求200-300之间所有的奇数的和（用continue）
//3. 求200-300之间第一个能被7整数的数（break）
总结
-
循环有很多种，但是以后用得最多的是for循环
-
当不明确循环次数的时候，可以使用while循环
-
当无论如何都要执行一次代码的时候，可以使用do..while循环。
-
循环可以相互替代。
-
