当前位置：首页 > news >正文

前端JavaScript入门到精通，javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS基础（三）

news 2025/8/29 21:43:07

允许一切发生，生活不过是见招拆招。

思维导图

一、循环-for

1.1 for 循环-基本使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 利用for循环输出三句话 月薪过万for (let i = 1; i <= 3; i++) {document.write('月薪过万<br>')}// 课堂练习： 输出10句月薪过万，并说出for循环的执行过程</script>
</body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 1. 输出1~100岁// for (let i = 1; i <= 100; i++) {//   document.write(`今年我${i}岁了 <br>`)// }// 2. 求1~100之间的偶数和// let sum = 0// for (let i = 1; i <= 100; i++) {//   if (i % 2 === 0) {//     // 把i加到sum里面去//     // sum = sum + i//     sum += i//   }// }// document.write(`1~100之间的偶数和是: ${sum}`)// 3. 页面打印5个小星星// for (let i = 1; i <= 5; i++) {//   document.write('★')// }// 4. 打印数组let arr = ['刘德华', '刘晓强', '刘晓庆', '刘若英', '刘热巴', 'pink老师']// console.log(arr[0])// console.log(arr[1])// console.log(arr[2])// console.log(arr[3])// i <= 4    长度 - 1// for (let i = 0; i <= arr.length - 1; i++) {//   console.log(arr[i])// }// 必须从0开始，因为数组索引号从0开始  arr.length = 6// 遍历数组 ：  从第一个循环到最后一个for (let i = 0; i < arr.length; i++) {console.log(arr[i])}let arr1 = []console.log(arr1)console.log(arr1[0]) // undefinedconsole.log(arr1[1]) // undefined</script>
</body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// for (let i = 1; i <= 5; i++) {//   if (i === 3) {//     continue  // 退出本次循环，本次循环中 continue下面的语句不在执行//   }//   console.log(i)//   document.write(i)// }// for (let i = 1; i <= 5; i++) {//   if (i === 3) {//     break  // 退出整个循环 结束循环//   }//   console.log(i)//   document.write(i)// }// 无限循环for (; ;) {console.log(11)}</script>
</body></html>

1.2 for 循环嵌套

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 外层循环打印 第 n 天for (let i = 1; i <= 3; i++) {document.write(`第${i}天<br>`)// 里层循环打印 第几个单词for (let j = 1; j <= 5; j++) {document.write(`记住了第${j}个单词<br>`)}}</script>
</body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// // 外层循环打印行数// for (let i = 1; i <= 5; i++) {//   // 里层循环打印几个星星//   for (let j = 1; j <= 5; j++) {//     document.write('☆')//   }//   // 进行换行显示//   document.write('<br>')// }let row = +prompt('请输入行数:')let col = +prompt('请输入列数:')// 外层循环打印行数for (let i = 1; i <= row; i++) {// 里层循环打印几个星星for (let j = 1; j <= col; j++) {document.write('☆')}// 进行换行显示document.write('<br>')}</script>
</body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 1. 外层循环控制行数for (let i = 1; i <= 5; i++) {// 2. 里层循环控制列数（几个星星）for (let j = 1; j <= i; j++) {document.write('◆')}// 换行document.write('<br>')}</script>
</body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span {display: inline-block;width: 100px;padding: 5px 10px;border: 1px solid pink;margin: 2px;border-radius: 5px;box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);background-color: rgba(255, 192, 203, .1);text-align: center;color: hotpink;}</style>
</head><body><script>// 1. 外层循环控制行数for (let i = 1; i <= 9; i++) {// 2. 里层循环控制列数for (let j = 1; j <= i; j++) {document.write(`<span>${j} X ${i} = ${i * j}</span>`)}// 换行document.write('<br>')}</script>
</body></html>

二、数组

2.1 数组是什么

2.2 数组的基本使用

2.2.4. 遍历数组(重点)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>let arr = [2, 6, 1, 7, 4]// 1. 求和的变量 sumlet sum = 0// 2.遍历累加for (let i = 0; i < arr.length; i++) {// console.log(arr[i])// sum = sum + arr[i]sum += arr[i]}console.log(`数组的和的结果是: ${sum}`)// 3. 平均值  和 / arr.length  = 4console.log(`数组的平均值结果是: ${sum / arr.length}`)// sum = sum + arr[0]// console.log(sum) </script>
</body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>let arr = [2, 6, 1, 7, 400, 55, 88, 100]// max里面要存的是最大值let max = arr[0]// min 要存放的是最小值let min = arr[0]// 遍历数组for (let i = 1; i < arr.length; i++) {// 如果max 比 数组元素里面的值小，我们就需要把这元素赋值给 max// if (max < arr[i]) max = arr[i]max < arr[i] ? max = arr[i] : max// 如果min 比 数组元素大， 我们就需要把数组元素给min// if (min > arr[i]) {//   min = arr[i]// }min > arr[i] ? min = arr[i] : min}// 输出 maxconsole.log(`最大值是: ${max}`)console.log(`最小值是: ${min}`)</script>
</body></html>

2.3 操作数组

改

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// let arr = []// console.log(arr)// // console.log(arr[0])  // undefined// arr[0] = 1// arr[1] = 5// console.log(arr)let arr = ['pink', 'red', 'green']// 修改// arr[0] = 'hotpink'// console.log(arr)// 给所有的数组元素后面加个老师  修改for (let i = 0; i < arr.length; i++) {// console.log(arr[i])arr[i] = arr[i] + '老师'}console.log(arr)</script>
</body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 重点案例let arr = [2, 0, 6, 1, 77, 9, 54, 3, 78, 7]// 1. 声明新的空的数组let newArr = []// 2. 遍历旧数组for (let i = 0; i < arr.length; i++) {if (arr[i] >= 10) {// 3. 满足条件 追加给新的数组newArr.push(arr[i])}}// 4. 输出新的数组console.log(newArr)</script>
</body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]// 1. 声明一个新的数组let newArr = []// 2. 遍历筛选for (let i = 0; i < arr.length; i++) {if (arr[i] !== 0) {newArr.push(arr[i])}}// 输出新数组console.log(newArr)</script>
</body></html>

