【JavaScript】常用的运算符、if语句、三元表达式、switch语句

该系列文章是博主学习前端入门课程的笔记，同时也为了方便查阅，有任何错漏或疑问都欢迎在评论区提出。本文介绍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或是语句结束