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

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

news 2026/2/7 12:45:39

开始吧，做时间的主人！

把时间分给睡眠，分给书籍，分给运动，

分给花鸟树木和山川湖海，

分给你对这个世界的热爱，

而不是将自己浪费在无聊的人和事上。

思维导图

函数

为什么需要函数

<!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>')// }// // 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>')// }// // 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>')// }// 声明function sheet99() {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>')}}// 调用sheet99()sheet99()sheet99()sheet99()</script>
</body></html>

代码复用，生成多个99乘法表

函数使用

<!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 num = 10// console.log(num)// 1. 函数的声明   function sayHi() {console.log('hi~~~')}// 2. 函数调用   函数不调用，自己不执行sayHi()sayHi()sayHi()</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. 求2个数的和// function getSum() {//   let num1 = +prompt('请输入第一个数')//   let num2 = +prompt('请输入第二个数')//   console.log(num1 + num2)// }// getSum()// 2. 求 1~100 累加和function getSum() {let sum = 0for (let i = 1; i <= 100; i++) {sum += i}console.log(sum)}getSum()</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>// 2. 求 1~100 累加和// function getSum(end) {   // end = 50//   // console.log(end)//   let sum = 0//   for (let i = 1; i <= end; i++) {//     sum += i//   }//   console.log(sum)// }// getSum(50)  // 1~50// getSum(100)  // 1~100function getSum(start, end) {   // end = 50// 形参  形式上的参数  // console.log(end)let sum = 0for (let i = start; i <= end; i++) {sum += i}console.log(sum)}getSum(1, 50)  // 调用的小括号里面 实参 - 实际的参数getSum(100, 200)  // 实参 - 实际的参数</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. 封装函数// 给一个参数的默认值function getArrSum(arr = []) {// console.log(arr)let sum = 0for (let i = 0; i < arr.length; i++) {sum += arr[i]}console.log(sum)}getArrSum([1, 2, 3, 4, 5])getArrSum([11, 22, 33])getArrSum()  // 0</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>// // 函数的返回值// function fn() {//   return 20// }// // fn() 调用者 相当于执行了    fn()   = 20// // return 的值返回给调用者// // console.log(fn())// // let num = prompt('请输入数字')// let re = fn()// console.log(re)// 求和函数的写法function getTotalPrice(x, y) {return x + y// return 后面的代码不会被执行}// console.log(getTotalPrice(1, 2))// console.log(getTotalPrice(1, 2))let sum = getTotalPrice(1, 2)console.log(sum)console.log(sum)function fn() {}let re = fn()console.log(re)  // 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><div></div><script>// 1. 求最大值函数// function getMax(x, y) {//   return x > y ? x : y// }// let max = getMax(11, 234)// console.log(max)// //  2. 求任意数组的最大值，并且返回// function getArrValue(arr = []) {//   // (1)先准备一个max变量存放数组的第一个值//   let max = arr[0]//   // (2) 遍历比较//   for (let i = 1; i < arr.length; i++) {//     if (max < arr[i]) {//       max = arr[i]//     }//   }//   // (3) 返回值//   return max// }// // let max = getArrValue([1, 3, 5, 7, 9])// // let num = prompt('请输入')// let max = getArrValue([11, 3, 55, 7, 29])// console.log(max)//  3. 求任意数组的最大值和最小值，并且返回function getArrValue(arr = []) {// (1)先准备一个max变量存放数组的第一个值let max = arr[0]let min = arr[0]  // 最小值// (2) 遍历比较for (let i = 1; i < arr.length; i++) {// 最大值if (max < arr[i]) {max = arr[i]}// 最小值if (min > arr[i]) {min = arr[i]}}// (3) 返回值  返回的是数组return [max, min]// return min}let newArr = getArrValue([11, 3, 55, 7, 29])console.log(`数组的最大值是: ${newArr[0]}`)console.log(`数组的最小值是: ${newArr[1]}`)</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>// function getSum(x, y) {//   return x + y//   // 返回值返回给了谁？ 函数的调用者  getSum(1, 2)//   // getSum(1, 2) = 3// }// // let result = getSum(1, 2) = 3// // let num = parseInt('12px')// let result = getSum(1, 2)// console.log(result)// 1. 函数名相同， 后面覆盖前面// function fn() {//   console.log(1)// }// function fn() {//   console.log(2)// }// fn()// 2. 参数不匹配function fn(a, b) {console.log(a + b)}// (1). 实参多余形参   剩余的实参不参与运算// fn(1, 2, 3)// (2). 实参少于形参   剩余的实参不参与运算fn(1)   // 1 + undefined  = NaN </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 num = 10  // 1. 全局变量console.log(num)function fn() {console.log(num)}fn()// 2. 局部变量function fun() {let str = 'pink'}console.log(str)  // 错误</script>
</body></html>

函数内部，第一次出现的局部变量被当做全局变量

