JavaScript-day04

最新推荐文章于 2025-08-05 15:28:01 发布
最新推荐文章于 2025-08-05 15:28:01 发布
阅读量424 收藏 1
点赞数 9
CC 4.0 BY-SA版权
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2201_75449897/article/details/140558427

目录

01-数组的创建

02-数组包含的属性

03-数组的访问和修改

04-数组遍历

05-多维数组

06-最值

07-栈方法和队列方法

08-检索方法

09-数组转字符串

10-其他

11-冒泡排序

01-数组的创建

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

<head>
    <meta charset="UTF-8">
    <title>03-JavaScript</title>
    <style>

    </style>
</head>

<body>
    <script>
        // 数组的创建
        // 数组的创建1 依然需要使用var关键字 来创建
        var arr = ['a', 'b', 'c', 'd', 'e'];
        console.log(arr);


        // 创建一个学生信息的数组
        // 对于数组来说，可以添加任意的数据类型
        var students = ["张三", 28, true, "🚹", 145];
        console.log(students);


        var arr1 = [];
        // 空数组
        console.log(typeof students);
        // object  复杂数据类型


        // 数组的创建2
        // 通过 new Array()  来创建数组  通过构造函数来创建
        // console.dir(Array);
        var arr2 = new Array();
        console.log(arr2);
        // var students = ["张三", 28, true, "🚹", 145];
        var students2 = new Array("张三", 28, true, "🚹", 145);
        console.log(students2);



        // 直接量创建的数组可以在中间添加空值
        var arr3 = [1, 2, , , 5, 6];
        // 构造函数创建的数组不可以添加空值  会直接报语法错误
        // var arr4 = new Array(1, 2, , , 5, 6);

        console.log(arr3);
        // console.log(arr4);
    </script>
</body>

</html>

02-数组包含的属性

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

<head>
    <meta charset="UTF-8">
    <title>03-JavaScript</title>
    <style>

    </style>
</head>

<body>
    <script>
        1. 数组的索引下标 从0开始
        var arr = [1, 2, 3, 'a', 'b'];
          0  1  2  3  4
        console.log(arr);

        2.长度 数组的值的个数
        console.log(arr.length);

        长度 和 下标    长度-1 = 下标的最大值

        // 只要是数组 就一定会有长度 
        var arr1 = [1, 2, , , 5, 6];
        console.log(arr1);
        console.log(arr1.length);

        var arr2 = [];
        console.log(arr2);
        console.log(arr2.length);


        数组长度 可以修改的  、
        如果改后大于原本长度 会增加相对应的空 
        如果小于原本长度 会删除多余的值
        var arr = [1, 2, 3, 'a', 'b'];
        console.log(arr);
        console.log(arr.length);
        arr.length = 10;
        console.log(arr);
        console.log(arr.length);
        arr.length = 2;
        console.log(arr);
        console.log(arr.length);
    </script>
</body>

</html>

03-数组的访问和修改

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

<head>
    <meta charset="UTF-8">
    <title>03-JavaScript</title>
    <style>

    </style>
</head>

<body>
    <script>
        var arr1 = [1, 2, 3];
        console.log(arr1);
        数组的访问 
        通过索引下标 来访问数组中的元素
        数组名称[索引下标]
        var arr = ['liubang', 'wangwu', 'zhaoliu'];
        console.log(arr[0]);
        console.log(arr[1]);
        console.log(arr[2 - 1]);
        console.log(arr[2 + 1]); // undefined
        console.log(arr[-1]); //undefined

        数组的修改
        通过索引下标 来修改数组中的元素
        数组名称[索引下标] = 新值
        arr[2] = "liubang";
        // arr[6] = "张飞";
        arr[-3] = "张小飞飞飞飞";
        arr[-1] = "张小飞";
        arr[-2] = "张小飞飞";
        arr[2.5] = "张小飞飞飞";
        arr[1.5] = "张小飞飞飞飞飞";

        console.log(arr);

        数组长度 只计算正整数
        var arr3 = [];
        arr3[-1] = "o((>ω< ))o";
        arr3[2.5] = "(￢︿̫̿￢☆)";
        
        数组的长度仍为0
        console.log(arr3);
        console.log(arr3[-1]);
        console.log(arr3[2.5]);
    </script>
</body>

</html>

