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

JavaScript基础-函数（完整版）

news 2025/9/17 18:00:39

文章目录

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

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/8/4 15:02:27

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2025/9/14 11:31:52

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2025/9/14 11:16:46

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2025/9/9 10:12:45

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2025/9/11 12:55:06

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2025/8/14 2:06:45

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

编程新知 2025/8/26 0:20:55

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2025/9/12 23:21:56

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

编程新知 2025/9/9 10:09:37

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/8/27 4:07:51