无let变量声明关键词，甚至覆盖同名全局变量（强烈不推荐）

<!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 num = 20// function fn() {//   num = 10  // 全局变量来看  强烈不允许// }// fn()// console.log(num)// function fun(x, y) {//   // 形参可以看做是函数的局部变量//   console.log(x)// }// fun(1, 2)// console.log(x)  // 错误的// let num = 10function fn() {// let num = 20function fun() {// let num = 30console.log(num)}fun()}fn()</script>
</body></html>

匿名函数

第三方js文件（具名立即执行函数），担心变量名冲突：

<!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>// age = age + 1// 1. 用户输入let second = +prompt('请输入秒数:')// 2.封装函数function getTime(t) {// console.log(t)  // 总的秒数// 3. 转换// 小时：  h = parseInt(总秒数 / 60 / 60 % 24)// 分钟：  m = parseInt(总秒数 / 60 % 60)// 秒数: s = parseInt(总秒数 % 60) let h = parseInt(t / 60 / 60 % 24)let m = parseInt(t / 60 % 60)let s = parseInt(t % 60)h = h < 10 ? '0' + h : hm = m < 10 ? '0' + m : ms = s < 10 ? '0' + s : s// console.log(h, m, s)return `转换完毕之后是${h}小时${m}分${s}秒`}let str = getTime(second)document.write(str)console.log(h)</script>
</body></html>

笔记

去看知识浓缩笔记：

JavaScript 基础 - 第4天笔记-CSDN博客

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

开始吧，做时间的主人！ 把时间分给睡眠，分给书籍，分给运动， 分给花鸟树木和山川湖海， 分给你对这个世界的热爱， 而不是将自己浪费在无聊的人和事上。思维导图函数为什么需要函数 <!DO…...

编程日记 2023/9/27 12:01:06

mysql超级聚合with rollup

超级聚合，是在group by的基础上，再次进行聚合。它再次聚合的列，是select中没有用到聚合函数的列。文章目录例子1解释例子2表以及数据例子1 mysql> SELECT year, country, product, SUM(profit) AS profitFROM salesGROUP BY year, c…...

编程日记 2023/9/27 12:00:05

浅谈电动汽车充电桩设计与应用研究

安科瑞华楠摘要：目前，随着我国社会经济的快速发展，我国的各个领域都取得了突破性的发展，尤其是在电动汽车充电桩的设计方法，新型的电动汽车充电桩设计已经广泛的受到了人民群众的青睐与认可，而这种发展前…...

编程日记 2023/9/27 11:59:04

tensorflow Windows安装说明

TensorFlow官网教程 Tensorflow 2.10是最后一个在本地windows上支持GPU的版本。从2.11版本开始，需要在windows WLS2（适用于 Linux 的 Windows 子系统）上安装才能使用GPU。在anaconda shell控制台中,切换至虚拟环境, 安装TensorFlow 这是用…...

编程日记 2023/9/27 11:58:03

【Leetcode热题】打卡 day11——20（更新至11）

