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

1. 运算符

1.1. 算数运算符

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

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

运算符	作用
+	求和
-	求差
*	求积
/	求商
%	取模（取余数）

加法（+）：

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

减法（-）：

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

乘法（*）：

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

除法（/）：

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

取余（%）：

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

---

1.2. 赋值运算符

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

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

运算符	作用
+=	加法赋值
-+	减法赋值
*=	乘法赋值
/=	除法赋值
%=	取余赋值

let a = 10;  
let b = 5;  
  
// 加法赋值运算符 +=   
a += b; // 这行代码等同于 a = a + b; ，所以 a 的值会变成 15  
console.log(a); // 输出：15  
  
// 减法赋值运算符 -=   
a -= b; // 这行代码等同于 a = a - b; ，所以 a 的值会变回 10  
console.log(a); // 输出：10  
  
// 乘法赋值运算符 *=   
a *= b; // 这行代码等同于 a = a * b; ，所以 a 的值会变成 50  
console.log(a); // 输出：50  
  
// 除法赋值运算符 /=   
a /= b; // 这行代码等同于 a = a / b; ，所以 a 的值会变成 10  
console.log(a); // 输出：10  
  
// 取余赋值运算符 %=  
a %= b; // 这行代码等同于 a = a % b; ，所以 a 的值会变成 0  
console.log(a); // 输出：0

---

1.3. 自增/自减运算符

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

1. 自增运算符 (++)：
   这个运算符会将变量值增加1。它有两种使用方式：前缀和后缀。

• 前缀形式：++variable，首先增加变量的值，然后返回增加后的值。
• 后缀形式：variable++，首先返回变量的原始值，然后增加变量的值。

例如：

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

let count2 = 5;
console.log(count2++); // 输出：5，先打印，然后自增
console.log(count2);  // 输出：6，打印自增后的值

1. 自减运算符 (--)：
   这个运算符会将变量值减少1。它也有两种使用方式：前缀和后缀。

• 前缀形式：--variable，首先减少变量的值，然后返回减少后的值。
• 后缀形式：variable--，首先返回变量的原始值，然后减少变量的值。

例如：

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

let count2 = 5;
console.log(count2--); // 输出：5，先打印，然后自减
console.log(count2);  // 输出：4，打印自减后的值

---

1.4. 比较运算符

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

1.4.1. 常见比较运算符

运算符	作用
>	左边是否大于右边
<	左边是否小于右边
>=	左边是否大于或等于右边
<=	左边是否小于或等于右边
==	左右两边值是否相等
!=	左右值不相等

1. 大于（>）运算符：

let result = 10 > 5; // 检查10是否大于5
console.log(result); // 输出：true

1. 小于（<）运算符：

let result = 5 < 10; // 检查5是否小于10
console.log(result); // 输出：true

1. 大于或等于（>=）运算符：

let result = 10 >= 10; // 检查10是否大于或等于10
console.log(result); // 输出：true

1. 小于或等于（<=）运算符：

let result = 5 <= 10; // 检查5是否小于或等于10
console.log(result); // 输出：true

1. 等于（==）运算符：

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

1. 不等于（!=）运算符：

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

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

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

1. !== 运算符

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

例如：

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

1. === 运算符

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

例如：

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

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

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

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

---

1.5. 逻辑运算符

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

1. &&（逻辑与）：当且仅当两个操作数都为 true 时，结果才为 true。如果其中一个操作数为 false，结果就为 false。这就是“一假则假”的原则。

console.log(true && true);  // 输出：true
console.log(true && false); // 输出：false
console.log(false && true); // 输出：false
console.log(false && false); // 输出：false

1. ||（逻辑或）：只要两个操作数中有一个为 true，结果就为 true。只有当两个操作数都为 false 时，结果才为 false。这就是“一真则真”的原则。

console.log(true || true);  // 输出：true
console.log(true || false); // 输出：true
console.log(false || true); // 输出：true
console.log(false || false); // 输出：false

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

console.log(!true);  // 输出：false
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语句：

let number = 10;

if (number > 5) {
  console.log("数字大于5");
}

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

if...else语句：

let number = 10;

if (number > 5) {
  console.log("数字大于5");
} else {
  console.log("数字小于等于5");
}

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

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

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

let number = 3;  
  
if (number === 1) {  
  console.log("数字是1");  
} else if (number === 2) {  
  console.log("数字是2");  
} else if (number === 3) {  
  console.log("数字是3");  
} else {  
  console.log("数字不是1、2或3");  
}

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

2.1.2. 三元运算符

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

示例代码：

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

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

2.1.3. switch语句

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

示例代码：

let dayOfWeek = 2;

switch (dayOfWeek) {
  case 1:
    console.log("星期一");
    break;
  case 2:
    console.log("星期二");
    break;
  default:
    console.log("其他星期");
}

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

---

2.2. 循环语句

2.2.1. while循环

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

let count = 0; // 初始化计数器

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

2.2.2. do...while循环

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

let count = 0; // 初始化计数器

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

2.2.3. for循环

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

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

初始化：let count = 0

循环条件：count < 5

循环增量：count++

---

3. 数组

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

3.1. 创建数组

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

	// 1. 语法，使用 [] 来定义一个空数组
  // 定义一个空数组，然后赋值给变量 classes
  let classes = [];

  // 2. 定义非空数组
  let classes = ['小明', '小刚', '小红', '小丽', '小米']

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

---

3.2. 访问数组和数组索引

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

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

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

---

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

---

3.3. 数组长度

1. 数组长度的获取：
   每个JavaScript数组都有一个length属性，这个属性返回数组的最大索引加一。这意味着它通常返回数组中元素的数量。例如：

var arr = [1, 2, 3, 4, 5];  
console.log(arr.length);  // 输出：5

1. 数组长度的设置：
   length属性不仅是只读的，还可以设置。如果你设置数组的length为一个新的值，数组的长度就会改变。如果新的长度比原来的长度小，那么超出新长度的元素将会被删除。如果新的长度比原来的长度大，那么新的元素将会被添加到数组的末尾，这些新元素的值为undefined。例如：

var arr = [1, 2, 3, 4, 5];  
arr.length = 3;  
console.log(arr);  // 输出：[1, 2, 3]  
  
arr.length = 5;  
console.log(arr);  // 输出：[1, 2, 3, undefined, undefined]

---

3.4. 数组操作

1. push：动态向数组的尾部添加一个元素。

var arr = [1, 2, 3, 4];
arr.push(5);
console.log(arr);  // 输出：[1, 2, 3, 4, 5]

1. unshift：动态向数组的头部添加一个元素。

var arr = [1, 2, 3, 4];
arr.unshift(0);
console.log(arr);  // 输出：[0, 1, 2, 3, 4]

1. pop：删除数组的最后一个元素。

var arr = [1, 2, 3, 4];
var lastElement = arr.pop();
console.log(arr);  // 输出：[1, 2, 3]
console.log(lastElement);  // 输出：4

1. shift：删除数组的第一个元素。

var arr = [1, 2, 3, 4];
var firstElement = arr.shift();
console.log(arr);  // 输出：[2, 3, 4]
console.log(firstElement);  // 输出：1

1. splice：动态删除任意元素。splice方法可以在任何位置删除元素，它接受两个参数，第一个参数是要开始删除的索引，第二个参数是要删除的元素数量。

var arr = [1, 2, 3, 4];
arr.splice(2, 1);  // 从索引2开始，删除1个元素
console.log(arr);  // 输出：[1, 2, 4]