JavaScript基础（二）

1. JS的流程控制和函数

1.1 JS分支结构

1.1.1 if结构

• JS的if关于真假的判断还和上篇文章所说的一样：0，空字符串，null，undefined 都为假,除此之外都为真。

• if语法的基本结构：

  if(条件1){
      // 条件1为真时执行
  }
  else if(条件2){
      // 条件2为真时执行
  }
  else{
      // 所有条件都不满足时执行
  }

• 代码示例解析：

  let level = 1;
  
  if(level === 1){
      console.log('奖励1500块');  // ✔️ 条件1成立，输出此句
  }
  else if(level === 2){
      console.log('奖励1000块');  // ❌ 条件2不成立
  }
  else{
      console.log('奖励500块');   // ❌ 前两个条件都不成立时执行
  } // 执行的结果是 奖励1500块

• 核心规则：

  • if 可以单独使用。
  • else if 和 else 必须与 if 连用
  • 代码会从上到下检查条件，第一个满足条件的分支会执行，后续分支直接跳过，如果所有条件都不满足，执行 else 分支（如果有）。

1.1.2 switch结构

• switch语法的基本结构：

  switch(表达式){
    case 值1:
      // 当表达式 === 值1 时执行
      break;
    case 值2:
      // 当表达式 === 值2 时执行
      break;
    default:
      // 没有匹配到任何 case 时执行
  }

• 代码示例解析：

  let num = prompt('请输入语音提示服务编号')
  num = Number(num) // 用户输入的信息默认都是字符串类型，所以我们这里将字符串转化为数值型。
  
  //switch穿透问题-必须添加break
  switch(num){
      case 1:
          console.log('话费业务1') // num === 1 时执行
          break // 必须用 break 退出 switch
      case 2:
          console.log('流量业务2') // num === 2 时执行
          break
      case 3:
          console.log('宽带业务3') // num === 3 时执行
          break
      case 4:
          console.log('国际业务4') // num == 4 时执行
          break
      case 5:
          console.log('投诉建议5') // num === 5 时执行
          break
      default: 
          console.log('没有该业务') // num === 6 时执行   
  }

• 核心规则：

  • 严格相等比较：switch 会用 === 比较表达式和 case 的值，要求值和类型都相同。
  • break关键字：每个 case 后必须写 break，否则代码会继续执行下一个 case（称为“贯穿”）。
  • default分支：当所有 case 都不匹配时执行，类似 if-else 中的 else。

• swith与if-else在用法上还是有一定区别的：

• 特性	switch	if-else
  比较方式	严格相等 (===)	任意条件表达式
  适用场景	多固定值匹配	范围判断或复杂条件
  可读性	多分支时更清晰	简单分支时更直接

1.2 JS循环结构

1.2.1while循环

• while基本语法

  while(循环条件){
      // 条件为 true 时重复执行的代码（循环体）
  }

  • 特点：先判断条件，再执行循环体（可能一次都不执行）。

• 代码示例解析

  • 1. 计算 1~100 的累加和

    let i = 1;      // 初始化计数器
    let sum = 0;    // 初始化累加器
    
    while(i <= 100){
        sum += i;   // 累加当前 i 的值
        i++;        // 更新计数器（避免死循环的关键）
    }
    console.log(sum); // 输出：5050

• 逻辑：循环 100 次，每次将 i 的值累加到 sum，最终得到总和。

  • 2. 找出 1~100 中能被 10 整除的数

    let j = 1;
    while(j <= 100){
        if (j % 10 === 0){
            console.log(j + ': 能够被整除');
        }
        j++;
    }

  • 输出：
    10: 能够被整除
20: 能够被整除
    …
    100: 能够被整除

• 核心规则

  • 必须包含循环终止条件
    例如 i++ 或 j++，否则会导致死循环（浏览器卡死）。
  • 循环条件为 true 时执行
    • 若条件始终为 true，循环永不停止（需强制关闭页面）。
    • 示例错误：若忘记写 i++，i 永远小于 100，导致死循环。
  • 支持 break 和 continue
    • break：立即终止整个循环。
    • continue：跳过本次循环，直接进入下一次。

1.2.2 for循环