04-数组遍历

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

<head>
    <meta charset="UTF-8">
    <title>03-JavaScript</title>
    <style>

    </style>
</head>

<body>
    <script>
        var arr = ['刘邦', '张良', '韩信', '萧何', '刘备', '韩信', '萧何'];

        // console.log(arr[0]);
        // console.log(arr[1]);
        // console.log(arr[2]);
        // console.log(arr[3]);
        // console.log(arr[4]);
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }
    </script>
</body>

</html>

05-多维数组

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

<head>
    <meta charset="UTF-8">
    <title>03-JavaScript</title>
    <style>

    </style>
</head>

<body>
    <script>
        // 当访二维数组时，先访问第一个，再访问第二个
        var arr = [
            [1, 2, 3],
            ["a", "b", "c"]
        ];
        // console.log(arr[0][0]);
        // console.log(arr[0][1]);
        // console.log(arr[0][2]);
        // console.log(arr[1][0]);
        // console.log(arr[1][1]);
        // console.log(arr[1][2]);

        for (var i = 0; i < arr.length; i++) {
            for (var j = 0; j < arr[i].length; j++) {
                console.log(arr[i][j]);
            }
        }


        // var arr = [
        //     [1, [9, 5, 4], 3],
        //     ["a", "b", "c"]
        // ];
        // console.log(arr[0][1][0]);//多维数组
    </script>
</body>

</html>

06-最值

<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>03-JavaScript</title>
    <style>

    </style>
</head>

<body>
    <script>
        var arr = [11, 52, 73, 44, 15];
        // 求最值的方法
        var max = arr[0];
        var min = arr[0];
        for (var i = 0; i < arr.length; i++) {
            if (max < arr[i]) {
                max = arr[i];
            }

            if (min > arr[i]) {
                min = arr[i];
            }
        }

        console.log(max);
        console.log(min);
    </script>
</body>

</html>

07-栈方法和队列方法

<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>03-JavaScript</title>
    <style>

    </style>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 5];
        // 1. 方法的参数   2.方法的返回值  3.  是否改变原本的数组
        // push
        // 添加元素  在元素的末尾的位置添加  
        // 需要几个就可以添加几个
        // 参数 需要添加的元素  可以写多个 
        // 之间使用逗号分隔
        // 返回值  会返回一个添加完之后的数组的长度
        // 会改变原本的数组
        arr.push('溜溜溜', '嘁嘁嘁', '叭叭叭');
        // console.log(arr.push('溜溜溜', '嘁嘁嘁', '叭叭叭'));
        console.log(arr);

        // pop
        // 删除元素  删除末尾位置的一个元素
        // 参数  不需要参数
        // 返回值 返回删除的元素
        // 会改变原本的数组
        arr.pop();
        // console.log(arr.pop());
        console.log(arr);

        // unshift
        // 添加元素  在元素的头部的位置添加  
        // 需要几个就可以添加几个
        // 参数 需要添加的元素  可以写多个 
        // 之间使用逗号分隔
        // 返回值  会返回一个添加完之后的数组的长度
        // 会改变原本的数组
        arr.unshift('咯咯咯');
        // console.log(arr.unshift('咯咯咯'));
        console.log(arr);

        // shift
        // 删除元素  删除头部的位置的一个元素
        // 参数  不需要参数
        // 返回值 返回删除的元素
        // 会改变原本的数组
        arr.shift();
        // console.log(arr.shift());
        console.log(arr);


        // 栈方法  先进后出
        // 队列方法 先进先出
    </script>
</body>

</html>

08-检索方法

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

<head>
    <meta charset="UTF-8">
    <title>03-JavaScript</title>
    <style>

    </style>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 1];
        // includes
        // 用于 查找 是否包含某个元素 返回 布尔值  采用的是全等于
        // 参数  1.需要查找的元素   2.从哪个位置开始查找 索引下标 
        // 如果超过最大的索引下标那么不会在检索了  -1 表示 为最后一个元素
        // 如果 arr.length + 查询的开始位置的数字   为 负数 那么就会从头开始检索
        // 返回值 布尔值 是否找到的结果
        // 不会改变原本的数组
        console.log(arr.includes(9)); // false 没有找到 
        console.log(arr.includes(1, -99)); // true 找到了
        console.log(arr.includes('1')); //false 没有找到

        // indexOf
        // 用于 查找 是否包含某个元素 返回 索引下标  第一次出现的位置 采用的是全等于
        // 参数  需要查找的元素  2从哪个位置开始查找 索引下标 
        // 如果超过最大的索引下标那么不会在检索了  -1 表示 为最后一个元素
        // 返回值 索引下标  没有找到返回 -1
        // 不会改变原本的数组
        // console.log(arr.indexOf(99)); // -1 没有找到
        console.log(arr.indexOf(1, 1));
    </script>