三、综合案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {display: flex;width: 700px;height: 300px;border-left: 1px solid pink;border-bottom: 1px solid pink;margin: 50px auto;justify-content: space-around;align-items: flex-end;text-align: center;}.box>div {display: flex;width: 50px;background-color: pink;flex-direction: column;justify-content: space-between;}.box div span {margin-top: -20px;}.box div h4 {margin-bottom: -35px;width: 70px;margin-left: -10px;}</style>
</head><body><script>// 1. 四次弹框效果// 声明一个新的数组let arr = []for (let i = 1; i <= 4; i++) {// let num = prompt(`请输入第${i}季度的数据:`)// arr.push(num)arr.push(prompt(`请输入第${i}季度的数据:`))// push记得加小括号，不是等号赋值的形式}// console.log(arr)  ['123','135','345','234']// 盒子开头document.write(` <div class="box">`)// 盒子中间 利用循环的形式  跟数组有关系for (let i = 0; i < arr.length; i++) {document.write(`<div style="height: ${arr[i]}px;"><span>${arr[i]}</span><h4>第${i + 1}季度</h4></div>          `)}// 盒子结尾document.write(` </div>`)</script>
</body></html>

冒泡排序

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// let arr = [5, 4, 3, 2, 1]let arr = [2, 4, 3, 5, 1]// for (let i = 0; i < arr.length - 1; i++) {//   for (let j = 0; j < arr.length - i - 1; j++) {//     // 开始交换 但是前提 第一个数大于第二个数才交换//     if (arr[j] > arr[j + 1]) {//       // 交换2个变量//       let temp = arr[j]//       arr[j] = arr[j + 1]//       arr[j + 1] = temp//     }//   }// }// arr.sort()  // 排序// sort 升序排列// arr.sort(function (a, b) {//   return a - b// })// sort() 降序arr.sort(function (a, b) {return b - a})console.log(arr)// let num1 = 10// let num2 = 20// let temp = num1// num1 = num2// num2 = temp </script>
</body></html>

前端JavaScript入门到精通，javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS基础（三）

允许一切发生，生活不过是见招拆招。思维导图一、循环-for 1.1 for 循环-基本使用 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEe…...

编程日记 2023/9/23 10:44:55

