• Java Web——JavaScript运算符与流程语句

    1. 运算符

    1.1. 算数运算符

    数字是用来计算的，比如：乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。

    算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等

    运算符

    作用

    +

    求和

    -

    求差

    *

    求积

    /

    求商

    %

    取模（取余数）

    加法（+）：

    1. let a = 5;
    2. let b = 3;
    3. let sum = a + b;
    4. console.log(sum); // 输出：8

    减法（-）：

    1. let a = 5;
    2. let b = 3;
    3. let difference = a - b;
    4. console.log(difference); // 输出：2

    乘法（*）：

    1. let a = 5;
    2. let b = 3;
    3. let product = a * b;
    4. console.log(product); // 输出：15

    除法（/）：

    1. let a = 10;
    2. let b = 2;
    3. let quotient = a / b;
    4. console.log(quotient); // 输出：5

    取余（%）：

    1. let a = 10;
    2. let b = 3;
    3. let remainder = a % b;
    4. console.log(remainder); // 输出：1，因为10除以3余数为1。

    1.2. 赋值运算符

    赋值运算符：对变量进行赋值的运算符

    “=” 将等号右边的值赋予给左边, 要求左边必须是一个容器

    运算符

    作用

    +=

    加法赋值

    -+

    减法赋值

    *=

    乘法赋值

    /=

    除法赋值

    %=

    取余赋值

    1. let a = 10;  
    2. let b = 5;  
    3.   
    4. // 加法赋值运算符 +=   
    5. a += b; // 这行代码等同于 a = a + b; ，所以 a 的值会变成 15  
    6. console.log(a); // 输出：15  
    7.   
    8. // 减法赋值运算符 -=   
    9. a -= b; // 这行代码等同于 a = a - b; ，所以 a 的值会变回 10  
    10. console.log(a); // 输出：10  
    11.   
    12. // 乘法赋值运算符 *=   
    13. a *= b; // 这行代码等同于 a = a * b; ，所以 a 的值会变成 50  
    14. console.log(a); // 输出：50  
    15.   
    16. // 除法赋值运算符 /=   
    17. a /= b; // 这行代码等同于 a = a / b; ，所以 a 的值会变成 10  
    18. console.log(a); // 输出：10  
    19.   
    20. // 取余赋值运算符 %=  
    21. a %= b; // 这行代码等同于 a = a % b; ，所以 a 的值会变成 0  
    22. console.log(a); // 输出：0

    1.3. 自增/自减运算符

    在JavaScript中，自增和自减是特殊的运算符，用于增加或减少变量的值。

    1. 自增运算符 (++)：
      这个运算符会将变量值增加1。它有两种使用方式：前缀和后缀。
    • 前缀形式：++variable，首先增加变量的值，然后返回增加后的值。
    • 后缀形式：variable++，首先返回变量的原始值，然后增加变量的值。

    例如：

    1. let count = 5;
    2. console.log(++count);  // 输出：6，先自增，然后打印
    3. console.log(count);    // 输出：6，打印当前的值
    4.  
    5. let count2 = 5;
    6. console.log(count2++); // 输出：5，先打印，然后自增
    7. console.log(count2);  // 输出：6，打印自增后的值

    1. 自减运算符 (--)：
      这个运算符会将变量值减少1。它也有两种使用方式：前缀和后缀。
    • 前缀形式：--variable，首先减少变量的值，然后返回减少后的值。
    • 后缀形式：variable--，首先返回变量的原始值，然后减少变量的值。

    例如：

    1. let count = 5;
    2. console.log(--count);  // 输出：4，先自减，然后打印
    3. console.log(count);    // 输出：4，打印当前的值
    4.  
    5. let count2 = 5;
    6. console.log(count2--); // 输出：5，先打印，然后自减
    7. console.log(count2);  // 输出：4，打印自减后的值

    1.4. 比较运算符

    使用场景：比较两个数据大小、是否相等，根据比较结果返回一个布尔值（true / false）

    1.4.1. 常见比较运算符

    运算符

    作用

    >

    左边是否大于右边

    <

    左边是否小于右边

    >=

    左边是否大于或等于右边

    <=

    左边是否小于或等于右边

    ==

    左右两边值是否相等

    !=

    左右值不相等

    1. 大于（>）运算符：
    1. let result = 10 > 5; // 检查10是否大于5
    2. console.log(result); // 输出：true

    1. 小于（<）运算符：
    1. let result = 5 < 10; // 检查5是否小于10
    2. console.log(result); // 输出：true

    1. 大于或等于（>=）运算符：
    1. let result = 10 >= 10; // 检查10是否大于或等于10
    2. console.log(result); // 输出：true

    1. 小于或等于（<=）运算符：
    1. let result = 5 <= 10; // 检查5是否小于或等于10
    2. console.log(result); // 输出：true

    1. 等于（==）运算符：
    1. let result = '5' == 5; // 检查字符串'5'是否等于数字5，这里会发生类型转换
    2. console.log(result); // 输出：true

    1. 不等于（!=）运算符：
    1. let result = '5' != 5; // 检查字符串'5'是否不等于数字5
    2. console.log(result); // 输出：false，因为在==运算符中，字符串和数字可以进行类型转换，所以这里字符串'5'和数字5是相等的，因此不等于运算结果为false。

    1.4.2. 比较重要的两个比较运算符

    !==

    左右两边是否不全等

    ===

    左右两边是否类型和值都相等（重点）

    1. !== 运算符

    !== 是一个“不全等”运算符。当使用 !== 进行比较时，如果两个值的类型不同，或者两个值的类型相同但内容不同，那么结果为 true。也就是说，只有当两个值的类型和内容都完全相同时，结果才为 false。

    例如：

    1. console.log(5 !== '5');  // 输出：true，因为数字5和字符串'5'类型不同
    2. console.log(10 !== 10); // 输出：false，因为数字10和数字10类型和值都相同

    1. === 运算符

    与 !== 相对应，=== 是一个“全等”运算符。当使用 === 进行比较时，它会同时检查两个值的类型和内容是否都相同。只有当两个值的类型和内容都完全相同时，结果才为 true。否则，结果为 false。

    例如：

    1. console.log(5 === '5');  // 输出：false，因为数字5和字符串'5'类型不同
    2. console.log(10 === 10); // 输出：true，因为数字10和数字10类型和值都相同

    1. 为什么使用 === 和 !== ?

    使用 === 和 !== 的好处是它们可以防止JavaScript的自动类型转换，这在某些情况下可能会导致一些意想不到的问题。特别是在比较涉及到字符串和数字的情况时，使用 == 可能会导致错误的结果，因为它会尝试将字符串转换为数字进行比较。而 === 和 !== 不会进行这样的类型转换，因此它们提供了更准确、更可预测的比较结果。

    所以，为了确保比较的准确性和避免可能出现的错误，通常推荐在JavaScript中使用 === 和 !== 运算符。

    1.5. 逻辑运算符

    在JavaScript中，可以使用这些逻辑运算符来操作布尔值，他们分别是&&（逻辑与）、||（逻辑或）和!（逻辑非）。

    1. &&（逻辑与）：当且仅当两个操作数都为 true 时，结果才为 true。如果其中一个操作数为 false，结果就为 false。这就是“一假则假”的原则。
    1. console.log(true && true);  // 输出：true
    2. console.log(true && false); // 输出：false
    3. console.log(false && true); // 输出：false
    4. console.log(false && false); // 输出：false

    1. ||（逻辑或）：只要两个操作数中有一个为 true，结果就为 true。只有当两个操作数都为 false 时，结果才为 false。这就是“一真则真”的原则。
    1. console.log(true || true);  // 输出：true
    2. console.log(true || false); // 输出：true
    3. console.log(false || true); // 输出：true
    4. console.log(false || false); // 输出：false

    1. !（逻辑非）：逻辑非运算符用于翻转操作数的逻辑状态。如果操作数为 true，结果就为 false。如果操作数为 false，结果就为 true。这就是“真变假，假变真”的原则。
    1. console.log(!true);  // 输出：false
    2. console.log(!false); // 输出：true

    2. 流程控制语句

    2.1. 分支语句

    分支语句。分支语句用于根据某些条件来决定执行哪些代码。简单来说，它们帮助程序在多个选项中选择执行路径。

    分支语句：是程序中用于做选择的语句。想象一下，你到了一个交叉路口，你需要根据某些标志或信号来决定往哪个方向走。分支语句在程序中就起到了这样的作用。

    • if分支语句（重点）：这是最常见的分支语句。它根据一个条件的真假来决定执行哪段代码。例如，如果说“如果天气好，我就出去玩”，那么“天气好”就是一个条件，根据这个条件是否为真，来决定是否执行“出去玩”这个动作。
    • 三元运算符：这是一个简短的if-else结构。它有三个部分，所以叫做三元运算符。它通常用于简单的条件判断。例如，在某些语言中，它可能是这样的：条件 ? 结果1 : 结果2。这意味着，如果条件为真，则结果为结果1，否则为结果2。
    • switch语句：用于多个选项的选择。当你有一个变量，并希望根据这个变量的不同值来执行不同的代码块时，可以使用switch语句。例如，一个星期有7天，根据星期的值（1到7）来决定做什么活动。

    2.1.1. if分支语句

    if语句用于根据条件执行代码块。它有两种常见形式：if语句和if...else语句。

    if语句：

    1. let number = 10;
    2.  
    3. if (number > 5) {
    4.   console.log("数字大于5");
    5. }

    上述代码中，如果number大于5，将输出"数字大于5"。

    if...else语句：

    1. let number = 10;
    2.  
    3. if (number > 5) {
    4.   console.log("数字大于5");
    5. } else {
    6.   console.log("数字小于等于5");
    7. }

    上述代码中，如果number大于5，将输出"数字大于5"，否则输出"数字小于等于5"。

    if...else if...else语句

    这是一种更灵活的if语句形式，允许在多个条件之间进行判断，执行第一个满足条件的代码块。如果没有条件满足，也可以使用else语句来执行默认的代码块。

    1. let number = 3;  
    2.   
    3. if (number === 1) {  
    4.   console.log("数字是1");  
    5. } else if (number === 2) {  
    6.   console.log("数字是2");  
    7. } else if (number === 3) {  
    8.   console.log("数字是3");  
    9. } else {  
    10.   console.log("数字不是1、2或3");  
    11. }

    在上述代码中，根据number的值，逐个判断条件，执行第一个满足条件的代码块。如果number等于1，则输出"数字是1"；如果number等于2，则输出"数字是2"；如果number等于3，则输出"数字是3"。如果number的值没有匹配任何条件，将执行最后的else语句，输出"数字不是1、2或3"。

    2.1.2. 三元运算符

    三元运算符是一种简洁的if...else语句，它在一行代码中完成条件判断和操作。

    示例代码：

    1. let number = 10;
    2. let message = (number > 5) ? "数字大于5" : "数字小于等于5";
    3. console.log(message);

    上述代码中，根据number是否大于5，将相应的消息赋值给message变量，并输出该消息。

    2.1.3. switch语句

    switch语句用于根据表达式的值执行不同的代码块。它可以替代多个if...else语句，使代码更清晰和易读。

    示例代码：

    1. let dayOfWeek = 2;
    2.  
    3. switch (dayOfWeek) {
    4.   case 1:
    5.     console.log("星期一");
    6.     break;
    7.   case 2:
    8.     console.log("星期二");
    9.     break;
    10.   default:
    11.     console.log("其他星期");
    12. }

    上述代码中，根据dayOfWeek的值，执行相应的case代码块，并输出对应的星期。如果dayOfWeek的值没有匹配的case，将执行default代码块。

    2.2. 循环语句

    2.2.1. while循环

    while循环是一种前测试循环，这意味着在执行循环体内的代码块之前，先检查循环条件。如果条件为真，则执行循环体，然后再次检查条件。这个过程会一直重复，直到条件为假时停止循环

    1. let count = 0; // 初始化计数器
    2.  
    3. while (count < 5) { // 在每次迭代前检查条件
    4.     console.log(count); // 打印当前计数器的值
    5.     count++; // 计数器递增
    6. }
    7. // 输出: 0, 1, 2, 3, 4

    2.2.2. do...while循环

    与while循环相比，do...while循环是一种后测试循环。这意味着它会先执行一次循环体内的代码块，然后再检查循环条件。如果条件为真，则再次执行循环体，并重复此过程。如果条件为假，则停止循环。

    1. let count = 0; // 初始化计数器
    2.  
    3. do {
    4.     console.log(count); // 打印当前计数器的值
    5.     count++; // 计数器递增
    6. } while (count < 5); // 在每次迭代后检查条件
    7. // 输出: 0, 1, 2, 3, 4

    2.2.3. for循环

    for循环是一种更紧凑和常用的循环结构。它在单个语句中包含了初始化、条件和增量三个部分。

    1. for (let count = 0; count < 5; count++) { // 初始化、条件和增量合并到一个语句中
    2.     console.log(count); // 打印当前计数器的值
    3. }
    4. // 输出: 0, 1, 2, 3, 4

    初始化：let count = 0

    循环条件：count < 5

    循环增量：count++

    3. 数组

    数组就好比是一个容器，可以存放多个相同类型的值，并且这些值都有一个从0开始的编号，这个编号就是索引。我们可以使用这个索引来访问、修改或操作数组中的元素。

    3.1. 创建数组

    使用数组字面量定义：这是最常见且最简洁的方式来定义数组。数组字面量是一个包含一系列元素的列表，每个元素之间由逗号分隔，并包围在方括号（[ ]）中。

    1. 	// 1. 语法，使用 [] 来定义一个空数组
    2.   // 定义一个空数组，然后赋值给变量 classes
    3.   let classes = [];
    4.  
    5.   // 2. 定义非空数组
    6.   let classes = ['小明', '小刚', '小红', '小丽', '小米']

    通过 [] 定义数组，数据中可以存放真正的数据，如小明、小刚、小红等这些都是数组中的数据，我们这些数据称为数组单元，数组单元之间使用英文逗号分隔。

    3.2. 访问数组和数组索引

    使用数组存放数据并不是最终目的，真正的目的是能够随时访问数组中的数据。这意味着数组不仅仅是一个存储数据的结构，更重要的是它能够让我们在需要的时候快速获取到数据。

    为了达到这个目的，JavaScript为数组中的每一个数据单元都编了号。这些编号被称为索引值或下标。通过索引值，我们可以轻松地访问到数组中的数据单元。

    例如，如果我们有一个数组arr，它包含三个元素，那么我们可以通过索引值来访问这些元素：arr[0]、arr[1]和arr[2]。这里的0、1和2就是索引值。

    1. let fruits = ['苹果', '香蕉', '橙子', '葡萄', '西瓜']  
    2.   
    3. // 1. 访问数组  
    4. document.write(fruits[0]) // 结果为：苹果  
    5. document.write(fruits[2]) // 结果为：橙子  
    6. document.write(fruits[4]) // 结果为：西瓜  
    7.   
    8. // 2. 通过索引值重新为数组赋值  
    9. document.write(fruits[1]) // 结果为：香蕉  
    10. // 重新为索引值为 1 的元素赋值  
    11. fruits[1] = '黄香蕉'  
    12. document.write(fruits[1]) // 结果为：黄香蕉

    3.3. 数组长度

    1. 数组长度的获取：
      每个JavaScript数组都有一个length属性，这个属性返回数组的最大索引加一。这意味着它通常返回数组中元素的数量。例如：
    1. var arr = [1, 2, 3, 4, 5];  
    2. console.log(arr.length);  // 输出：5

    1. 数组长度的设置：
      length属性不仅是只读的，还可以设置。如果你设置数组的length为一个新的值，数组的长度就会改变。如果新的长度比原来的长度小，那么超出新长度的元素将会被删除。如果新的长度比原来的长度大，那么新的元素将会被添加到数组的末尾，这些新元素的值为undefined。例如：
    1. var arr = [1, 2, 3, 4, 5];  
    2. arr.length = 3;  
    3. console.log(arr);  // 输出：[1, 2, 3]  
    4.   
    5. arr.length = 5;  
    6. console.log(arr);  // 输出：[1, 2, 3, undefined, undefined]

    3.4. 数组操作

    1. push：动态向数组的尾部添加一个元素。
    1. var arr = [1, 2, 3, 4];
    2. arr.push(5);
    3. console.log(arr);  // 输出：[1, 2, 3, 4, 5]

    1. unshift：动态向数组的头部添加一个元素。
    1. var arr = [1, 2, 3, 4];
    2. arr.unshift(0);
    3. console.log(arr);  // 输出：[0, 1, 2, 3, 4]

    1. pop：删除数组的最后一个元素。
    1. var arr = [1, 2, 3, 4];
    2. var lastElement = arr.pop();
    3. console.log(arr);  // 输出：[1, 2, 3]
    4. console.log(lastElement);  // 输出：4

    1. shift：删除数组的第一个元素。
    1. var arr = [1, 2, 3, 4];
    2. var firstElement = arr.shift();
    3. console.log(arr);  // 输出：[2, 3, 4]
    4. console.log(firstElement);  // 输出：1

    1. splice：动态删除任意元素。splice方法可以在任何位置删除元素，它接受两个参数，第一个参数是要开始删除的索引，第二个参数是要删除的元素数量。
    1. var arr = [1, 2, 3, 4];
    2. arr.splice(2, 1);  // 从索引2开始，删除1个元素
    3. console.log(arr);  // 输出：[1, 2, 4]
  • 相关阅读:
    MessagePack 和System.Text.Json 序列化和反序列化对比
    HTTP请求报文与响应报文
    熊市下PLATO如何通过Elephant Swap，获得溢价收益？
    金仓数据库KingbaseES客户端编程开发框架-Activiti（2. 概述）
    Javaweb学生信息管理系统（Mysql+JSP+MVC+CSS）
    Windows本地配置带GPU的Pytorch环境
    Java版分布式微服务云开发架构 Spring Cloud+Spring Boot+Mybatis 电子招标采购系统功能清单
    ②⑩ 【MySQL Log】详解MySQL日志：错误日志、二进制日志、查询日志、慢查询日志
    Spring ApplicationContext 容器
    LeetCode 2455. Average Value of Even Numbers That Are Divisible by Three【数学】简单
  • 原文地址：https://blog.csdn.net/Sakurapaid/article/details/134484175