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

JavaScript基础-函数（完整版）

news 2025/7/5 10:15:59

文章目录

    • 函数
      • 基本使用
      • 函数提升
      • 函数参数
        • 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

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2025/7/1 6:09:18

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2025/6/28 12:46:22

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/6/16 17:44:44

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

编程新知 2025/7/4 11:41:54

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

编程新知 2025/7/4 1:00:42

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/6/17 3:05:21

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2025/6/25 22:18:39

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/6/24 5:44:40

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/7/5 7:21:38

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

编程新知 2025/6/20 18:33:23