前端学习日志-day18

最新推荐文章于 2025-12-15 06:58:03 发布

原创最新推荐文章于 2025-12-15 06:58:03 发布 · 984 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #学习 #javascript

前端同时被 3 个专栏收录

22 篇文章

订阅专栏

HTML5

22 篇文章

订阅专栏

javascript

8 篇文章

订阅专栏

今日所学总结

一、数组

1. 核心概念

本质：一组可存放任意数据类型元素的集合，集合中的数据称为数组元素。

2. 数组创建

两种常用方式，其中字面量创建更常用：

new 关键字创建：var arr = new Array();
数组字面量 [] 创建：var 数组名 = [];（推荐使用）

3. 元素获取

方式：通过数组下标（索引）获取，语法为 数组名[数组下标];
关键注意点：
- 数组下标从 0 开始计数。
- 若获取未定义的数组元素，结果为 undefined。

4. 数组遍历

定义：依次访问数组中从第一个到最后一个的所有元素。
实现方式：借助 for 循环，利用计数器与数组长度配合遍历，语法如下：

for (var i = 0; i < arr.length; i++) {
    // 循环体中通过 arr[i] 操作当前元素
}

数组长度：通过 数组名.length 获取数组元素的个数；console 输出多个变量时，可用逗号分隔。

5. 元素新增

两种主要方式，需注意避免覆盖或丢失数据：

利用 length 扩展：增大 length 的值可新增元素位置，但未赋值的新增位置元素为 undefined。
直接通过下标添加：数组名[新增元素下标] = 数据;；若下标对应元素已存在，会覆盖原有数据；禁止直接赋值给数组名，否则会丢失原数组所有元素。

二、冒泡排序

1. 核心原理

通过双层 for 循环实现，外层循环控制排序轮次，内层循环控制每轮的元素比较与交换，实现两两对比排序。

2. 循环规则

外层循环（轮次 i）：控制需要排序的轮次，范围是 1 ~ arr.length - 1（因每轮会确定一个最大 / 最小值，最后一个元素无需再比较）。
内层循环（趟数 j）：控制每轮比较的次数，范围是 0 ~ arr.length - i（每轮结束后，末尾已排好序的元素无需再比较）。

3. 基础语法（从小到大排序）

for (var i = 1; i <= arr.length - 1; i++) {
    for (var j = 0; j <= arr.length - i; j++) {
        if (arr[j] > arr[j + 1]) {
            // 交换 arr[j] 和 arr[j + 1] 的值（需实现 swap 逻辑）
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
        }
    }
}

三、函数

1. 核心概念

封装一段可重复执行的代码块，主要用于实现特定功能；函数名通常使用动词命名，增强可读性。

2. 基本使用

分为 “声明函数” 和 “调用函数” 两步：

声明函数：

function 函数名() {
    // 函数体（实现功能的代码）
}

调用函数：通过 函数名(); 触发函数执行，调用是函数执行的必要步骤。

3. 函数参数

参数分为实参和形参，用于实现函数与外部的数据传递：

参数类型	定义位置	作用
实参（实际参数）	调用函数的小括号内（`函数名(实参1, 实参2...)`）	传递给函数的实际数据
形参（形式参数）	声明函数的小括号内（`function 函数名(形参1, 形参2...)`）	接收实参传递的数据，无需额外声明

参数个数匹配规则：
- 形参与实参个数一致：函数正常执行。
- 形参个数 > 实参个数：多余形参值为 undefined，可能导致结果为 NaN。
- 实参个数 > 形参个数：多余实参不参与函数内部的形参传输，不影响函数执行。

4. 函数返回值（`return` 语句）

作用：通过 return 需要返回的值; 将函数内部的结果传递到函数调用处。
关键特性：
- return 只能返回一个值，若需返回多个值，可借助数组（[]）封装。
- return 执行后，其后面的语句不再执行，直接跳出函数。
- 若 return 未指定返回值（或函数无 return），函数默认返回 undefined。

今日练习代码

练习题目

代码展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.写一个算术运算的函数
        function calc(num1, num2, str) {
            switch (str) {
                case '+':
                    return num1 + num2;
                case '-':
                    return num1 - num2;
                case '*':
                    return num1 * num2;
                case '/':
                    return num1 / num2;
                case '%':
                    return num1 % num2;
            }
        }
        // 2.写一个获取任意两个数字的最大值并弹出结果的函数
        function getMax(num1, num2) {
            return num1 > num2 ? num1 : num2;
        }
        // 3.写一个用户输入任意三个不同数字的最大值，并弹出结果
        function getMax2(num1, num2, num3) {
            var max = num1 > num2 ? num1 : num2;
            return num3 > max ? num3 : max;
        }
        // 4.输入一个数判断是否为素数，并反弹出回值(只能被自己和1整除)
        function isPnumber(num) {
            for (var i = 2; i < num; i++) {
                if (num % i == 0) {
                    return true;
                }
            }
            return false;
        }
    </script>
</head>

<body>

</body>

</html>