</body>

</html>

09-数组转字符串

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

<head>
    <meta charset="UTF-8">
    <title>03-JavaScript</title>
    <style>

    </style>
</head>

<body>
    <script>
        var arr = ['a', 'b', 'c'];
        // join 数组转字符串  将数组里面的每一个元素分别拿出来 拼接到一个字符串中
        // 参数 每一个元素的分隔符
        // 返回值  返回由内容组成的字符串
        // 不会改变原数组
        // arr.join('+');
        // var str = arr.join('+');
        console.log(arr.join('❤'));

        // toString 
        // 参数 没有参数 
        // 返回值  返回由内容组成的字符串 中间使用逗号分隔
        // 不改变原数组
        console.log(arr.toString('❤'));//参数无效
    </script>
</body>

</html>

10-其他

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

<head>
    <meta charset="UTF-8">
    <title>03-JavaScript</title>
    <style>

    </style>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        var arr1 = 3;
        isArray
        判断传入的是否是一个数组  和isNaN 一样
        参数 就是需要检测的变量
        返回值  布尔值 是否是一个数组
        不改变原数组
        console.log(Array.isArray(arr1));


        splice  增  删  改
        参数 参数1 需要增加 删除 修改的起始位置（必须的） 会到哪个地方
        参数2 需要删除的个数（可选）  
        参数3 增加的元素（可选）
        返回值  被修改的内容
        改变原数组

        增
        arr.splice(2, 0, "你好");
        console.log(arr);

        删
        arr.splice(1, 2);
        console.log(arr);

        改
        arr.splice(2, 3, "三", "四", "五");
        console.log(arr.splice(2, 3, "三", "四", "五"));
        console.log(arr);



        slice  截取数组
        参数1 起始位置  参数2 结束位置 (不包含结束位置)
        如果参数只有开始 没有结束 那么会从开始一直到最后
        如果参数只有一个0  那么会原封不动的把数组打印一遍
        返回值  截取出来的数组
        不会改变原数组
        var arr2 = [1, 2, 3, 4, 5];
        console.log(arr2.slice(1, 3));
        console.log(arr2.slice(1));
        console.log(arr2.slice(0));
        console.log(arr2.slice(1, -2));
        arr2.slice(1, 4);
        console.log(arr2);


        reverse  颠倒数组 
        参数  不需要
        返回值 颠倒之后的数组
        改变原数组
        var arr3 = [1, 2, 3, 4, 5];
        arr3.reverse();
        console.log(arr3.reverse());
        console.log(arr3);

        concat 合并多个数组 
         将参数里面的数组合并到当前数组中
        返回合并之后的数组
        不会改变原数组
        var arr6 = ['a', 'b'];
        var arr7 = [1, 2, 3];
        console.log(arr7.concat(arr6));
        console.log(arr7);
        console.log(arr6);
    </script>
</body>

</html>

11-冒泡排序

html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>03-JavaScript</title>
    <style>

    </style>
</head>

<body>
    <script>
        // 冒泡排序  相邻的两两比较大小  
        // 比较完之后 直接交换位置
        var arr = [99, 5, 12, 6, 10, 100, 87, 34, 10, 2, 5, 27, 98, 31, 23];

        for (var j = 0; j < arr.length - 1; j++) {
            // 控制需要比较的大轮次
            for (var i = 0; i < arr.length - j - 1; i++) {
                // 控制每一次参与比较的元素
                if (arr[i] > arr[i + 1]) {
                    // 比较 之后交换位置
                    var temp = arr[i];
                    arr[i] = arr[i + 1];
                    arr[i + 1] = temp;
                    // 解构交换
                }
            }
        }

        console.log(arr);
    </script>
</body>

</html>

