JS基础知识02-运算符和表达式、控制结构

var num1 = 20;
var num2 = 30;
var res = num1 + num2; // 结果为50
var str1 = "Hello";
var str2 = "World";
var resStr = str1 + " " + str2; // 结果为"Hello World"

2.- (减法）用于两个数字相减

var num1 = 20;
var num2 = 30;
var res = num1 - num2; // 结果为-10

3. * 乘

用于两个数字相乘

var num1 = 20;
var num2 = 3;
var res = num1 * num2; // 结果为60

4./ 除

用于两个数字相除

var num1 = 20;
var num2 = 4;
var res = num1 / num2; // 结果为5

5.% 取余（取模）

用于两个数字取余（取模）

var num1 = 10;
var num2 = 3;
var res = num1 % num2; // 结果为1

6.++ 自增 -- 自减

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

递增（++）和递减（ -- ）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。

前置：先自加/减，后返回值

后置：先返回原值，后自加/减

//前置自增、自减
let x = 5;
let y = ++x; // 先将x增加1，x变为6，然后y被赋值为6
console.log(x); // 输出: 6
console.log(y); // 输出: 6

let z = 10;
let w = --z; // 先将z减少1，z变为9，然后w被赋值为9
console.log(z); // 输出: 9
console.log(w); // 输出: 9

//后置自增、自减
let a = 5;
let b = a++; // 先将a的值赋给b（此时b为5），然后a增加1，a变为6
console.log(a); // 输出: 6
console.log(b); // 输出: 5

let c = 10;
let d = c--; // 先将c的值赋给d（此时d为10），然后c减少1，c变为9
console.log(c); // 输出: 9
console.log(d); // 输出: 10

1.2.比较运算符

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

> 小于号 < 大于号

>= 大于等于（大于或等于） <= 小于等于（小于或等于）

== 等号（会转型）值相等（有隐式转换可能导致意外的结果）

=== 全等值和类型都要相等（没有隐式转换，只有当值和类型都相等时，才返回true

!= 不等值不相等 !== 严格不等值和类型都不相等

1.3.逻辑运算符

逻辑运算符：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。用于测量变量或者值之间的逻辑关系

1.&& 逻辑与（and）

当且仅当两个操作数都为true时，结果为true 。（一假则假，全真为真）

2.|| 逻辑或（or）

当至少一个操作数为true时，结果为true（一真则真，全假为假）

3.! 逻辑非（not）也叫作取反符，用来取一个布尔值相反的值，如 true 的相反值是 false

短路运算（逻辑中断）

短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值

1.4.赋值运算符

赋值运算符：用来把数据赋值给变量的运算符。

1.简单赋值（=）

将右边的值赋给左边的变量

2.复合赋值

包括+=、-=、*=、/=、%=,它们先执行相应的算术运算，然后将结果赋给变量

1.5.字符串运算符

JavaScript中，字符串运算符主要是 +，它用于连接（或拼接）两个或多个字符串。当使用 + 运算符时，如果操作数中有一个是字符串，JavaScript 会尝试将另一个操作数也转换为字符串，然后进行拼接。如果两个操作数都是数字，+ 则执行加法运算。

let str1 = "Hello, ";
let str2 = "world!";
let greeting = str1 + str2; // "Hello, world!"
console.log(greeting);

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName; // "John Doe"
console.log(fullName);

let number = 123;
let text = "The number is " + number; // "The number is 123"
console.log(text);

// 即使其中一个操作数是数字，JavaScript 也会将其转换为字符串并拼接
let result = "42" + 5; // "425"，注意这里并没有进行数学加法运算
console.log(result);

// 如果你想要进行数学加法而不是字符串拼接，确保操作数都是数字
let sum = 42 + 5; // 47
console.log(sum);

1.6.一元运算符与三元运算符

一元运算符：只能对一个数据进行操作 i++ i--

二元运算符：对两个数据进行操作算术运算符、逻辑运算符、比较运算符、赋值运算符

三元运算符：var 变量 = 表达式1-条件 ? 表达式2 : 表达式3

如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值。

二、表达式

在JavaScript中，表达式是由运算符、操作数（也称为“变量”或“字面量”）、函数调用等组成的结构，它能够计算并返回一个值。表达式可以非常简单，例如一个单独的变量或数字，也可以非常复杂，包含多个运算符和操作数。

1.字面量表达式

5;        // 数字字面量
"Hello";  // 字符串字面量
true;     // 布尔字面量

2.变量表达式

let x = 10;
x;        // 变量x的值，即10

3.算术表达式

2 + 3;    // 5
x * 2;    // 如果x是10，则结果是20

4.字符串连接表达式

"Hello" + " " + "World";  // "Hello World"

5.函数调用表达式

function add(a, b) {
    return a + b;
}
add(3, 4);  // 7

6.逻辑表达式

function add(a, b) {
    return a + b;
}
add(3, 4);  // 7

7.条件（三元）表达式

let isRaining = true;
let plan = isRaining ? "Stay indoors" : "Go outside";  // "Stay indoors"

8.赋值表达式

let y = 20;
y = y + 5;  // y现在是25

9.对象字面量表达式

let person = {
    name: "Alice",
    age: 30
};
person;  // 对象字面量，包含name和age属性

10.数组字面量表达式

let numbers = [1, 2, 3, 4, 5];
numbers;  // 数组字面量，包含5个数字

表达式本身并不执行任何操作；它们只是定义了可以计算值的结构。要实际执行表达式并获取其结果，你需要将表达式放在某个上下文中

三、控制结构

JavaScript中的控制结构用于控制代码的执行流程。它们包括条件语句（如if语句）、循环语句（如for和while循环）以及其他类型的语句（如switch语句和try...catch语句）。

3.1.条件语句

1、if 单分支语句

语法：

条件成立执行代码，否则什么也不做

if (表达式) {

// 条件成立执行的代码语句

}

解释：如果条件为真（true），则执行大括号中的JavaScript语句。

例

let age = 18;
if (age >= 18) {
    console.log("You are an adult.");
}

2、if...else 双分支语句

语法

条件成立执行 if 里面代码，否则执行else 里面的代码

if (表达式) {

// 条件成立执行的代码语句

} else {

// 条件不成立执行的代码语句

}

解释：如果条件为真，则执行第一个代码块；如果条件为假（false），则执行第二个代码块。

例

let age = 16;
if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are not an adult.");
}

