JavaScript基础学习二

今天，仍要介绍的是JavaScript的基础学习，不过，这和之前内容不同的就是这一节即将要学习的是【能思考】的JavaScript程序，那所谓的【能思考】也可以就理解为能够进行一定的 逻辑判断 和 程序条件性执行 的能力，这也是JavaScript程序流量控制的内容；

所以今天主要介绍的内容有：
一、运算符
二、表达式和语句
三、流程控制
四、分支结构
五、循环结构
六、断点调试

---

---

一、运算符

所谓的运算符（operator），就是用于执行程序代码运算，会针对一个以上操作数项目来进行运算，这也是 百度百科 中最官方的解释；它也可以被称为 操作符，是用于实现赋值、比较和执行算数运算等功能的符号；

在JavaScript语言中主要分为五大运算符：算术运算符 、赋值运算符 、一元运算符 、比较运算符 和 逻辑运算符 ，下面就分别介绍这五大运算符：

1. 算术运算符

概念：算术运算使用的符号，用于执行两个变量或值的算术运算，主要包括加、减、乘、除、取余（求模）；之前有介绍过，算术运算符之下是存在 隐式转换 的，具体内容可参考 JavaScript第一章 内容；

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	取模（取余）

注意：在取模（取余）的过程中，如果被除数小于除数，那么余数就是被除数本身

开发环境中，取模（取余）经常被用作判定某个数值能否被整除；

1.1 算术运算符优先级

优先级：同时使用多个运算符编写程序时，会按着某种顺序先后执行，称为优先级；

JavaScript中 优先级越高越先被执行，优先级相同时从左向右执行

1. 乘、除、取余优先级相同；
2. 加、减优先级相同；
3. 乘、除、取余优先级大于加、减；
4. 使用 () 可以提升优先级；

总结： 先乘除后加减，有括号先算括号里面的

2. 赋值运算符

概念：用来把数据赋值给变量的运算符；

在之前介绍中， = 就是属于赋值运算符，它的含义就是等号右边的值赋予给左边，这里要求左边必须是一个变量【容器】；

运算符	描述
=	赋值
+=	加法赋值
-=	减法赋值
*=	乘法赋值
/=	除法赋值
%=	取模（取余）赋值

注意：具体写法（加法赋值为例）→ 【a+=b 相当于 a=a+b】

代码样例：

let num = 1
num += 3
console.log(num)// num的值为 4

2.1 赋值运算符优先级

赋值运算符的优先级同算术运算符的优先级顺序一样，但需要明确的是 "=" 的 优先级最低；

3. 一元运算符

众多的 JavaScript 的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符；

① 一元运算符：只存在一个操作数，例如 ++ 、-- 、！ 、+(正号) 、-(负号) ；
② 二元运算符：存在两个操作数，通常有加减乘除、比较运算符，逻辑运算符等；
③ 三元运算符：存在两个操作数，在三元表达式完美实现；

目的：由于赋值运算符在项目开发的过程中，语义并不明了直观，为了更高效且准确的开发项目，就开创了一元运算符；

3.1 自增与自减运算符

如果需要反复给数字变量添加或减去1，可以使用自增（++）和自减（ – ）运算符来完成；

在 JavaScript 中，自增（++）和自减（ - - ）既可以放在变量前面，也可以放在变量后面。放在变量前面时，可以称为前置自增（自减）运算符，放在变量后面时，可以称为后置自增（自减）运算符；

运算符	描述
++	自增
- -	自减

注意：自增和自减运算符必须和变量配合使用，经常被用于程序中的计数效果

3.1.1 自增运算符

① 前置自增运算符：++num 前置自增，就是自加1，类似于 num = num + 1；
代码样例：

let  num = 10;
alert( 2+ ++num);   //  结果为 13

记忆方式：先自加，再返回值

② 后置自增运算符：num++ 后置自增，就是自加1，类似于 num = num + 1
代码样例：

let  num = 10;
alert(2+ num++);   //  结果为 12
alert(num);   //  结果为 11

记忆方式：先返回原值，后自加

3.1.2 自减运算符

① 前置自减运算符：--num 前置自减，就是自减1，类似于 num = num - 1；
代码样例：

let  num = 10;
alert( 2+ --num);   //  结果为 11

记忆方式：先自减，再返回值

② 后置自减运算符：num-- 后置自减，就是自减1，类似于 num = num - 1
代码样例：

let  num = 10;
alert(2+ num--);   //  结果为 12
alert(num);   //  结果为 9

记忆方式：先返回原值，后自加

3.1.3 前后置区别

