【ECMAScript笔记二】运算符分类，流程控制（顺序结构、分支结构、循环结构）
文章目录
-
- 4 运算符
-
- 4.1 算术运算符
- 4.2 递增和递减运算符
- 4.3 比较运算符
- 4.4 逻辑运算符
- 4.5 赋值运算符
- 4.6 运算优先级
- 5 流程控制
-
- 5.1 顺序结构
- 5.2 分支结构
-
- 5.2.1 if 语句
- 5.2.2 switch 语句
- 5.3 循环结构
-
- 5.3.1 for循环
- 5.3.2 while循环
- 5.3.3 do while循环
- 5.3.4 continue和break
- 5.4 调试
4 运算符
运算符( operator )也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。
4.1 算术运算符
使用浮点数（小数）进行运算，会有精度问题，因此尽量使用整数进行运算
console.log(0.1 + 0.2); // 0.3000000000004
console.log(0.07 * 100); // 7.000000000001
var num = 0.1 + 0.2;
console.log(num == 0.3）; // false
4.2 递增和递减运算符
-
递增：
++ -
递减：
--
递增或递减运算符必须和变量配合使用，不能出现1++，或者1–
-
前置递增运算符（先加1，后运算）
var num=10; console.log(++num + 10); // ++num 意思为 num=num+1，返回值为21 -
后置递增运算符（先返原值，后加1）
var num=10; console.log(num++ + 10); // num++ 意思同样为 num=num+1，返回值为20 console.log(num); // 返回值为11
综合练习：
var a = 10;
++a; // ++a = 11； a = 11
var b = ++a + 2; // a = 12； ++a = 12
console.log(b); // 14
var c = 10;
c++; // C++ = 11； C = 11
var d = C++ + 2; // C++ = 11； C = 12
console.log(d); // 13
var e = 10;
var f = e++ + ++e; // e++:e++=10,e=11; ++e:e=12,++e=12
console.log(f); // f = 10 + 12 = 22
4.3 比较运算符
比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值( true / false )作为结果。
console.log(3 >= 5); // false
console.log(18 == 18); // true
console.log(18 == '18'); // true ==只要求值相等就行，会自动转换数据类型
console.log(18 === '18'); // false ===和!==要求全等，值和数据类型都全部一致才行
console.log(18 != '18'); // false
4.4 逻辑运算符
逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断
console.log(3 > 5 && 3 > 2); // false
console.log(true && false); // false
console.log(3 > 5 || 3 > 2); // true
console.log(!true); // false，“逻辑非”也叫“取反符”
重点：短路运算（逻辑中断)
当有多个表达式(值)时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值
- 逻辑与
-
语法:
表达式1 && 表达式2 -
如果表达式1的值为真，则返回表达式2
123 && 456 // 返回456 -
如果表达式1的值为假，则返回表达式1
0 && 456 // 返回0 0 && 1 + 2 && 456 // 返回0
- 逻辑或
-
语法:
表达式1 || 表达式2 -
如果表达式1结果为真，则返回表达式1
123 || 456 // 返回123 -
如果表达式1结果为假，则返回表达式2
0 || 456 // 返回456 0 || 1+2 || 456 // 返回3
应用：
var num = 0;
console.log(123 || num++); // 123
console.log(num); // 0，因为num++没有被执行
4.5 赋值运算符
var num = 10;
num += 2;
console.log(num); // 返回12
num *= 3;
console.log(num); // 返回36
4.6 运算优先级
5 流程控制
**流程控制：**控制代码按照什么结构顺序执行，包括：
- 顺序结构
- 分支结构
- 循环结构
5.1 顺序结构
按照代码的先后顺序，依次执行
5.2 分支结构
5.2.1 if 语句
- if 语句（分支语句）
if(条件表达式)
{
//条件表达式为真，执行语句
}
// 条件表达式为假，则执行后面的代码
var age = prompt("请输入您的年龄:");
if (age >= 18）{
alert('咱去网吧！');
}
- if - else 条件语句（双分支语句）
if(条件表达式)
{
// 条件表达式结果为真，执行语句1
}
else
{
// 条件表达式结果为假，执行语句2
}
- if - else if 语句（多分支语句）
if(条件表达式1) {
// 执行语句1
}
else if(条件表达式2) {
// 执行语句2
}
else if(条件表达式3) {
// 执行语句3
}
else {
// 最后的执行语句
}
-
三元表达式（简化版 双分支语句）
三元运算符组成的式子
?:
条件表达式？表达式1：表达式2;
/* 条件表达式为真，则返回表达式1的值
条件表达式为假，则返回表达式2的值 */
var num = 10;
var result = num > 5?'是的':'不是的'；
console.log(result); // 是的
5.2.2 switch 语句
switch（表达式）
{
case value1： // 表达式的值，和case后面的值全等，就执行对应语句
执行语句1；
break； // 必须写break，否则会继续执行语句2
case value2：
执行语句2；
break；
...
default: // 都没有匹配上，那么执行default的语句
执行最后的语句；
}
- if语句：适用于判断一个范围，从上到下依次判断，执行效率低，分支少的时候用。如num>10
- switch语句：适用于判断一个特定的值，效率更高，分支多的时候用。如num==10
5.3 循环结构
有三种类型的循环语句，包括：
- for 循环
- while 循环
- do…while 循环
循环体：一组被重复执行的语句
终止条件：判断能否继续重复执行
循环语句：由循环体及循环的终止条件组成的语句
5.3.1 for循环
for(初始化变量；条件表达式，操作表达式)
{
循环体；
}
初始化变量：用var声明的一个普通变量，通常用作计数器
条件表达式：用来决定每一次循环是否继续执行，即终止的条件
操作表达式：每次循环最后执行的代码，经常用于更新计数器变量（递增/递减）
- 输出相同的代码
var num=prompt("请输入道歉的次数");
for(var i = 1; i <= num; i++) {
console.log("我错了");
}
- 输出不同的代码
for (var i = 1; i <= num; i++) {
console.log("我今年" + i + "岁了");
}
for(var i = 1; i <= num; i++) {
if (i == 1) {
console.log("我今年1岁，我出生啦！");
}
else if (i == 100) {
console.log("我今年100岁，我死啦！");
}
else {
console.log("我今年" + i + "岁了");
}
}
- 重复进行运算
var sum = 0; // 求和的变量
for (var i = 1; i <=100; i++) {
sum += i; // sum = sum + i;
}
console.log(sum); // 5050
var num = prompt('请输入星星的个数');
var str = '';
for (var i = 1; i <= num; i++) {
str = str + '★';
}
console.log(str);
-
双重for循环
循环嵌套：在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中再嵌套一个for循环，这样的for循环语句我们称之为双重for循环。
for(外层的初始化变量; 外层的条件表达式; 外层的操作表达式){
for(里层的初始化变量; 里层的条件表达式; 里层的操作表达式){
//执行语句;
}
}
// 1. 简单例子
for (var i = 1; i <= 3; i++) {
console.log('这是外层循环第' + i + '次');
for (var j = 1; j <= 3; j++) {
console.log('这是里层的循环第' + j + '次');
}
}
// 2. 打印 5行 5列 星星
var str = '';
for (var i = 1; i <= 5; i++) { // 外层循环负责打印5行
for (var j = 1; j <= 5; j++) { // 里层循环负责每行打印5个星星
str = str + '★';
}
// 如果一行打印完毕5个星星就要另起一行 加 '\n'
str = str + '\n';
}
console.log(str);
// 3. 打印 rows行 cols列 的星星
var rows = prompt('请您输入行数:');
var cols = prompt('请您输入列数:');
var str = '';
for (var i = 1; i <= rows; i++) {
for (var j = 1; j <= cols; j++) {
str = str + '★';
}
str += '\n';
}
console.log(str);
// 4. 打印倒三角形
var str = '';
for (var i = 1; i <= 10; i++) { // 外层循环控制行数
for (var j = i; j <= 10; j++) { // 里层循环打印的个数不一样 j = i
str = str + '★';
}
str += '\n';
}
console.log(str);
// 5. 打印九九乘法表案例
var str = '';
for (var i = 1; i <= 9; i++) { // 外层循环控制行数
for (var j = 1; j <= i; j++) { // 里层循环控制列数，注意使用：j <= i
// str = str + '★';
str += j + '×' + i + '=' + i * j + '\t'; // 空格用加 '\t'
}
str += '\n';
}
console.log(str);
5.3.2 while循环
在条件表达式为真的前提下，循环执行指定的代码，直到表达式不为真时结束循环，执行后面的语句。
while(条件表达式)
{
循环语句；
}
// 1. 简单例子
var num = 1;
while(num < 100)
{
console.log("厉害了");
num++; // 制作退出循环的方法
}
// 2. 计算 1 ~ 100 之间所有整数的和
var sum = 0;
var j = 1;
while (j <= 100) {
sum += j;
j++;
}
console.log(sum);
// 3. 弹出一个提示框， 你爱我吗？ 如果输入我爱你，就提示结束，否则，一直询问。
var message = prompt('你爱我吗?');
while (message !== '我爱你') {
message = prompt('你爱我吗?');
}
alert('我也爱你啊！');
注意：使用while循环时，必须要制作退出循环的方法，否则会进入死循环。
5.3.3 do while循环
do
{
循环语句；
}
while(条件表达式)
do while：先执行一次循环体，再判断条件。
while：先判断条件，再执行一次循环体。
// 1. 简单例子
var i = 1;
do {
console.log('how are you?'); // do while 至少执行一次循环体
i++;
}
while (i <= 100)
// 2. 打印人的一生，从1岁到100岁
var i = 1;
do {
console.log('这个人今年' + i + '岁了');
i++;
} while (i <= 100)
// 3. 计算 1 ~ 100 之间所有整数的和
var sum = 0;
var j = 1;
do {
sum += j;
j++;
} while (j <= 100)
console.log(sum);
// 4. 弹出一个提示框， 你爱我吗？ 如果输入我爱你，就提示结束，否则，一直询问。
do {
var message = prompt('你爱我吗?');
} while (message !== '我爱你')
alert('我也爱你啊');
5.3.4 continue和break
- continue 关键字：立即跳出本次循环，继续下一次循环
例：吃5个包子，吃完第1个，第2个第三个有虫子，我们使用continue跳出第三个，然后会继续吃第4个，第5个
// continue 关键字 跳到下一次循环
for (var i = 1; i <= 5; i++) {
if (i == 3) {
continue; // 只要遇见continue就退出本次循环 直接跳到 i++
}
console.log('我正在吃第' + i + '个包子');
}
// 求1~100 之间， 除了能被7整除之外的整数和
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i % 7 == 0) {
continue;
}
sum += i;
}
console.log(sum); // 4315
- break 关键字：立即跳出所有循环，不再进行下一次循环
例：吃5个包子，吃完第1个，第2个，第三个有半个虫子，我们使用break，就会退出整个循环，不再吃第4个，第5个
// break 关键字 退出整个循环
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break;
}
console.log('我正在吃第' + i + '个包子');
}
5.4 调试
- 浏览器中按F12 → sources → 找到需要调试的文件 → 在程序的某一行设置断点
- Watch：监视，通过watch可以监视变量的值的变化，非常常用
- F11：程序单步执行，让程序一行一行地执行，观察watch中变量的值的变化
