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

JavaScript基础-函数（完整版）

news 2026/3/31 23:50:21

文章目录

    • 函数
      • 基本使用
      • 函数提升
      • 函数参数
        • arguments对象（了解）
        • 剩余参数(重点)
        • 展开运算符(...)
      • 逻辑中断
      • 函数参数-默认参数
      • 函数返回值-return
      • 作用域(scope)
        • 全局作用域
        • 局部作用域
        • 变量的访问原则
        • 垃圾回收机制
        • 闭包
      • 匿名函数
        • 函数表达式
        • 立即执行函数
      • 箭头函数
        • 箭头函数中的 this (重要)
      • ES6对象简写
    • 断点调试-进入函数内部

函数

  • 函数：是可以被重复使用的代码块。
  • 作用：函数可以把具有相同或相似逻辑的代码封装起来，有利于代码复用。

基本使用

  1. 定义函数（声明函数）：function

  2. 调用函数：定义一个函数并不会自动执行它，需要调用函数。

    //声明函数
function 函数名() {函数体
}
//调用函数
函数名()//需求：封装一个函数，计算两个数的和
function getSum() {let num1 = 1let num2 = 9console.log(num1 + num2)
}
getSum()//需求： 封装函数，计算1~100之间的累加和
function getSum100() {let sum = 0for (let i = 1; i <= 100; i++) {sum += i}console.log(sum)
}
getSum100()

函数提升

  • 说明：
    • 函数提升：提升到当前作用域最前面；
    • 只提升声明，不提升调用；
    • 函数表达式不存在提升的现象，表达式相当于变量；
    • 函数提升能够使函数的声明调用更灵活

函数参数

  • 形参：声明函数时小括号里的叫形参。
  • 实参：调用函数时小括号里的叫实参。
  • 执行过程：把实参的数据传递给形参，提供给函数内部使用。
    在这里插入图片描述
function getSum(x,y) {console.log(x,y) //3 5return x + y
}
let res = getSum(3,5)
console.log(res) //8

注意：在js中，形参和实参的个数可以不一致。形参过多会自动填上undefined；实参过多，会忽略多余的实参。

建议：开发中保持形参和实参的个数一致。

arguments对象（了解）

  • arguments：是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参，但只存在于函数，外面无法使用。

  • 作用：动态获取函数的实参。

  • 可以通过for循环依次得到传递过来的实参。

剩余参数(重点)

  • 剩余参数: 允许我们将一个不定数量的参数表示为一个数组.

    简单理解：用于获取多余的实参，并形成一个真数组

  • **使用场景：**可以解决形参和实参个数不匹配的问题