3、if...else if...else 多分支语句

语法

// 适合于检查多重条件。

if (条件表达式1) {

语句1；

} else if (条件表达式2) {

语句2；

} else if (条件表达式3) {

语句3；

....

} else {

// 上述条件都不成立执行此处代码

}

解释：依次检查每个条件，如果某个条件为真，则执行相应的代码块；如果所有条件都为假，则执行最后的else代码块（如果有的话）。

例

let score = 85;
if (score >= 90) {
    console.log("Grade: A");
} else if (score >= 80) {
    console.log("Grade: B");
} else if (score >= 70) {
    console.log("Grade: C");
} else {
    console.log("Grade: D");
}

小练习：

假设参加某某射击俱乐部的比赛要满足三个条件：1.十八岁以上 2.在本店消费五万3.射击成绩平均在92环以上，如果这三个条件同时满足，则考虑‘恭喜,您有资格参与本店举行的射击比赛’；如果这三个条件有为真的情况，则：“抱歉，缺少参与条件”；如果都不满足，则：“无参赛资格”（用if写，答案见本文最后）

4.switch语句

switch分支流程控制：

switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。

语法：

//switch开关 转换 case小例子 选项
switch( 表达式 ){ 
  case value1:
    content1// 表达式 等于 value1 时要执行的代码
    break;
  case value2:
    content2// 表达式 等于 value2 时要执行的代码
    break;
  default:
    content3// 表达式 不等于任何一个 value 时要执行的代码
}

