JavaScript基础②
1. 运算符
1.1 运算符的分类
运算符(operator):也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript中常用的运算符有:
- 算数运算符
- 递增和递减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
1.2 算数运算符
算术运算符:算术运算使用的符号,用于执行两个变量或值的算术运算。
算术运算符 | 描述 | 示例 |
---|---|---|
+ | 加 | 10 + 20 = 30 |
- | 减 | 10 - 20 = -10 |
* | 乘 | 10 * 20 = 200 |
/ | 除 | 10 / 20 =0.5 |
% | 取余(取模) | 9 % 2 = 1 |
- 浮点数的精度问题:浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数。不要直接判断两个浮点数是否相等 。
var result = 0.1 + 0.2; // 结果不是 0.3,而是:0.30000000000000004
console.log(0.07 * 100); // 结果不是 7, 而是:7.000000000000001
- 表达式和返回值:表达式是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合,是由数字、运算符、变量等组成的式子。表达式最终都会有一个结果,返回给开发者,称为返回值。
1.3 递增和递减运算符
递增和递减运算符:如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减(–)运算符来完成。在 JavaScript 中,递增(++)和递减( – )既可以放在变量前面,也可以放在变量后面。放在变量前面时,我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。(递增和递减运算符必须和变量配合使用)
- 前置:先自加(自减),后运算
var num = 10;
alert(++num + 10); // 21
- 后置:先运算,后自加 (自减)
var num = 10;
alert(10 + num++); // 20
1.4 比较运算符
比较运算符(关系运算符):是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true / false)作为比较运算的结果。
比较运算符 | 说明 | 案例 | 结果 |
---|---|---|---|
< | 小于 | 1 < 2 | true |
> | 大于 | 1 > 2 | false |
>= | 大于等于 | 2 >= 2 | true |
<= | 小于等于 | 3 <= 2 | false |
== | 相等(会转型) | 18 == ‘18’ | true |
!= | 不相等 | 18 != ‘18’ | false |
=== | 全等(值和数据类型都一致) | 18 === ‘18’ | false |
!== | 不全等 | 18 !== ‘18’ | true |
等号比较:
符合 | 作用 | 用法 |
---|---|---|
= | 赋值 | 把右边给左边 |
== | 判断 | 判断两边是否相等(有隐式转换) |
=== | 全等 | 判断两边的值和数据类型是否完全相同 |
1.5 逻辑运算符
逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。后面开发中经常用于多个条件的判断
逻辑运算符 | 说明 |
---|---|
&& | 与and |
|| | 或or |
! | 非not |
短路运算(逻辑中断):当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;
逻辑与:表达式1 && 表达式2
如果第一个表达式的值为真,则返回表达式2
如果第一个表达式的值为假,则返回表达式1
逻辑或:表达式1 || 表达式2
如果第一个表达式的值为真,则返回表达式1
如果第一个表达式的值为假,则返回表达式2
1.6 赋值运算符
赋值运算符:用来把数据赋值给变量的运算符。
赋值运算符 | 说明 |
---|---|
= | 直接赋值 |
+=、-= | 先加、减一个数后再赋值 |
*=、/=、%= | 先乘、除、取余后再赋值 |
1.7 运算符优先级
优先级 | 运算符 | 顺序 |
---|---|---|
1 | 小括号 | () |
2 | 一元运算符 | ++ – ! |
3 | 算术运算符 | 先 * / % 后 + - |
4 | 关系运算符 | > >= < <= |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先 && 后 || |
7 | 赋值运算符 | = |
8 | 逗号 | , |
2. 流程控制
2.1 流程控制概念
流程控制就是来控制代码按照一定结构顺序来执行
流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,代表三种代码执行的顺序。
2.2 顺序
顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行,程序中大多数的代码都是这样执行的。
2.3 分支
由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果
JS 语言提供了两种分支结构语句:if 语句、switch 语句
if
- if单分支语句
// 条件成立执行代码,否则什么也不做
if (条件表达式) {
// 条件成立执行的代码语句
}
- if else双分支语句
// 条件成立 执行 if 里面代码,否则执行else 里面的代码
if (条件表达式) {
// [如果] 条件成立执行的代码
} else {
// [否则] 执行的代码
}
- if else if else多分支语句
// 适合于检查多重条件。
if (条件表达式1) {
语句1;
} else if (条件表达式2) {
语句2;
} else if (条件表达式3) {
语句3;
....
} else {
// 上述条件都不成立执行此处代码
}
三元表达式
条件表达式 ? 表达式1 : 表达式2;
如果条件表达式为 true ,则返回表达式1的值
如果条件表达式为 false,则返回表达式2的值
switch
switch( 表达式 ){
case value1:
// 表达式 等于(===) value1 时要执行的代码
break;
case value2:
// 表达式 等于(===) value2 时要执行的代码
break;
default:
// 表达式 不等于任何一个 value 时要执行的代码
}
如果存在匹配全等(===) ,则与该 case 关联的代码块会被执行,并在遇到 break 时停止,整个 switch 语句代码执行结束
注意: 执行case 里面的语句时,如果没有break,则继续执行下一个case里面的语句。
2.4 循环
for
//单层
for(初始化变量; 条件表达式; 操作表达式 ){
//循环体
}
//双层
for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
需执行的代码;
}
}
名称 | 作用 |
---|---|
初始化变量 | 通常被用于初始化一个计数器,该表达式可以使用 var 关键字声明新的变量,这个变量帮我们来记录次数。 |
条件表达式 | 用于确定每一次循环是否能被执行。如果结果是 true 就继续循环,否则退出循环。 |
操作表达式 | 每次循环最后执行的代码 |
while
while (条件表达式) {
// 循环体代码
}
先执行条件表达式,如果结果为 true,则执行循环体代码;如果为 false,则退出循环,执行后面代码.
使用 while 循环时一定要注意,它必须要有退出条件,否则会成为死循环
do-while
do {
// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);
先执行一次循环体代码,再执行条件表达式,如果结果为 true,则继续执行循环体代码,如果为 false,则退出循环,继续执行后面代码 。
注意:先再执行循环体,再判断,do…while循环语句至少会执行一次循环体代码
continue、break
continue
关键字用于立即跳出本次循环,继续下一次循环(本次循环体中 continue 之后的代码就会少执行一次)。break
关键字用于立即跳出整个循环(循环结束)。
断点调试
断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。断点调试可以帮助观察程序的运行过程.
1、浏览器中按 F12–> sources -->找到需要调试的文件–>在程序的某一行设置断点
2、Watch: 监视,通过watch可以监视变量的值的变化,非常的常用。
3、摁下F11,程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。
3. 代码规范
3.1 标识符命名规范
- 变量、函数的命名必须要有意义
- 变量的名称一般用名词
- 函数的名称一般用动词
3.2 操作符规范
// 操作符的左右两侧各保留一个空格
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // 直接退出整个 for 循环,跳到整个for循环下面的语句
}
console.log('我正在吃第' + i + '个包子呢');
}
3.3 单行注释规范
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // 单行注释前面注意有个空格
}
console.log('我正在吃第' + i + '个包子呢');
}
3.4 其他规范
关键词、操作符之间后加空格