搭建部署属于自己的基于gpt3.5的大语言模型（基于flask+html+css+js+mysql实现）

一、简介本项目是一个基于GPT-3.5模型的聊天机器人网站，旨在为用户提供一个简便、直接的方式来体验和利用GPT-3.5模型的强大功能。项目以Flask为基础，构建了一个完整的Web应用程序，其中包含了多个前端页面和后端API接口，能够处理…...

编程日记 2023/9/23 10:43:54

AI创作专家，免费的AI创作专家工具

AI创作专家是一种崭新的工具，它们利用先进的人工智能技术，帮助创作者和写手更轻松地应对创作挑战。这些工具不仅可以生成文字，还可以提供灵感、帮助构思和组织思路，使创作过程更加高效。 147GPT批量文章生成工具www.147seo.com/…...

编程日记 2023/9/23 10:41:50

Nginx之gzip模块解读

目录 gzip基本介绍 gzip工作原理 Nginx中的gzip 不建议开启Nginx中的gzip场景 gzip基本介绍 gzip是GNUzip的缩写，最早用于UNIX系统的文件压缩。HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术，web服务器和客户端（浏览器&…...

编程日记 2023/9/23 10:38:47

微软在Windows 11推出Copilot，将DALL-E 3集成在Bing！

美东时间9月21日，微软在美国纽约曼哈顿举办产品发布会，生成式AI成为重要主题之一。微软表示，Copilot将于9月26日在Windows 11中推出；Microsoft 365 Copilot 将于11 月1日向企业客户全面推出；将OpenAI最新的文本生成图…...

编程日记 2023/9/23 10:34:42

思科路由器：NAT的基础配置

一直以来，对于华为、H3C、锐捷交换机的命令配置，不断的有朋友留言，三家交换机的配置命令容易弄混，经常在实际项目配置中出错，因此，找几个基础的示例来练练。 R1配置 Router>en Router>enable Rout…...

编程日记 2023/9/23 10:27:35

动态代理。

无侵入式的给代码增加额外的功能代理的作用：对象如果干的事情太繁琐，就可以通过代理来转移部分职责；也就是相当于把对象的的方法拆开一些步骤分给代理做，对象做关键的就行了；并且代理做的这些繁琐的事情的名字也要和…...

编程日记 2023/9/23 10:24:33

Learn Prompt-GPT-4:能力

GPT-4能力大赏常识知识推理一个猎人向南走了一英里，向东走了一英里，向北走了一英里，最后回到了起点。他看到了一只熊，于是开枪打了它。这只熊是什么颜色的？ 答案是白色，因为这种情况只可能发生在北…...

编程日记 2023/9/23 10:21:30

iOS——ViewController的生命周期

ViewController ViewController的生命周期是指在应用程序运行过程中，ViewController实例从创建到销毁的整个过程。在这个过程中，ViewController会经历一系列的生命周期方法，这些方法可以帮助开发者管理ViewController及其相关的视图和逻辑。…...

编程日记 2023/9/23 10:20:30

SkyWalking内置参数与方法

参数全局指标指标指标名称all_p99所有服务响应时间的 p99 值all_p95所有服务响应时间的 p95 值all_p90所有服务响应时间的 p90 值all_p75所有服务响应时间的 p75 值all_p70所有服务响应时间的 p70 值all_heatmap所有服务响应时间的热点图服务指标指标指标名称service_r…...

编程日记 2023/9/23 10:19:27

【C++面向对象侯捷】12.虚函数与多态 | 13.委托相关设计【设计模式经典做法，类与类之间关联起来，太妙了，不断的想，不断的写代码】

文章目录 12.虚函数与多态举例：委托继承【观察者模式】13.委托相关设计Composite 组合模式Prototype 原型模式 12.虚函数与多态纯虚函数一定要子类重新定义的继承和复合关系下的构造和析构举例：委托继承【观察者模式】 13.委托相关设计问题…...

编程日记 2023/9/23 10:15:24

基于若依ruoyi-nbcio增加flowable流程待办消息的提醒，并提供右上角的红字数字提醒（五）

1、下面提供给前端待办提醒消息的接口SysNoticeController，增加如下： /*** 补充用户数据，并返回系统消息* return*/Log(title "系统消息")GetMapping("/listByUser")public R<Map<String, Object>> listByU…...