• for的基本语法

  for(初始化; 循环条件; 迭代操作){
      // 循环体
  }

  • 执行顺序：初始化 → 检查条件 → 执行循环体 → 迭代操作 → 重复检查条件。

• 代码示例解析

  • 1.基础for循环

    // 循环10次，输出1~10
    for(let i=1; i<=10; i++){
        console.log('循环次数:'+i); 
    }
    // 输出：循环次数:1 ~ 循环次数:10

  • 2.猜字谜游戏

    let successData = 'K'; // 正确答案
    for(let j=1; j<=3; j++){
        let data = prompt('请输入字母A-Z（剩余机会:' + (3-j+1) + ')');
        if(data === successData){
            alert('猜对了!');
            break; // 立即终止循环
        }
        else{
            alert('猜错了!');
        }
    }

    • break 作用：匹配成功后直接跳出循环，不再执行后续机会。

• 数组遍历方法

  ​ 接下来我们要提到数组的for循环遍历，所以先来简单介绍一下JS的数组，它与C语言中的数组没有太大区别。

  • 定义：数组（Array）是用于存储 有序元素集合 的数据结构。

  • 特点：

    • 元素可以是任意类型（数字、字符串、对象等）。
    • 索引从 0 开始（第一个元素是 array[0]）。
    • 长度动态可变（无需预先定义大小）。

  • 创建一个数组

    // 方式1：字面量直接创建
    let arr1 = [10, "apple", true]; 
    
    // 方式2：使用构造函数
    let arr2 = new Array(1, 2, 3); 
    
    // 空数组
    let emptyArr = [];

  • 基本操作

    let fruits = ["apple", "banana", "orange"];
    console.log(fruits[0]);
    console.log(fruits[2]);
    
    fruits[1] = "watermelon"; 
    console.log(fruits);
    
    console.log(fruits.length);

    • 访问元素

      let fruits = ["apple", "banana", "orange"];
      console.log(fruits[0]); // 输出："apple"
      console.log(fruits[2]); // 输出："orange"

    • 修改元素

      fruits[1] = "watermelon"; 
      console.log(fruits); // ["apple", "watermelon", "orange"]

    • 获取长度

      console.log(fruits.length); // 3

    在我们简单了解JS中的数组之后，接下来我们来看看JS中数组遍历的方法。

  • 传统for循环

    let array1 = [10,20,30,40,50];
    for(let i=0; i<array1.length; i++){
        console.log(array1[i]); // 输出每个元素
    }

  • for...in 循环（遍历索引）

    for(let index in array1){
        console.log(array1[index]); // 输出索引对应元素
    }

  • for...of 循环（遍历元素）

    for(let item of array1) {
        console.log(item); // 直接输出元素值
    }

  • forEach 高阶函数

    let array2 = ["小明","小红","小王","小李","小赵"]
    array2.forEach(function(item, index){
        console.log(index + "||" + item); 
    });
    // 输出示例：0||小明  1||小红 ...

  • 遍历方式对比

  • 遍历方式	特点	适用场景
    for	精确控制索引，可修改原数组	需要索引操作的遍历
    for...in	遍历索引（含继承属性，需谨慎）	对象属性遍历更常见
    for...of	直接获取元素，简洁高效	仅需元素值的数组遍历
    forEach	函数式编程风格，不可中断	简单遍历且无需中断时

1.3 JS函数

1.3.1 内置函数

• 在JS中可以不需要对象调用,可以直接使用的函数

• 常见分类

• 1. 弹框类函数

  • alert()

    • 作用：弹出警告框，显示指定消息，需用户手动关闭。

    • 特点：阻塞后续代码执行，直到用户点击“确定”。

      alert('我是弹出框');

  • confirm()

    • 作用：弹出确认框，显示消息并提供“确定”和“取消”选项。

    • 返回值：用户点击“确定”返回 true，点击“取消”返回 false。

    • 使用场景：常用于删除、退出等操作的二次确认。

      let flag = confirm('你确定删除数据吗?');
      console.log(flag); // 输出 true 或 false

• 2. 控制台输出

  • console.log()

    • 作用：在浏览器控制台输出信息，用于调试。

      console.log("123132123123"); // 控制台显示字符串
      console.log(date); // 输出变量值（如日期对象）