1. 前置：先自增（自减）后运算返回；
2. 后置：先运算返回后自增（自减）；
3. 开发中，一般是单独使用的，且后置++ 使用频率高

前置自增（自减）和后置自增（自减）在独立使用时，二者并没有差别！！！

4. 比较运算符

概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果；

运算符	描述
>	左边是否大于右边
<	左边是否小于右边
>=	左边是否大于或等于右边
<=	左边是否小于或等于右边
==	左右两边是否相等
===	左右两边是否类型和值都相等
!==	左右两边是否不全等

注意：== 是真正意义上的 等号，只要左右两边值是一样的，那就返回true，不管数据类型的异同；

正是如此，开发过程中很少利用双等进行判断，基本上都用三等（全等）判断；毕竟，三等（全等）是要求值和数据类型都一样，才会返回true；

4.1 浮点数比较

浮点数 值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数，所以尽量不要比较小数，因为小数有精度问题；

代码样例：

let result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100); // 结果不是 7， 而是：7.000000000000001

注意：不要直接比较判断两个浮点数是否相等

4.2 字符串比较

原理：字符串比较是比较的字符对应的ASCII码；

比较方式：

1. 从左往右依次比较
2. 如果第一位一样再比较第二位，以此类推
3. 比较的少，了解即可

ASCII字符代码表（了解）

注意：
① NaN不等于任何值，包括它本身

② 不同类型之间比较会发生隐式转换，最终把数据隐式转换转成number类型再比较；所以在开发中，如果进行准确的比较更常用 === 或者 !==

5. 逻辑运算符

概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断；

目的：逻辑运算符用来解决多重条件判断；

运算符	名称	常用读法	特点	记忆方式
&&	逻辑与	并且	符号两边都为true结果才为true	一假则假
II	逻辑或	或者	符号两边有一个true就为true	一真则真
!	逻辑非	取反	true变falsefalse变true	真变假，假变真

5.1 逻辑中断（短路）

逻辑中断：当有多个表达式（值）时，左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值，只存在于 && 和 || 中；

运算符	短路条件
&&	左边为false就短路
II	左边为true就短路

原因：通过左边能得到整个式子的结果，因此没必要再判断右边；

运算结果：无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值；

代码样例：

console.log(1 && 2) // 结果返回2
console.log(1 || 2) // 结果返回1

原理解释：

注意：六个布尔值为false的数值：false、数字0、undefined、null和NaN

5.2 逻辑运算符优先级

逻辑运算符中，逻辑非的优先级是最高的，其次是逻辑与，最后再是逻辑或 ；

6. 运算符优先级

优先级	运算符	顺序
1	小括号	（）
2	一元运算符	++ 、- - 、！
3	算数运算符	先*、/、%；后+、-
4	关系运算符	>、>=、<、<=
5	相等运算符	= = 、 != 、!= =、= ==
6	逻辑运算符	先&&后II
7	赋值运算符	=
8	逗号运算符	，

① 一元运算符里面的逻辑非优先级很高；
② 逻辑与比逻辑或优先级高；

---

二、表达式和语句

表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合，JavaScript解释器会将其计算出一个结果；

简单理解：属于一种数学式，最终都会得出一个相应的值

语句：js 整句或命令，js 语句是以分号结束（可以省略），一个程序由很多个语句组成，一般情况下，会分割成一个一个的语句，其中循环语句和分支语句就是典型的语句；

1. 表达式和语句的区别：

区别：

1. 表达式计算出一个值，但语句用来自行以使某件事发生(做什么事) ；
   ① 表达式 1 + 2；
   ② 语句 alert() 弹出对话框

2. 其实某些情况，也可以把表达式理解为语句，因为它是在计算结果，也是做事；

简单理解：表达式是为了得出结果，而语句是为了做某件事情

---

三、流程控制

概念：在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的；很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能；

简单理解：流程控制就是来控制代码按照一定结构顺序来执行

流程控制主要有三种结构：顺序结构 、分支结构 、循环结构，这三种结构代表三种代码执行的顺序；

1. 顺序结构：几行程序代码按部就班的从上往下执行；
2. 分支结构：要根据条件选择执行代码；
3. 循环结构：某段代码被重复执行；

顺序结构是程序中最简单、最基本的流程控制，而分支结构和循环结构相对复杂，所以再以下两节详细介绍；

---

四、分支结构

详细概念：由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果；

简单理解：分支语句可以有选择性的执行想要的代码

JS 语言提供了三种分支结构语句：

1. if 语句；
2. 三元运算符；
3. switch 语句；

1. if 语句

if语句通常有三种使用：单分支、双分支、多分支；

