该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何错漏或疑问都欢迎在评论区提出。本文介绍JS中常见的运算符、if语句、三元表达式、switch语句
思维导图
第一章 运算符(操作符)
运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。
JS常用的运算符有:
- 算数运算符
- 递增和递减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
1.1 算数运算符
算术运算使用的符号,用于执行两个变量或值的算术运算
常见的算数运算符
语法示例(注意浮点数计算时存在误差)
console.log(1 + 1); // 2
console.log(1 - 1); // 0
console.log(1 * 1); // 1
console.log(1 / 1); // 1
// 1. % 取余(取模)
console.log(5 % 2); // 1
console.log(3 % 5); // 3
// 2.浮点数运算有误差
console.log(0.1 + 0.2); // 0.30000000000000004
console.log(0.07 * 100); // 7.000000000000001
// 3.不能直接用浮点数比较大小
num = 0.1 + 0.2
console.log(0.3 == num); // false
1.2 表达式和返回值
表达式是变量、数字、运算符等组成的式子,其结果就是返回值
// 表达式是变量、数字、运算符等组成的式子,如1 + 1
console.log(1 + 1); // 2就是返回值
1.3 递增和递减运算符
如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减( – )运算符来完成。
在 JavaScript 中,递增(++)和递减( – )既可以放在变量前面,也可以放在变量后面。放在变量前面时,称为前置递增(递减)运算符,放在变量后面时,称为后置递增(递减)运算符
递增和递减运算符的原理类似,这里仅讲解递增运算符
1. 前置递增运算符
前置递增运算符先进行自增后返回值,因此++age的值等于age+1
// 前置递增运算符 ++在变量的前面
var age = 10;
++age; // 类似于age = age + 1
console.log(age); // 11
// 先自增 后返回值
var p = 10;
console.log(++p + 10); // 21
2. 后置递增运算符
后置递增运算符先返回值后进行自增,因此age++的值等于age。开发中更常用后置递增运算符
var num = 10;
num++; // num = num + 1
console.log(num); // 11
// 1.前置自增和后置自增单独使用时效果是一样的
// 2.后置自增:先返回值,后自增
var age = 10;
console.log(age++ + 10); // 20
console.log(age); // 11
3. 练习
var e = 10;
var f = e++ + ++e; // f = 10 + 12
console.log(f); // 22
1.4 比较运算符
两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值
(true / false)作为比较运算的结果
console.log(3 >= 5); // false
// 1.编程语言的等号用==表示,判断数据的值是否相等
console.log(3 == 5); // false
console.log('pink老师' == '刘德华'); // false
console.log(18 == 18); // true
console.log(18 == '18'); // true
console.log(18 != 18); // false
// 2.=== 判断两个数据的值和数据类型是否都一样
console.log(18 === 18); // true
console.log(18 === '18'); // false
console.log(18 !== '18'); // true
1.5 逻辑运算符
用来进行布尔值运算的运算符,其返回值也是布尔值。开发中经常用于多个条件的判断
1. 逻辑与 &&
两边都是true才返回true,否则返回false
// 1.逻辑与 && 两侧都为true,结果才为true;有一个为false,结果就为false
console.log(3 > 5 && 3 > 2); // false
console.log(3 < 5 && 3 > 2); // true
2. 逻辑或 ||
两边都是false才返回false,否则返回true
// 2.逻辑或 || 两侧有一个为true,结果就为true;都为false,结果才为false
console.log(3 > 5 || 3 > 2); // true
console.log(3 > 5 || 3 < 2); // false
3. 非 !
也叫作取反符,用来取一个布尔值相反的值,如 true 的相反值是 false
// 3.逻辑非 !
console.log(!true); // false
4. 短路运算(逻辑中断)
// 1.逻辑与短路运算 如果表达式1结果为真,则返回表达式2;如果表达式1结果为假,则返回表达式1
console.log(123 && 456); // 456
console.log(0 && 456); // 0
console.log(0 && 1 + 2 && 456 * 789); // 0
console.log('' && 1 + 2 && 456 * 789); // ''
// 2.逻辑或短路运算 如果表达式1结果为真,则返回表达式1;如果表达式1结果为假,则返回表达式2
console.log(123 || 456); // 123
console.log(0 || 456); // 456
console.log(0 || undefined || 456 * 789); // 359784
console.log('' || 1 + 2 || 456 * 789); // 3
// 123为真,程序直接返回结果,num++没有被执行
var num = 0;
console.log(123 || num++);
console.log(num); // 0
1.6 赋值运算符
用来把数据赋值给变量的运算符
var num = 10;
num += 4; // 相当于num = num + 4
console.log(num);
1.7运算符优先级
运算符按照如下顺序进行计算
示例
// ++num !num 2 + 3
// 逻辑运算符的优先级很低,先得出各项结果再看逻辑运算符
console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true) // true
var num = 10;
console.log(5 == num / 2 && (2 + 2 * num).toString() === '22'); // true
console.log('-------------------');
var a = 3 > 5 && 2 < 7 && 3 == 4;
console.log(a); // false
var b = 3 <= 4 || 3 > 1 || 3 != 2;
console.log(b); // true
var c = 2 === "2";
console.log(c); // false
var d = !c || b && a;
console.log(d); true
第二章 流程控制
2.1 概念及分类
在一个程序执行的过程中,代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。简单理解:流程控制就是来控制代码按照一定结构顺序来执行
流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,代表三种代码执行的顺序。
2.2 顺序流程控制
顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序依次执行,
程序中大多数的代码都是这样执行的。
2.3 分支流程控制
由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果。JS中有两种分支语句:if语句和switch语句。
2.4 if语句
1. if语句
执行流程
// 1.if的语法结构
if(条件表达式) {
// 执行语句
}
/* 2.如果条件表达式为真,则执行大括号里面的语句
如果条件表达式为假,则跳过大括号里面的语句 */
// 3.示例
if(3 > 5){
alert('稻香');
}
2. if else双分支语句
执行流程
// 1.if的语法结构
/* if(条件表达式) {
// 执行语句1
} else {
// 执行语句2
} */
/* 2.如果条件表达式为真,则执行语句1
如果条件表达式为假,则执行语句2 */
// 3.代码验证
var age = prompt('请输入您的年龄:');
if (age >= 18) {
alert('进来快活呀');
} else {
alert('快回家写作业!');
}
3. if else if多分支语句
执行流程
// 1.多分支语句:利用多个条件选择不同的执行语句 多选1的过程
// 2.语法规范
if (条件表达式1) {
// 语句1;
} else if (条件表达式2) {
// 语句2;
} else if (条件表达式3) {
// 语句3;
} else {
// 最后的语句;
}
// 3. 执行思路
// 如果条件表达式1满足就执行语句1,语句1结束后推出if语句
// 如果条件表达式2满足就执行语句2,语句2结束后推出if语句,以此类推
// 如果所有的条件表达式都不满足,则执行else里面的语句
// 4.示例
var score = prompt('请输入您的分数:');
if (score >= 90) {
alert('您的成绩是A');
} else if (score >= 80) {
alert('您的成绩是B');
} else if (score >= 70) {
alert('您的成绩是C');
} else if (score >= 60) {
alert('您的成绩是D');
} else {
alert('您的成绩是E');
}
2.5 三元表达式
三元表达式的作用与if else语句相同,但是语句更简单
// 1.三元运算符组成的式子是三元表达式
// 2.语法结构
// 条件表达式 ? 表达式1 : 表达式2
// 3.执行思路:如果条件表达式结果为真,则返回表达式1的值,否则返回表达式2的值
// 4.代码示例
var num = 11;
var result = num > 7 ? '是的' : '不是的';
/* 等价于
if (num > 7) {
result = '是的';
} else {
result = '不是的';
} */
console.log(result); // '是的'
2.6 switch语句
switch…case 语句通常处理 case为比较确定值的情况, 而 if…else…语句更加灵活,常用于范围判断(大于、等于某个范围)
// 1.switch语句也是多分支语句,用于多选1
// 2.语法结果
/* switch(表达式) {
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
...
default:
执行最后的语句;
} */
// 3.执行思路 将表达式的值与case后面的值相匹配,如果匹配,则执行对应case后面的语句,然后退出switch语句
// 如果没有匹配的值,则执行default后面的语句
// 4.代码示例
var num = 3
switch(num) {
case 1:
console.log(1);
break;
case 2:
console.log(2);
break;
case 3:
console.log(3);
break;
}
注意事项
- 实际开发中表达式常写成变量
- 表达式和case的值匹配需要全等(===,值和数据类型都相等)
- 如果case的语句执行结束之后没有break,那么不会退出switch语句,会继续执行下一个case只到遇到break或是语句结束