1、合并两个有序链表 - 链表暴力 / 递归 21. 合并两个有序链表 （1）暴力 class Solution {public ListNode mergeTwoLists(ListNode l1, ListNode l2) {ListNode dummynew ListNode();ListNode curdummy;while(l1!null&&l2!null){if(l1.val&l…...

编程日记 2023/9/27 11:56:01

linux使用操作[3]

编程日记 2023/9/27 11:54:00

梦想让生活得以忍受-寄语机器视觉工程师

我，曾梦想梦想走天涯，看看这世界的繁华，年少的心总有些轻狂，如今四海为家。大家都听过这首歌，迎来很多打工人的共鸣，著名作家海明威曾说，“一个人可以被打败，但不可以被毁灭”&…...

编程日记 2023/9/27 11:51:58

linux 设置打开文件数

可以使用下面的文件进行设置 /etc/security/limits.d/90-nproc.conf 先来看/etc/security/limits.d/90-nproc.conf 配置文件： [root ~]# cat /etc/security/limits.d/90-nproc.conf # Default limit for number of users processes to prevent # accidental fork…...

编程日记 2023/9/27 11:49:56

MySQL基础篇-约束

目录 1.约束概述 2.分类 3.测试user表的约束情况主键约束非空约束及唯一约束检查约束默认约束 4.外键约束外键约束的语法外键约束的删除/更新行为小结 1.约束概述 MySQL约束（Constraints）是用于确保表中数据完整性和一致性的规则。它们定…...

编程日记 2023/9/27 11:48:55

系统工程知识体系（SEBoK）

介绍《系统工程知识体系》（SEBoK）是以一种理念设计的，即如果工程师有一个实时更新、实用的指南，他们就能做出更优秀的工作。如果你以前没有使用过这个资源，也没有关系；因为已经有一个完整的指南供你参考&…...

编程日记 2023/9/27 11:47:54

Spring DI (Dependency Injection)

What Is DI? 当一个类需要依赖另一个对象，把另一个对象实例化之后注入给这个对象的过程我们称之为DI # Create an object dependency in traditional programming public class Store {private Item item;public Store() {item new ItemImpl1(); } }# Using …...

编程日记 2023/9/27 11:46:54

Spring Boot ： ORM 框架 JPA 与连接池 Hikari

数据库方面我们选用 Mysql ， Spring Boot 提供了直接使用 JDBC 的方式连接数据库，毕竟使用 JDBC 并不是很方便，需要我们自己写更多的代码才能使用，一般而言在 Spring Boot 中我们常用的 ORM 框架有 JPA 和 Mybaties ，本…...

编程日记 2023/9/27 11:41:48

Wireshark抓包分析ICMP协议

「作者主页」：士别三日wyx 「作者简介」：CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者「推荐专栏」：对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》分析目的：分析ICMP协议的数据格式、报文…...

编程日记 2023/9/27 11:40:47

C++——安装环境、工具

一、进入官网下载 Visual Studio 下载地址：https://visualstudio.microsoft.com/zh-hans/ 二、安装三、安装完后如果出现window SDK 下载失败，可自行下载，如果没有请跳过这一步 Window SDK 官方地址：https://developer.microsoft…...

编程日记 2023/9/27 11:39:46

征稿啦！第 18 届「中国 Linux 内核开发者大会」重磅启动

第十八届中国 Linux 内核开发者大会（CLK ）如期而至。CLK 以“自由、协作、创新”为理念，以开源技术的推广和普及为使命，旨在促进 Linux 内核开发爱好者相互交流，共同进步。经过组委会公开征集承办单位和各意向承办单…...

编程日记 2023/9/27 11:38:45

JDBC8.0+

首先创建工程，导入jar包 1.注册驱动 //注册驱动//利用反射，较为灵活Class.forName("com.mysql.cj.jdbc.Driver");/**问题：会注册俩次驱动* 解决方案：只触发静态代码块* 触发静态代码块：* 类加载机制&…...

编程日记 2023/9/27 11:34:42

聊聊常见的IO模型 BIO/NIO/AIO 、DIO、多路复用等IO模型

文章目录一、前言1. 什么是IO模型2. 为什么需要IO模型二、常见的IO模型1. 同步阻塞IO（Blocking IO，BIO）2. 同步非阻塞IO（Non-blocking IO，NIO）3. 异步非阻塞IO（Asynchronous IO，AI…...

编程日记 2023/9/27 11:33:41

Linux- 网络编程初探

原始套接字（Raw Socket） 原始套接字（Raw Socket）是一种提供较低级别网络访问的套接字。通过使用原始套接字，应用程序可以直接发送或接收网络层如IP的数据包，或者传输层如TCP、UDP的段，而无需通…...

编程日记 2023/9/27 11:31:39

AVLoadingIndicatorView - 一个很好的Android加载动画集合

官网 GitHub - HarlonWang/AVLoadingIndicatorView: DEPRECATED 项目简介 AVLoadingIndicatorView is a collection of nice loading animations for Android. You can also find iOS version of this here. Now AVLoadingIndicatorView was updated version to 2.X , If …...

编程日记 2023/9/27 11:29:37

我想设计一套游戏的奖励系统，有什么值得注意的？

游戏上： 游戏成就系统的价值游戏中的成就可以延长游戏时间，让玩家不仅仅是将游戏通关，而是必须完成游戏内所有挑战及发现秘密，这些成就可以与游戏本身的目标一致，也可以独立于游戏的主要或次要目标之外，…...

编程日记 2023/9/27 11:28:36

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好，欢迎来到《云原生核心技术》系列的第七篇！ 在上一篇，我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在，我们就像一个拥有了一块崭新数字土地的农场主，是时…...

编程新知 2025/12/14 22:32:59

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2026/2/6 12:23:06

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU：如何让RNN变得更聪明？ 在深度学习的世界里，循环神经网络（RNN）以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而，传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/12/24 1:45:14

工程地质软件市场：发展现状、趋势与策略建议

一、引言在工程建设领域，准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具，正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/10/6 6:10:29

[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

编程新知 2026/1/28 8:34:48

css的定位（position）详解：相对定位绝对定位固定定位

在 CSS 中，元素的定位通过 position 属性控制，共有 5 种定位模式：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和…...

编程新知 2026/2/6 6:35:29

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况，可以通过以下几种方式模拟或触发： 1. 增加CPU负载运行大量计算密集型任务，例如： 使用多线程循环执行复杂计算（如数学运算、加密解密等）。运行图…...

编程新知 2025/11/30 10:30:15

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...

编程新知 2026/2/1 5:42:50

css3笔记（1）自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size：0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/10/11 5:18:43