注意：
① 括号内的条件为true时，进入大括号里执行代码；
② 小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型；

1.1 单分支语法结构：

基本语法：

// 条件成立执行代码，否则什么也不做
if (条件表达式) {
    // 条件成立执行的代码语句
}

具体流程：

1.2 双分支语法结构：

基本语法：

// 条件成立  执行 if 里面代码，否则执行else 里面的代码
if (条件表达式) {
    // [如果] 条件成立执行的代码
} else {
    // [否则] 执行的代码
}

具体流程：

1.3 多分支语法结构：

基本语法：

// 适合于检查多重条件。
if (条件表达式1) {
    语句1；
} else if (条件表达式2)  {
    语句2；
} else if (条件表达式3)  {
   语句3；
 ....
} else {
    // 上述条件都不成立执行此处代码
}

特点：可引入无限的条件

具体流程：

2. 三元运算符

所谓的三元运算符，往往就是使用三元表达式，它其实也可以看作是比 if 双分支 更简单的写法；

BUT ：并不能完全替代if 双分支语句，因为在是否满足条件的代码段中，过于复杂的代码就不适合用三元运算符来书写了

基本语法：

条件 ? 满足条件执行的代码 : 不满足条件执行的代码

使用环境：一般用来取值或者数字补零操作

3. switch 语句

同if 分支语句有些相似，但是需要注意的点很多，并且编写起来也相对会麻烦一些；

基本语法：

switch( 表达式 ){ 
    case value1:
        // 表达式 等于 value1 时要执行的代码
        break;
    case value2:
        // 表达式 等于 value2 时要执行的代码
        break;
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
}

其中：

• 关键字 switch 后面括号内可以是表达式或值， 通常是一个变量；
• 关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号；
• switch 表达式的值会与结构中的 case 的值做比较 ；
• 如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束；
• 如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码；

switch 语句和 if else if 语句的区别

• 一般情况下，它们两个语句可以相互替换；
• switch…case 语句通常处理 case为比较确定值的情况， 而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)；
• switch 语句进行条件判断后直接执行到程序的条件语句，效率更高；而if…else 语句有几种条件，就得判断多少次；
• 当分支比较少时，if… else语句的执行效率比 switch语句高；
• 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰；

注意：

1. switch case语句一般用于等值判断,不适合于区间判断；
2. switch case一般需要配合break关键字使用 没有break会造成case穿透；
3. break是指退出当前switch语句，否则就是穿透当前值的整个case，直到遇到下一个break；

---

五、循环结构

首先需要介绍的就是while循环，当然，循环语句不仅仅是while一个，不过后面的文章会持续介绍；

循环：旨在重复执行某段代码；while : 在…. 期间

1. while循环语法

基本语法：

while (循环条件) {
     要重复执行的代码（循环体）
}

其中：

• 跟if语句很像，都要满足小括号里的条件为true才会进入执行代码；
• while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出；

2. while循环注意事项

循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。
所以，循环需要具备 三要素 ：

1. 变量起始值；
2. 终止条件（没有终止条件，循环会一直执行，造成死循环）；
3. 变量变化量（用自增或者自减）；

代码样例：

// 循环必须有3要素
// 变量的起始值
let i = 1
// 终止条件
while (i <= 3) {
    document.write(`大家好我是小柴 <br>`)
    // 变量变化
    i++
}

3. while循环退出

对于循环结束的语句，continue和break都是，但是在使用它们的时候，还是存在很大区别的：

1. continue：结束本次循环，继续下次循环；
2. break：跳出所在的循环，用到的会更多一些；

---

六、断点调试

断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来；

具体操作方式：首先浏览器打开调试界面

1. 按F12打开开发者工具
2. 点到sources一栏
3. 选择代码文件
4. 点击行数，打出断点，刷新查看

如图所示：

注意：在打断点之后，需要刷新页面才管用

作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到【 bug 】；

---

总结

今天是第三天学习JS啦，也算是花了一天的时间才总结出来目前所学的所有知识，希望对大家有用，同时也希望这篇文章可以有一个好的展现量和得到更多人的支持，谢谢每一位浏览文章的人，要相信小柴码文，必是好文，欢迎各位点赞+收藏+关注啦! ! !

---

以上就是所要介绍的JavaScript基础学习的第一节内容，后续即将更新移动Web的学习目标。感谢关注和支持，让我们一起成长！

有兴趣可回顾一下Java系列技术之JavaScript基础（从入门开始）①的文章内容，再结合之前所介绍的CSS基础学习以及HTML基础学习，大脑里的内容会更加丰富而充实的，毕竟综合性复习和学习是更会加深印象的哟！！！