解释：根据表达式的值匹配相应的case常量，并执行对应的代码块。如果没有匹配的case常量，则执行default代码块（如果有的话）。break语句用于退出switch语句，防止继续执行后续的case代码块。

例

let day = 3;
switch (day) {
    case 1:
        console.log("Monday");
        break;
    case 2:
        console.log("Tuesday");
        break;
    case 3:
        console.log("Wednesday");
        break;
    default:
        console.log("Invalid day");
}

注意：

1.关键词switch 后面括号内可以是表达式或值，通常是一个变量

2.关键词case ,后跟一个选项的表达式或值，后面跟一个冒号

3.switch表达式的值会与结构中的 case 的值做比较

4.如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束

5.如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码

6.注意：执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。

5.三元操作符

语法

条件 ? 表达式1 : 表达式2

解释：如果条件为真，则返回表达式1的值；如果条件为假，则返回表达式2的值

例

let age = 20;
let canVote = (age >= 18) ? "Yes" : "No";
console.log(canVote); // 输出 "Yes"

3.2.循环语句

循环语句用于重复执行某段代码，直到满足特定条件

1、for循环

语法

for (初始化变量; 条件表达式; 操作表达式) {

// 循环体

}

解释：在循环开始前进行初始化，然后检查条件是否为真。如果为真，则执行循环体内的JavaScript语句，并在每次循环结束时执行步进操作。

例

for (let i = 0; i < 5; i++) {
    console.log("循环次数: " + i);
}

初始化变量就是用var 声明的一个普通变量，通常用于作为计数器使用

条件表达式就是用来决定每一次循环是否继续执行就是终止的条件

操作表达式是每次循环最后执行的代码经常用于我们计数器变量进行更新（递增或者递减）

2、while循环

语法：

while (条件表达式) {

// 循环体

}

解释：在每次循环开始前检查条件是否为真。如果为真，则执行循环体内的JavaScript语句。

例

let count = 0;
while (count < 5) {
    console.log("数值为: " + count);
    count++;
}

3、do...while循环

语法：

do {

// 循环体

} while (条件表达式)

解释：先执行一次循环体内的JavaScript语句，然后在每次循环结束后检查条件是否为真。如果为真，则继续执行循环体。

例：

let count = 0;
do {
    console.log("数值为：" + count);
    count++;
} while (count < 5);

特点：先执行后判断，do while 循环体至少执行一次

while与do...while区别

1、循环结构的表达式不同；

2、执行时判断方式不同；

while循环执行时只有当满足条件时才会进入循环，进入循环后，执行完循环体内全部语句直到条件不满足时，再跳出循环。

do-while循环将先运行一次，在经过名列前茅次do循环后，执行完一次后检查条件表达式的值是否成立，其值为不成立时才会退出循环。

3、执行次数不同；

while循环是先判断后执行，如果判断条件不成立可以不执行中间循环体。

do-while循环是先执行后判断，执行次数至少为一次，执行一次后判断条件是否成立，如果不成立跳出循环，成立则继续运行循环体。

4、执行末尾循环体的顺序不同。循环结构的表达式不同是指，while循环结构的表达式为while（表达式）{循环体}。

while循环的末尾循环体也是在中间循环体里，并在中间循环体中执行，循环体是否继续运行的条件也在循环体中。

do-while循环是在中间循环体中加入末尾循环体，并在执行中间循环体时执行末尾循环体，循环体是否继续运行的条件在末尾循环体里。

例

#include <stdio.h>

int main() {
    int i = 10, j = 10;

    // while循环示例
    printf("\nwhile循环:\n");
    while (i) {
        printf("%d ", i);
        i--;
    }

    // do while循环示例
    printf("\n\ndo while循环:\n");
    do {
        printf("%d ", j);
        j--;
    } while (j);

    return 0;
}