编程日记 2023/9/23 10:14:22

hive数据初始化

mysql版本：3.1.3 hive版本： 8.0.31 hive连接配置 <property> <name>javax.jdo.option.ConnectionURL</name> <value>jdbc:mysql://node88:3306/hive?createDatabaseIfNotExisttrue</value> </pr…...

编程日记 2023/9/23 10:12:19

一、安装全局依赖 npm i -g create-next-app二、创建next项目 create-next-app react-next-demo //或 create-next-app react-next-demo --typescript三、加载mysql依赖 npm i -S mysql2四、运行项目 npm run dev五、创建db文件目录，目录下创建index.ts import…...

编程日记 2023/9/23 10:11:18

CRM系统主要包括哪些功能？

CRM系统应该要包括的功能总结为3大方向—— 核心必须要具备的功能常见尽量要有的功能可选有了自然更好的功能以我们公司用的简道云CRM系统模板为例：https://www.jiandaoyun.com 01 核心必须要具备的功能核心功能决定了系统是否能够被纳入CRM类别，这些…...

编程日记 2023/9/23 10:10:15

Nginx location 精准匹配URL = /

Location是什么？ Location是Nginx中的块级指令(block directive)，通过配置Location指令块，可以决定客户端发过来的请求URI如何处理（是映射到本地文件还是转发出去）及被哪个location处理。匹配模式分为两种模式&…...

编程日记 2023/9/23 10:09:14

使用JAXB将Java对象转xml

文章目录使用JAXB将Java对象转xml1. 要求生成的xml2. Java对象3. 封装的工具类4. 测试使用JAXB将Java对象转xml 1. 要求生成的xml <?xml version"1.0" encoding"UTF-8" ?> <root><result status"success" msg"成功&qu…...

编程日记 2023/9/23 10:07:12

Atlas 200 DK开发板问题总结

1.fatal error: acl/acl.h: No such file or directory 该问题是因为在设置的DDK环境变量下找不到头文件。解决方法： 1）输入echo $DDK，查看当前DDK地址 2）在src文件夹下找到CMakeLists.txt文件，发现该文件有一个变量名…...

编程日记 2023/9/23 10:00:07

uniapp——实现二维码生成+保存二维码图片——基础积累

最近在做二维码推广功能，自从2020年下半年到今天，大概有三年没有用过uniapp了，而且我之前用uniapp开发的程序还比较少，因此很多功能都浪费了很多时间去查资料，现在把功能记录一下。这里写目录标题效果图1.根据接口返…...

编程日记 2023/9/23 9:59:05

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计：let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性，这种设计体现了语言的核心哲学。以下是深度解析： 1.1 设计理念剖析安全优先原则：默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/7/23 4:47:55

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形总结前言学习内容：参考网站： PID算法控制 PID即：Proportional（比例）、Integral（积分&…...

编程新知 2025/8/5 7:03:44

云计算——弹性云计算器（ECS）

弹性云服务器：ECS 概述云计算重构了ICT系统，云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台，包含如下主要概念。 ECS（Elastic Cloud Server）：即弹性云服务器，是云计算…...

编程新知 2025/8/16 21:50:27

循环冗余码校验CRC码算法步骤+详细实例计算

通信过程：（白话解释） 我们将原始待发送的消息称为 M M M，依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)（意思就是 G （ x ) G（x) G（x) 是已知的）&#xff0…...

编程新知 2025/8/22 3:51:05

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色点击visual studio 上方的工具-> 选项在选项窗口中，选择环境 -> 常规 ，将其中的颜色主题改成深色点击确定，更改完成...

编程新知 2025/8/21 8:52:30

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享

平时用 iPhone 的时候，难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵，或者买了二手 iPhone 却被原来的 iCloud 账号锁住，这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2025/8/22 4:15:53

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/8/19 20:22:44

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

编程新知 2025/8/26 6:37:34

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析一、第一轮提问（基础概念问题） 1. 请解释Spring框架的核心容器是什么？它在Spring中起到什么作用？ Spring框架的核心容器是IoC容器&#…...

编程新知 2025/6/16 22:53:40

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

编程新知 2025/8/6 14:15:57