2201_75449897
关注
30-day-of-javascript-day-1
03-04
【标题】"30-day-of-javascript-day-1" 是一个关于JavaScript编程的学习计划，旨在帮助初学者在30天内逐步掌握JavaScript的基础知识。这个计划的第一天通常会涵盖JavaScript的入门概念，为后续的学习打下坚实的基础...
javascript-day1-if2-Kevin-CodeCrew:GitHub Classroom创建的javascript-day1-if2-Kevin-CodeCrew
04-27
JavaScript_Day1_If2 为每个练习创建一个新文件 练习10 向用户询问3张卡片。 如果总和等于21，则打印黑杰克！ 如果总和大于21，则打印BUST！ 如果总和小于21，则打印“总计为[TOTAL]” 练习11 要求用户输入他们的...
JavaScript-day03
2201_75449897的博客
07-19 322
【代码】JavaScript-day03。
【JavaScript-Day 49】告别混乱：一文彻底搞懂 JavaScript ES6 模块化（export/import）
吴师兄大模型的博客
06-27 794
在早期，开发者们不得不想出各种“招数”（如命名空间模式、IIFE）来避免全局变量污染和依赖关系混乱的问题。幸运的是，自 ES6 (ECMAScript 2015) 起，JavaScript 终于在语言层面拥有了官方的模块化解决方案——ES6 Modules。它提供了一种优雅、简洁且强大的方式来组织代码，使得代码的复用、依赖管理和维护性都得到了质的飞跃。本文将带你从“为什么需要模块化”开始，深入剖析 ES6 模块的核心语法 `export` 和 `import`，并最终教你如何在实际项目中应用它。
【JavaScript-Day 38】JS操控网页外观：从innerHTML到classList的全方位指南
吴师兄大模型的博客
06-11 712
我们希望网页能响应用户的操作，实时更新内容，改变外观，创造出丰富的交互体验。 今天，我们将化身为一名“网页化妆师”，学习如何使用 JavaScript **修改元素的内容、属性和样式**。这些是构建动态网页、实现用户交互的核心技能。准备好了吗？让我们开始为网页“梳妆打扮”吧！
【JavaScript-Day 48】告别 Ajax，拥抱现代网络请求：Fetch API 完全指南
吴师兄大模型的博客
06-24 949
今天，我们将隆重介绍现代 Web 的标准网络请求工具——`Fetch API`。它是一个基于 Promise 的强大接口，能够让我们以更简洁、更直观、更强大的方式发送网络请求和处理响应。本文将带你从零开始，全面掌握 `Fetch API` 的使用，无论是获取数据（GET）还是提交数据（POST），你都能轻松应对。
【JavaScript-Day 42】深入解析事件冒泡与捕获：掌握事件委托的精髓
吴师兄大模型的博客
06-15 1002
在前两篇文章中，我们学习了如何使用 `addEventListener` 监听用户操作，并了解了各种常见的网页事件。然而，当你在一个元素上触发一个事件（比如点击）时，事情真的就这么简单地结束了吗？实际上，这个事件会在 DOM 树中进行一次“旅行”。这次旅行的路径和规则，就是我们今天要探讨的核心——**事件流（Event Flow）**。理解事件流不仅是深入掌握 JavaScript 事件机制的关键，更是通往高效编程模式——**事件委托（Event Delegation）** 的必经之路。
【JavaScript-Day 24】从零到一，精通 JavaScript 对象：创建、访问与操作
吴师兄大模型的博客
05-27 3570
本文是JavaScript系列教程的第24篇，重点讲解JavaScript对象的核心概念与操作。对象作为JavaScript最重要的数据结构之一，采用键值对形式存储数据，具有创建方式多样、属性访问灵活等特点。文章系统介绍了三种创建对象的方法（对象字面量、new Object和构造函数），详细解析了点号与方括号两种属性访问方式，并通过代码示例演示了对象属性的增删改查操作。掌握这些基础知识是学习JavaScript面向对象编程的关键。
52-【JavaScript-Day 52】告别“野路子”代码：ESLint、Prettier与Web安全入门
吴师兄大模型的博客
07-02 670
本篇文章将是你的“代码修行”指南，我们将一起探讨如何将代码从“能跑”的阶段，提升到“优雅”的境界。我们将聚焦于四个核心方面：代码可读性、自动化工具、性能优化和基础安全意识。掌握这些“软技能”，将使你的代码质量和个人竞争力发生质的飞跃。
【JavaScript-Day 40】响应用户操作：事件监听与处理从入门到精通
吴师兄大模型的博客
06-13 873
在此之前的文章中，我们已经学会了如何使用 DOM API 来查找和修改页面元素。但一个静态的网页远非我们学习 JavaScript 的终点。真正的魔力在于让页面“活”起来，响应用户的每一次点击、每一次键盘敲击、每一次鼠标移动。而实现这一切的核心技术，就是**事件处理 (Event Handling)**。
【JavaScript-Day 45】异步编程救星：深入解析 Promise 的状态、创建与链式调用
吴师兄大模型的博客
06-20 913
在上一篇文章中，我们探讨了使用回调函数处理异步操作，并直面了它最大的痛点——“回调地狱”（Callback Hell）。当业务逻辑变得复杂，层层嵌套的回调函数会让代码可读性和可维护性急剧下降。为了解决这一难题，ECMAScript 6 (ES6) 引入了一个强大的异步编程解决方案——`Promise`。本篇文章将带你深入 `Promise` 的世界，学习如何使用它来编写更优雅、更健壮的异步代码，彻底告别回调地狱。
高级软件人才培训专家-day02-JavaScript-Vue
03-10
### 高级软件人才培训专家-day02-JavaScript-Vue #### 一、JavaScript简介 **JavaScript** 是一种广泛使用的脚本语言，用于增强网页的互动性。它由 Netscape 的 Brendan Eich 于 1995 年创建，并在同年被 Netscape...
学习JavaScript-day-01.md
06-08
​ +号，有两层意思，第一层算数之间的加法；第二层字符串的连接；执行过程中，先检测加号两边的数据类型，如果发现字符型，那就先生效字符的连接 ​ 规则：只要+号两遍出现一个字符，那么结果必然是字符；...
react-day-picker：React的轻量级日期选择器组件
02-03
npm install react-day-picker import DayPicker from " react-day-picker " ; import " react-day-picker/lib/style.css " ; export default function Hello () { return ; } 文献资料 在卡住？ v8即将到来！ 下...
Next.js 简介：它是什么，为什么重要？
zimin的专栏
08-01 1131
Next.js 是一个基于 React 的全栈框架，旨在帮助开发者构建高性能、可扩展的 Web 应用。它由 Vercel 开发并维护，是一个开源项目，最初于 2016 年 10 月 25 日在 GitHub 上发布。Next.js 为 React 组件提供了额外的功能和优化，使开发者能够专注于产品的构建和快速交付，而无需手动配置底层工具（如 Webpack、Babel）。它的核心特点包括： 服务器端渲染（SSR）：在服务器上渲染页面，提高首屏加载速度和搜索引擎优化（SEO）表现。 静态站点生成（SSG）：
vue3入门-概览讲解
曹定栓的博客
08-04 627
本文介绍了Vue3项目创建和基本结构，重点对比了Vue2选项式API和Vue3组合式API的差异。Vue3使用Vite作为构建工具，相比Webpack具有更快的启动和热更新速度。文章通过一个显示div和切换背景色的示例，展示了组合式API将相关逻辑集中管理的优势，并介绍了如何通过模块化拆分setup函数来提高可维护性。最后指出选项式API适合简单场景，而组合式API更适合复杂逻辑复用和TypeScript项目。
electron-多线程
在全栈和前端徘徊的程序员
08-03 629
基于 Chromium 多进程架构：每个渲染器运行在独立的进程中，避免单个页面的崩溃影响整个应用Node.js 多线程能力：通过 worker_threads 模块实现真正的多线程执行：在渲染进程中使用浏览器标准的 Web Workers APIIPC 通信机制：通过消息传递在不同进程/线程间交换数据资源共享与隔离：各进程拥有独立的内存空间，通过 IPC 实现数据共享。
ElementUI常用的组件展示
2302_78879607的博客
08-03 430
有时也会嵌套抽屉使用，例如： 一般都加在第一列：找到展示表格数据的部分加进去即可，一般要考虑获得选中的内容 @selection-change=“handleSelectionChange”，当selection-change触发时（复选框发生改变），就会调用后面的函数
Nodejs》》Express
最新发布
u013400314的博客
08-05 57
npm i express -g -D
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值