输出结果

while循环: 10 9 8 7 6 5 4 3 2 1

do while循环: 10 9 8 7 6 5 4 3 2 1

练习

1、假设青岛银行存款年利率为5%，那么存入1000元，要增加到5000元，需要几年，用while写

2、假设一个简单的ATM机取款过程

首先提示用户输入密码且最多只能输入三次,超过三次之后,提示用户"密码错误次数上限,请取卡",结束交易；如果密码正确,在提示用户输入取款金额；ATM只能输出100元的纸币,一次取钱要求最低100,最高10000。如果用户输入的金额符合要求,则打印输出取得钱数,最后提示用户"交易完成,请取卡"，否则提示用户重新输入金额。假设密码是111111,请编程实现

答案见本文最后

4、for...of循环

语法：

for (变量 of 可迭代对象) {

// 循环体

}

解释：遍历可迭代对象（如数组、字符串、Map、Set等）的所有元素，并在每次迭代中将当前元素赋值给变量，然后执行循环体内的JavaScript语句。

例

let numbers = [1, 2, 3, 4, 5];
for (let number of numbers) {
    console.log(number);
}

练习：（本文无答案，需要答案可评论或留言）

1、有一对幼兔，一个月后长成小兔，小兔一个月后长为成年兔子，成年兔子会生下一对幼兔（一生只生一只）
  问一年之后有多少兔子（不考虑兔子是否会死亡，并且每只兔子都会生育一对幼兔）
2、某侦察队接到一项紧急任务，要求A B C D E F 六个队员尽可能多的挑若干人，以下为限制条件
  1.A 和 B两人中至少去一个人
2.A 和D 不能同时去
3.A E F三人中要派两个人去
   4.CD两个人去一个人
  5.若D不去，E也不去

3.3.其他控制结构

1.break语句

退出整个循环，不再执行

例

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break; // 退出循环
    }
    console.log(i);
}

2.continue语句

退出本次循环（当前次循环），继续执行剩余次数循环

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        continue; // 跳过当前迭代
    }
    console.log(i);
}

3.try...catch语句

语法

try {

// 可能会抛出异常的代码;

} catch (error) {

// 处理异常的代码;

}

解释：尝试执行try代码块中的JavaScript语句，如果抛出异常，则执行catch代码块中的异常处理代码。

例

try {
    let result = 10 / 0; // 这将抛出一个错误
} catch (error) {
    console.log("An error occurred: " + error.message);
}

4.finally语句

语法：

try {

// 可能会抛出异常的代码;

} catch (error) {

// 处理异常的代码;

} finally {

// 无论是否发生异常都会执行的代码;

}

5.throw语句

语法：throw expression

解释：抛出一个自定义错误或异常

例：

function checkAge(age) {
    if (age < 18) {
        throw new Error("年龄必须在十八岁以上");
    }
    console.log("年龄有效");
}
try {
    checkAge(16);
} catch (error) {
    console.log("错误: " + error.message);
}

练习题答案

1.假设参加某某射击俱乐部的比赛要满足三个条件：1.十八岁以上 2.在本店消费五万3.射击成绩平均在92环以上，如果这三个条件同时满足，则考虑‘恭喜,您有资格参与本店举行的射击比赛’；如果这三个条件有为真的情况，则：“抱歉，缺少参与条件”；如果都不满足，则：“无参赛资格”

var tall = Number(prompt('请输入年龄（岁）：'));
var mon = Number(prompt('在本店消费（万）：'));
var cool = Number(prompt('十环射击成绩平均值：'));
if (age >= 18 && mon >= 50000 && cool >= 92){
 alert('恭喜，您有资格参与本店举行的射击比赛');
} else if (age >= 180 || mon >= 50000 || cool >= 92){
 alert('抱歉，缺少参与条件');
} else {
 alert('无参赛资格');
}