<body><script>function fn(a, b, ...c) {//剩余参数只能写在参数的最后面console.log(a + b, c) //c:真数据（数组）}fn(1, 2, 3, 4, 5)</script>
</body>
  • 剩余参数和 arguments 区别：
    • ... 是语法符号，置于最末函数形参之前，用于获取多余的实参
    • 借助 … 获取的剩余实参，是个真数组
    • 箭头函数不支持arguments，但是可以使用剩余参数
    • 开发中，还是提倡多使用 剩余参数
展开运算符(…)
  • 展开运算符：将一个数组/对象进行展开
<body><script>//展开运算符 // 数组const arr = [1, 2, 3]console.log(...arr)// 对象const obj = {uname: 'niuniu',age: 18}console.log({...obj})// 应用：数组的展开，求最大值console.log(Math.max(1, 2, 3, 9))console.log(Math.max(...arr))// 合并数组const arr1 = [4, 5, 6]const arr2 = ['haha', 'lala', 'xixixi']const arr3 = [...arr1, ...arr2]console.log(arr3)// 合并对象const obj1 = {uname: 'niuniu'}const obj2 = {age: 18}const obj3 = {...obj1,...obj2}console.log(obj3)</script>
</body>

逻辑中断

  • 逻辑中断：存在于逻辑运算符 && 和 || 中，左边如果满足一定条件会中断代码执行，也称为逻辑短路。

  • 作用：解决参数形参传递的问题

  • 解释：

    在这里插入图片描述

function getSum(x,y) {//逻辑中断：如果 实参 没有传递给形参 x 和 y ，则会返回 0，而不是NaNx = x || 0y = y || 0console.log(x,y)
}
getSum(2) //2 0  => 如果没有逻辑中断，则返回 NaN
getSum(3,6) //3 6

函数参数-默认参数

  • 默认参数：可以给形参设置默认值。

  • 说明：默认值只会在 缺少实参传递 或 实参为undefined 才会被执行。

  • 作用：解决参数形参传递的问题。

  • 与逻辑中断的区别：

    • 默认参数主要处理函数形参，比逻辑中断简单；

    • 逻辑中断除了参数，还可以处理更多的需求，例如，

      在这里插入图片描述

function getSum(x = 0,y = 0) {console.log(x,y)
}
getSum(4,1) //4 1
getSum(4)   //4 0

函数返回值-return

  1. 返回值：把处理结果返回给调用者。
  2. 注意：
    • 结束函数：return 会立即结束当前函数，后面的代码不会被执行。
    • 不要换行：在return关键字和被返回的表达式之间不允许使用换行符，否则自动补充分号。
    • 默认返回：可以没有return，这时默认返回值为undefined。

作用域(scope)

  • 作用域：变量或者值在代码中可用性的范围.

  • 作用：提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

全局作用域
  1. 作用于所有代码执行的环境（整个script标签内部）或者一个独立的 js文件。
  2. 变量：全局变量
  3. 全局变量 在任何区域都可以访问和修改。
局部作用域
  1. 函数作用域：作用于函数内部的代码环境。
  2. 块级作用域：{} 大括号内部。
  3. 变量：局部变量
  4. 局部变量 只能在当前局部内部访问和修改。

注意：

  1. 如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐
  2. 但是有一种情况，函数内部的形参可以看做是局部变量。
变量的访问原则
  • 访问原则：在能够访问的情况下 先局部，局部没有 再找全局，总结：就近原则
//练习1
function f1 () {let num = 123function f2 () {console.log(num)    //123}f2()
}
let num = 234
f1()// 练习2. 
let a = 1
function fn1() {let a = 2let b = '22'fn2()function fn2() {let a = 3fn3()function fn3() {let a = 4console.log(a)  //4console.log(b)  //'22'}}
}
fn1()
垃圾回收机制
  1. 垃圾回收机制(Garbage Collection)，简称 GC
  • JS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收。
  1. js环境种内存的生命周期：
    • 内存分配：当我们声明变量、函数、对象的时候，系统会自动为他们分配内存。
    • 内存使用：即读写内存，也就是使用变量、函数等。
    • 内存回收：使用完毕，由垃圾回收器自动回收不再使用的内存。
  2. 说明：
    • 全局变量一般不会回收(关闭页面回收)
    • 一般情况下局部变量的值, 不用了, 会被自动回收掉
  3. **内存泄漏：**程序中分配的内存由于某种原因程序未释放或无法释放叫做内存泄漏。
闭包
  • 概念：一个函数对周围状态的引用捆绑在一起，闭包让开发者可以从内部函数访问外部函数的作用域。

简单理解：闭包 = 内层函数 + 外层函数的变量

  • 作用：实现数据的私有，避免全局污染，外层函数有可以访问里层函数变量。
  • 问题：内存泄漏
<body><script>// 闭包 ： 内层函数 + 外层函数的变量// function outer() {//     let  a = 1//     function f() {//         console.log(a)//     }//     f()// }// outer()// 案例：统计函数的调用次数function fn() {let count = 0function fun() {count++console.log(`fn函数调用了${count}次`)}return fun}const f = fn()f()</script>
</body>

匿名函数

函数表达式

  1. 函数表达式：将匿名函数赋值给一个变量，并且通过变量名称进行调用。

  2. 使用场景：后期web api 阶段会使用。

  3. 注意：

    • 函数也是一种数据类型；
    • 函数表达式必须先定义，后使用；

  4. 语法：

    //定义
let fn = function () {//函数体
}//调用
fn()
立即执行函数

  1. 场景介绍：避免全局变量之间的渲染。

  2. 语法：

    //方法1
(匿名函数)();//方法2
(匿名函数());//方法1
(function () {console.log('niuniu')
})();//方法2
(function () {console.log('zhuzhu')
}());

注意：多个立即执行函数要用 ; 隔开，前后都要，否则会报错。

箭头函数

  • 箭头函数比函数表达式更简洁的一种写法
  • 使用场景：箭头函数更适用于那些本来需要匿名函数的地方，写法更简单
  • 用法细节：
    • 当箭头函数只有一个参数时，可以省略参数的小括号，其余个数不能省略（没有参数也需要写小括号）
    • 当箭头函数的函数体只有一句代码 可以省略函数体大括号，这句代码就是返回值（可以不用写return）
    • 如果返回的是个对象，则需要把对象用小括号包裹
    • 箭头函数里面没有arguments，但是有剩余参数
<body><script>//箭头函数 基本写法// const fn = () =>         //     console.log('我是箭头函数')// }// fn()// 细节写法// const fn = a => console.log(a)// fn(1)// const fn = a => a// const res = fn('niuniu')// console.log(res)// const fn = () => {//     const obj = {//         uname: 'niuniu',//         age: 18//     }//     return obj// }// const res = fn()// console.log(fn())// const fn = () => ({uname: 'niuniu', age: 18})// const res = fn()// console.log(res)const fn = (...arr) => {console.log(arr)}fn(1, 2, 3)</script>
</body>
箭头函数中的 this (重要)

以前函数中的this指向是根据如何调用来确定的。简单理解就是this指向调用者

箭头函数本身没有this,它只会沿用**上一层作用域的this **。

<body><button>按钮</button><script>//箭头函数的 this问题const btn = document.querySelector('button')// btn.addEventListener('click', () => {//     console.log(this) //箭头函数里的this是指向上一级作用域// })//定时器中使用，事件源，推荐使用箭头函数//需求：点击按钮禁用，三秒后启用btn.addEventListener('click', function () {btn.disabled = truesetTimeout(() => {console.log(this)btn.disabled = false}, 3000)})</script>
</body>

注意：在开发中【使用箭头函数前需要考虑函数中 this 的值】

  1. 事件回调函数使用箭头函数时，this 为全局的 window，不太推荐使用箭头函
  2. 定时器里面的如果需要this，可以使用箭头函数

ES6对象简写

  1. 在对象中，如果属性名和属性值一致，可以简写只写属性名即可。

  2. 在对象中，方法（函数）可以简写

    <body><script>// ES6对象属性和方法的简写const uname = 'niuniu'const age = 18// 对象属性const obj = {// uname: uname,// age: ageuname,age,// 方法简写sing() {console.log('hahahaha')}}console.log(obj)obj.sing()</script>
</body>

断点调试-进入函数内部

在这里插入图片描述

  • F11 可以进入函数内部调试

  • 可以使用监视，来看数组的变化。

    在这里插入图片描述

相关文章：

JavaScript基础-函数（完整版）

文章目录 函数基本使用函数提升函数参数arguments对象&#xff08;了解&#xff09;剩余参数(重点)展开运算符(...) 逻辑中断函数参数-默认参数函数返回值-return作用域(scope)全局作用域局部作用域变量的访问原则垃圾回收机制闭包 匿名函数函数表达式立即执行函数 箭头函数箭头…...

编程日记 2024/7/4 21:21:36

AI开发者的新选择：Mojo编程语言

随着人工智能技术的迅猛发展&#xff0c;编程语言的选择在AI项目的成功中扮演着至关重要的角色。近年来&#xff0c;Mojo编程语言作为一种专为AI开发者设计的新兴语言&#xff0c;逐渐引起了广泛关注。本文将详细介绍Mojo编程语言的特点、优势及其在AI开发中的应用。 目录 Mo…...

编程日记 2024/7/4 21:19:32

软考（高项）系统分析师--论软件开发模型及应用

文章目录 前言一、前期准备&#xff1a;二、论文部分: 前言 本文对系统分析师&#xff0c;软件开发模型及其应用文章进行展示&#xff0c;可以拷贝后直接粘贴到word 文档中。 一、前期准备&#xff1a; 项目主体功能项目背景常用的软件开发模型&#xff1a;瀑布模型&#xff…...

编程日记 2024/7/4 21:18:31

同一天提档又撤档！电影《野孩子》宣布取消7月10日公映安排——浔川电影报

同一天提档又撤档&#xff01; 7月3日晚上10点&#xff0c;电影野孩子 发声明官宣撤档&#xff0c;“由于后期进度原因&#xff0c;电影《野孩子》将取消7月10日的公映安排&#xff0c;我们向各影管院线的同仁及所有观众朋友们致以最诚挚的歉意&#xff0c;谢谢大家这段时间的…...

编程日记 2024/7/4 21:17:30

Shell编程之免交互

一、Here Document免交互 1&#xff1a;概述 Here Document 是一个特殊用途的代码块&#xff0c;它在 Linux Shell 中使用 I/O 重定向的方式将命令列表提供给交互式程序或命令&#xff0c;比如 ftp、cat 或 read 命令&#xff0c;Here Document 是标准输入的一种替代品 语法…...

编程日记 2024/7/4 21:16:29

基于opencv的斜光测距及python实现

1.前言 最近做了一个基于opencv的斜光测距的小项目&#xff0c;东西不多&#xff0c;但是很有意思&#xff0c;值得拿出来学一学。项目里面需要比较精确的定位功能&#xff0c;将前人matlab代码移植到python上&#xff0c;并且做了一些优化&#xff0c;简化逻辑(毕竟我是专业的…...

编程日记 2024/7/4 21:15:28

梯度下降算法

占楼&#xff0c;明天写...

编程日记 2024/7/4 21:13:26

第5章：软件工程

第5章&#xff1a;软件工程 软件工程概述 软件生命周期 软件过程 1.能力成熟度模型(CMM) CMM&#xff08;能力成熟度模型&#xff09;是一个评估和确定组织软件过程成熟度的模型。它最早于1987年由美国国防部软件工程研究所&#xff08;SEI&#xff09;提出&#xff0c;其目的…...

编程日记 2024/7/4 21:12:24

cefsharp在splitContainer.Panel2中显示调试工具DevTools（非弹出式）含源代码

一、弹出式调试工具 （ShowDevTools） ChromiumWebBrowser webbrowser; public void showDevTools(){//定位到某元素webbrowser.ShowDevTools(null, parameters.XCoord, parameters.YCoord);...

编程日记 2024/7/4 21:09:20

nginx部署多个项目；vue打包项目部署设置子路径访问；一个根域名（端口）配置多个子项目

本文解决&#xff1a; vue打包项目部署设置子路径访问&#xff1b;nginx部署多个子项目&#xff1b;一个ip/域名 端口 配置多个子项目&#xff1b;配置后&#xff0c;项目能访问&#xff0c;但是刷新页面就丢失的问题 注&#xff1a;本文需要nginx配置基础。基础不牢的可见文…...

编程日记 2024/7/4 21:08:20

02-部署LVS-DR群集

1.LVS-DR工作原理 LVS-DR模式&#xff0c;Director Server作为群集的访问入口&#xff0c;不作为网购使用&#xff0c;节点Director Server 与 Real Server 需要在同一个网络中&#xff0c;返回给客户端的数据不需要经过Director Server 为了响应对整个群集的访问&#xff0c;…...

编程日记 2024/7/4 21:07:17

DataWhale-吃瓜教程学习笔记 (六）

学习视频**&#xff1a;第4章-决策树_哔哩哔哩_bilibili 西瓜书对应章节&#xff1a; 第五章 5.1&#xff1b;5.2&#xff1b;5.3 文章目录 MP 神经元- 感知机模型 &#xff08;分类模型&#xff09;-- 损失函数定义--- 感知机学习算法 - 随机梯度下降法 - 神经网络需要解决的问…...

编程日记 2024/7/4 21:06:16

在docker配置Nginx环境配置

应用于商业模式集中&#xff0c;对于各种API的调用&#xff0c;对于我们想要的功能进行暴露&#xff0c;对于不用的进行拦截进行鉴权。用于后面的付费 开发环境 正式上线模式 一、常用命令 停止&#xff1a;docker stop Nginx重启&#xff1a;docker restart Nginx删除服务&a…...

编程日记 2024/7/4 21:05:14

在不修改.gitignore的情况下，忽略个人文件的提交

Git提供了一个assume-unchanged命令&#xff0c;可以将文件标记为“假设未更改”。这意味着Git将忽略该文件的更改&#xff0c;不会将其提交到仓库中。要使用该命令&#xff0c;只需运行以下命令&#xff1a; git update-index --assume-unchanged <file>其中&#xff0…...

编程日记 2024/7/4 21:03:12

【Unity navmeshaggent 组件】

【Unity navmeshaggent 组件】 组件概述&#xff1a; NavMeshAgent是Unity AI系统中的一个组件&#xff0c;它允许游戏对象&#xff08;通常是一个角色或AI&#xff09;在导航网格&#xff08;NavMesh&#xff09;上自动寻路。 组件属性&#xff1a; Radius&#xff1a;导航…...

编程日记 2024/7/4 21:02:11

51单片机第18步_将TIM0用作13位定时器

本章重点学习将TIM0用作13位定时器。 1、定时器0工作在模式0框图 2、定时器0工作在模式0举例 1、Keil C51中有一些关键字&#xff0c;需要牢记&#xff1a; interrupt 0&#xff1a;指定当前函数为外部中断0&#xff1b; interrupt 1&#xff1a;指定当前函数为定时器0中断…...

编程日记 2024/7/4 21:01:10

构建现代医疗：互联网医院系统源码与电子处方小程序开发教学

本篇文章&#xff0c;笔者将探讨互联网医院系统的源码结构和电子处方小程序的开发&#xff0c;帮助读者更好地理解和掌握这些前沿技术。 一、互联网医院系统源码结构 互联网医院系统通常由多个模块组成&#xff0c;每个模块负责不同的功能。以下是一个典型的互联网医院系统的主…...

编程日记 2024/7/4 21:00:09

2024亚太赛（中文赛）数学建模竞赛选题建议+初步分析

提示&#xff1a;DS C君认为的难度&#xff1a;B<C<A&#xff0c;开放度&#xff1a;C<A<B。 综合评价来看 A题适合有较强计算几何和优化能力的团队&#xff0c;难度较高&#xff0c;但适用面较窄。 B题数据处理和分析为主&#xff0c;适合数据科学背景的团队…...

编程日记 2024/7/4 20:59:08

10 - Python文件编程和异常

文件和异常 在实际开发中&#xff0c;常常需要对程序中的数据进行持久化操作&#xff0c;而实现数据持久化最直接简单的方式就是将数据保存到文件中。说到“文件”这个词&#xff0c;可能需要先科普一下关于文件系统的知识&#xff0c;对于这个概念&#xff0c;维基百科上给出…...

编程日记 2024/7/4 20:58:07

AI绘画-Stable Diffusion 原理介绍及使用

引言 好像很多朋友对AI绘图有兴趣&#xff0c;AI绘画背后&#xff0c;依旧是大模型的训练。但绘图类AI对计算机显卡有较高要求。建议先了解基本原理及如何使用&#xff0c;在看看如何实现自己垂直行业的绘图AI逻辑。或者作为使用者&#xff0c;调用已有的server接口。 首先需…...

编程日记 2024/7/4 20:56:05

即插即用系列 | TGRS 2026 | CGTA：曲率引导标记注意力！线性复杂度全局建模，几何结构保真与长程关联双突破 | 代码分享

0. 前言 本文介绍了CGTA曲率引导标记注意力模块&#xff0c;其通过曲率感知的标记选择策略与全局稀疏注意力机制&#xff0c;首次在遥感图像超分辨率领域实现对细长曲线结构与重复纹理的高保真重建&#xff0c;有效破解了传统注意力机制在处理曲线拓扑时容易产生锯齿边缘与结构…...

编程新知 2026/3/31 23:47:16

ai辅助开发：借助快马平台ai模型打造智能自适应的openclaw chrome数据抓取插件

今天想和大家分享一个最近用AI技术增强网页数据抓取效率的实践——开发一个叫OpenClaw的智能Chrome插件。这个插件的特别之处在于&#xff0c;它不仅能抓取数据&#xff0c;还能通过AI理解网页结构&#xff0c;自动适应不同网站&#xff0c;大大减少了手动编写抓取规则的工作量…...

编程新知 2026/3/31 23:00:45

Nginx + FFmpeg 核心配置

Nginx FFmpeg 核心配置&#xff08;2 种最实用方案&#xff09;我给你最简、能直接用的配置&#xff0c;不用你自己改半天&#xff0c;分两种场景&#xff1a;Nginx 接收 FFmpeg 推流&#xff08;直播&#xff09;Nginx 调用 FFmpeg 自动转码&#xff08;高清 / 标清&#xff…...

编程新知 2026/3/31 21:04:48

HarmonyOS6 半年磨一剑 - RcCheckbox 组件核心架构与类型系统设计

文章目录前言一、组件整体架构1.1 双组件协作设计1.2 文件结构1.3 装饰器分工二、类型系统深度解析2.1 值类型的宽泛设计2.2 选项配置接口2.3 形状与尺寸类型三、核心参数体系3.1 RcCheckbox 参数全览3.2 RcCheckboxGroup 扩展参数四、内部状态设计4.1 受控模式的双状态机制4.2…...

编程新知 2026/3/31 20:54:30

我试了opencli，3秒拿到知乎热榜——手把手教你把200+网站变成命令行

前言： 坦白说，我第一次看到opencli的时候，心想："又一个给程序员用的 命令行工具 ，跟我没关系。" 然后我随手试了一条命令—— opencli bilibili hot 3秒钟，B站条直接出现在我眼前。标题、热度、排名，整整齐齐。 那一刻我意识到 这玩意儿不是给程序员用的，是…...

编程新知 2026/3/31 20:42:12

Maxwell Fields Calculator双模式切换指南：堆栈与代数表达式输入实战解析

Maxwell Fields Calculator双模式切换指南&#xff1a;堆栈与代数表达式输入实战解析 在电磁仿真领域&#xff0c;Maxwell Fields Calculator一直是工程师进行后处理分析的利器。随着2025 R1版本的推出&#xff0c;一项革命性的功能——双模式表达式输入&#xff0c;彻底改变了…...

编程新知 2026/3/31 19:31:10

三步解决Windows 11卡顿难题：开源工具Win11Debloat让系统效率提升3倍

三步解决Windows 11卡顿难题&#xff1a;开源工具Win11Debloat让系统效率提升3倍 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to de…...

编程新知 2026/3/31 19:29:10

3分钟彻底搞定Axure RP汉化：免费中文语言包完整指南

3分钟彻底搞定Axure RP汉化&#xff1a;免费中文语言包完整指南 【免费下载链接】axure-cn Chinese language file for Axure RP. Axure RP 简体中文语言包&#xff0c;不定期更新。支持 Axure 9、Axure 10。 项目地址: https://gitcode.com/gh_mirrors/ax/axure-cn 还在…...

编程新知 2026/3/31 19:25:03

PyCharm中如何快速取消pytest测试模式？5步搞定直接运行Python脚本

PyCharm中如何快速取消pytest测试模式&#xff1f;5步搞定直接运行Python脚本 作为Python开发者&#xff0c;我们经常需要在PyCharm中切换不同的运行模式。有时候&#xff0c;你可能只是想快速运行一个Python脚本&#xff0c;却发现PyCharm固执地以pytest模式执行&#xff0c;…...

编程新知 2026/3/31 18:52:19

3步掌握Vortex：让250+游戏模组管理像专业开发者一样简单

3步掌握Vortex&#xff1a;让250游戏模组管理像专业开发者一样简单 【免费下载链接】Vortex Vortex: Nexus-Mods开发的游戏模组管理器&#xff0c;用于简化模组的安装和管理过程。 项目地址: https://gitcode.com/gh_mirrors/vor/Vortex 价值定位&#xff1a;重新定义游…...

编程新知 2026/3/31 18:23:59