• 3. 时间处理

  • Date对象

    • 作用：创建日期对象，用于获取或操作时间。

    • 初始化：new Date()获取当前时间。

      let date = new Date();
      console.log(date); // 输出：Thu Jun 06 2024 12:34:56 GMT+0800

• 4. 全局对象

  • this关键字

  • 全局作用域中：指向全局对象。

    print(); // 等同于 window.print()

• 5. 页面打印

  • print()

    • 作用：调起浏览器打印对话框，打印当前页面内容。

    • 注意：部分浏览器可能限制自动调用。

      print(); // 等同于 window.print()

• 6. 其他注意事项

  • 内置函数与宿主环境
    • alert(), confirm(), print() 属于 BOM（浏览器对象模型），由浏览器提供，非 ECMAScript 标准。
    • Date, console 是 JavaScript 内置对象/方法。
  • 代码执行顺序
    • alert() 和 confirm() 会阻塞后续代码，直到用户响应。

1.3.2 function()函数（自定义函数）

• 函数语法：

  function 函数名(参数列表) {函数体}

• 函数说明：

  • 声明函数时需要用function关键字。
  • 参数列表中，无需数据类型。
  • 调用函数时，实参和形参的个数可以不一致。
  • 不用声明函数的返回值类型，需要返回在函数体中直接return即可，也无需void关键字。

• 函数定义与分类

  • 1. 无参无返回值函数

    • 特点：不接收参数，不返回数据，直接执行操作（如页面输出）。

      function sum(){
          let a = 100, b = 20;
          let sum = a + b;
          document.write("计算结果:" + sum); // 直接输出到页面
      }

    • 调用方式：onclick="sum()"（实参按顺序传递）。

  • 2. 有参无返回值函数

    • 特点：接收参数（形参），完成操作但不返回数据。

    • 参数规则：形参顺序决定实参赋值，与名称无关。

      function sum2(num1, num2){
          let sum = num1 + num2;
          document.write("计算结果:" + sum);
      }

    • 调用方式：onclick="sum2(100, 66)"（实参按顺序传递）。

  • 3. 有参有返回值函数

    • 特点：接收参数并通过 return 返回结果，供其他代码使用。

      function appendMessage(id, name, age, gender){
          return id + "|" + name + "|" + age + "|" + gender; // 返回拼接的字符串
      }

    • 调用方式：在另一个函数中获取返回值：

      function sum3(){
          let message = appendMessage(100, '赵云', 30, '男'); // 调用并接收返回值
          document.write(message);
      }

  • 4. 匿名函数

    • 特点：没有函数名，可直接赋值给变量或作为参数传递。

    • 常见用途：事件处理、立即执行函数、回调函数。

      // 1. 赋值给变量
      let multiply = function(a, b) {
          return a * b;
      };
      console.log(multiply(3, 4)); // 输出 12
      
      // 2. 作为按钮点击事件处理函数
      const btn = document.querySelector('button');
      btn.onclick = function() {
          alert('按钮被点击了！');
      };
      
      // 3. 立即执行函数 (IIFE)
      (function() {
          document.write("页面加载时自动执行");
      })();

• 参数与返回值

  • 形参与实参

    • 形参：函数定义时声明的变量（如 num1, num2），用于接收外部传入的值。
    • 实参：调用函数时传递的具体值（如 sum2(100, 66) 中的 100 和 66）。
    • 规则：实参按顺序赋值给形参，数量需匹配。

  • 返回值

    • return 关键字：将函数内部计算结果传递给调用者。

    • 无返回值：函数默认返回 undefined。

      let result = appendMessage(...); // 接收返回值并存储到变量

• 函数调用与嵌套

  • 函数间调用

    • 一个函数内部可以调用其他函数，传递参数并处理返回值。

      function sum3(){
          let message = appendMessage(100, '赵云', 30, '男'); 
          document.write(message); // 输出拼接后的字符串
      }

  • 事件触发调用

    • 通过 HTML 事件（如 onclick）直接调用函数。

      <button onclick="sum3()">有参数-有返回值的计算</button>