Web 开发 16

1 在 JavaScript（包括 JSX）中，函数体的写法和返回值处理

在 JavaScript（包括 JSX）中，函数体的写法和返回值处理确实有一些简洁的语法规则，尤其是在箭头函数中。这些规则常常让人混淆，我们来详细梳理一下：

1. 首先明确：什么时候需要显式 return？

当函数体用 {}（花括号）包裹时，必须使用 return 才能返回值，否则默认返回 undefined。

javascript

运行

// 普通函数
function add(a, b) {// 用了花括号，必须写 returnreturn a + b;
}// 箭头函数
const multiply = (a, b) => {// 用了花括号，必须写 returnreturn a * b;
};

2. 什么时候可以省略 return（隐式返回）？

当函数体是「单行表达式」且没有用 {} 包裹时，可以省略 return，箭头函数会自动返回该表达式的结果。

这时有两种写法（效果相同）：

  • 直接写表达式（不加括号）
  • 用 ()（圆括号）包裹表达式（推荐用于多行情况，如 JSX）

javascript

运行

// 情况1：单行表达式，不加括号
const subtract = (a, b) => a - b; 
// 等价于：(a,b) => { return a - b; }// 情况2：JSX 中常用圆括号（适合多行）
const User = (name) => (<div className="user"><h1>{name}</h1></div>
);
// 等价于：(name) => { return <div>...</div>; }

3. JSX 中的特殊情况

在 React 组件（JSX）中，箭头函数的隐式返回非常常见，因为组件通常需要返回一段 JSX 结构。

错误示例（忘记 return 或括号）：

jsx

// 错误1：用了花括号却没写 return
const Button = () => {<button>点击我</button> // 不会返回任何内容（返回 undefined）
};// 错误2：多行 JSX 没加括号（解析会出错）
const Card = () => <div className="card"><p>内容</p></div>; 
// 注意：如果 JSX 写在一行可以不加括号，但多行必须加！
正确示例：

jsx

// 正确1：用花括号 + 显式 return
const Button = () => {return <button>点击我</button>;
};// 正确2：隐式返回（单行可省略括号）
const Avatar = (url) => <img src={url} alt="头像" />;// 正确3：隐式返回（多行用圆括号包裹，推荐）
const Card = () => (<div className="card"><h2>标题</h2><p>内容</p></div>
);

总结规律：

函数体写法是否需要 return适用场景
(参数) => { ... }是（必须写）函数体有多行逻辑或需要条件判断
(参数) => 表达式否（自动返回）单行简单表达式
(参数) => ( ... )否（自动返回）多行表达式（如 JSX 结构）

简单来说：花括号 {} 里要显式 return，圆括号 () 或直接写表达式则隐式返回。

在 JSX 中，为了代码清晰和避免错误，多行结构推荐用 () 包裹并省略 return。

2 什么叫回调？

（这个概念很重要但是我总是没有弄清楚）

“回调”（Callback）是 JavaScript 中非常重要的概念，简单来说就是一个被作为参数传递给另一个函数的函数。

当一个函数 A 被作为参数传入函数 B，并且在函数 B 内部被调用执行时，A 就称为 “回调函数”。

为什么需要回调？

JavaScript 中很多操作是 “异步” 的（比如读取文件、网络请求、定时器等），需要等某个操作完成后再执行后续逻辑，这时就需要用回调来 “等待并响应” 这个结果。

举个生活例子：

你去餐厅吃饭，点餐后服务员给你一个叫号器（回调函数），告诉你 “做好了会叫你”。这里：

  • 服务员的 “通知” 行为就是调用回调函数
  • 你听到叫号后去取餐的动作就是回调函数里的逻辑

代码示例：

javascript

运行

// 定义一个回调函数：处理结果
function handleResult(result) {console.log("收到结果：", result);
}// 定义一个接收回调的函数
function doSomething(callback) {// 模拟一个耗时操作（比如网络请求）setTimeout(() => {const result = "操作完成";// 操作完成后，调用回调函数并传递结果callback(result); }, 1000);
}// 调用：把 handleResult 作为回调传入
doSomething(handleResult); 
// 1秒后会输出："收到结果：操作完成"

常见场景：

  1. 异步操作：定时器（setTimeout）、网络请求（fetch）、文件读取等

    javascript

    运行

    // 定时器回调
setTimeout(() => {console.log("1秒后执行"); // 这是一个匿名回调函数
}, 1000);

  2. 数组方法：map、forEach、filter 等都需要传入回调

    javascript

    运行

    const numbers = [1, 2, 3];
// forEach 的参数就是一个回调函数
numbers.forEach(num => console.log(num));

  3. 事件处理：DOM 事件或 React 事件中，事件处理函数本质也是回调

    jsx

    // React 中点击事件的回调
<button onClick={() => console.log("点击了")}>点击</button>

核心特点：

  • 回调函数是 “被别人调用” 的函数，不是自己主动执行
  • 常用于处理异步结果或响应某个事件
  • 箭头函数的简写形式让回调代码更简洁（这也是之前提到的 “隐式回调” 的由来）

理解回调是学习 JavaScript 异步编程（如 Promise、async/await）的基础～

3 嵌套函数（Nested Functions）

【函数里面套函数，一种类似于套娃的样子？】

在 JavaScript 中，函数内部定义另一个函数的写法非常常见，这种 “函数套函数” 的结构被称为嵌套函数（Nested Functions），也确实像 “套娃” 一样一层包一层。

为什么需要嵌套函数？

  1. 封装逻辑：把只在当前函数内用到的逻辑 “藏” 在内部，避免污染外部作用域
  2. 访问外部变量：内部函数可以直接接访问外部函数的变量（闭包特性）
  3. 简化代码：减少全局函数的数量，让逻辑更集中

基础示例：简单的嵌套函数

javascript

运行

function outerFunction() {const outerVar = "我是外部变量";// 内部嵌套的函数function innerFunction() {const innerVar = "我是内部变量";// 内部函数可以访问外部函数的变量console.log(outerVar + "，" + innerVar);}// 调用内部函数innerFunction();
}// 执行外部函数
outerFunction(); // 输出："我是外部变量，我是内部变量"

这里的 innerFunction 就是嵌套在 outerFunction 内部的函数，它只能在 outerFunction 内部被调用（除非被返回出去）。

进阶场景：返回内部函数（闭包）

更强大的用法是让外部函数返回内部函数，形成 “闭包”，这样内部函数即使在外部函数执行完后，仍能访问外部函数的变量：

javascript

运行

function createCounter() {let count = 0; // 这个变量被内部函数"记住"// 返回一个内部函数return function() {count++;return count;};
}// 得到内部函数
const counter = createCounter();// 多次调用，会持续累加
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

这里 createCounter 是外部函数，返回的匿名函数是内部函数。即使 createCounter 执行完了，内部函数依然能访问并修改 count 变量，这就是闭包的特性。

JSX 中的嵌套函数（React 组件）

在 React 组件中，经常会在函数组件内部定义事件处理函数，也是嵌套函数的典型应用：

jsx

function UserProfile() {const [name, setName] = React.useState("");// 嵌套的事件处理函数function handleInputChange(e) {// 可以访问外部的 name 和 setNamesetName(e.target.value);}return (<div><input type="text" value={name} onChange={handleInputChange} // 使用内部函数/><p>你输入的是：{name}</p></div>);
}

handleInputChange 就是嵌套在 UserProfile 组件内部的函数，专门处理输入框变化的逻辑。

注意点

  1. 作用域隔离：内部函数不能被外部直接访问（除非被返回）
  2. 变量查找：内部函数会先找自己的变量，找不到再找外层函数的，直到全局（作用域链）
  3. 性能考量：过多的嵌套可能让代码可读性下降，合理使用即可

这种 “套娃” 结构是 JavaScript 灵活性的体现，尤其是闭包特性，让很多高级功能（如模块化、私有变量）得以实现。

4 回调函数和嵌套函数

【上吊了，我以为这样也算回调（原先把嵌套函数也误以为是回调函数），应该是某个函数的参数也是一个函数，那么作为参数的那个函数也就是回调函数】

你的理解完全正确！当一个函数作为参数传递给另一个函数时，这个作为参数的函数就叫 “回调函数”，和 “函数套函数”（嵌套函数）是不同的概念，只是两者有时会一起出现，容易混淆。

明确区分两个概念：

  1. 嵌套函数：函数内部定义另一个函数（“套娃” 结构），重点是 “定义位置”

    javascript

    运行

    function outer() {// 这是嵌套函数（仅在 outer 内部定义）function inner() {} 
}

  2. 回调函数：一个函数被作为参数传给另一个函数（“参数身份”），重点是 “使用方式”

    javascript

    运行

    function callback() {}// 把 callback 作为参数传给 doSomething，此时 callback 就是回调函数
function doSomething(fn) { fn(); // 调用回调函数
}doSomething(callback);

为什么容易混淆？

因为回调函数经常会用匿名嵌套函数的形式写，看起来像 “套娃”：

javascript

运行

// 匿名函数作为参数（回调），同时也是嵌套在 doSomething 调用中的
doSomething(function() { console.log("我是回调，也是匿名嵌套函数"); 
});

这里的匿名函数既是 “嵌套在调用语句中的函数”，也是 “作为参数的回调函数”，两种身份重合了，所以容易让人混淆。

一句话总结：

  • 嵌套函数：看 “是否定义在另一个函数内部”
  • 回调函数：看 “是否被当作参数传给另一个函数”

你最初的理解是对的，“某个函数的参数也是一个函数，这个参数函数就是回调函数”，这是回调的核心定义～

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/diannao/95897.shtml
繁体地址，请注明出处：http://hk.pswp.cn/diannao/95897.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

超高车辆碰撞预警系统如何帮助提升城市立交隧道安全？

超高车辆碰撞预警系统如何帮助提升城市立交隧道安全？

超高车辆带来的安全隐患立交桥和隧道的设计通常基于常规车辆的高度标准。然而&#xff0c;随着重型运输业和超高货车的增加&#xff0c;很多超高车辆会误入这些限高区域&#xff0c;造成潜在的安全隐患。超高车辆与立交桥梁或隧道顶盖发生碰撞时&#xff0c;可能导致结构受损&a…
阅读更多...
三种变量类型在局部与全局作用域的区别

三种变量类型在局部与全局作用域的区别

一、基本概念作用域&#xff08;Scope&#xff09;&#xff1a; 全局作用域&#xff1a;定义在所有函数外部的变量或函数&#xff0c;具有文件作用域&#xff0c;生命周期为整个程序运行期间。局部作用域&#xff1a;定义在函数、块&#xff08;如 {}&#xff09;或类内部的变量…
阅读更多...
InfluxDB 数据迁移工具：跨数据库同步方案（二）

InfluxDB 数据迁移工具：跨数据库同步方案（二）

六、基于 API 的同步方案实战6.1 API 原理介绍InfluxDB 提供的 HTTP API 是实现数据迁移的重要途径。通过这个 API&#xff0c;我们可以向 InfluxDB 发送 HTTP 请求&#xff0c;以实现数据的读取和写入操作。在数据读取方面&#xff0c;使用GET请求&#xff0c;通过指定数据库名…
阅读更多...
JVM安全点轮询汇编函数解析

JVM安全点轮询汇编函数解析

OpenJDK 17 源码的实现逻辑&#xff0c;handle_polling_page_exception 函数在方法返回时的调用流程如下&#xff1a;调用流程分析&#xff1a;栈水印检查触发跳转&#xff1a;当线程执行方法返回前的安全点轮询时&#xff08;MacroAssembler::safepoint_poll 中 at_returntrue…
阅读更多...
Linux怎么查看服务器开放和启用的端口

Linux怎么查看服务器开放和启用的端口

在 Linux 系统中&#xff0c;可以通过以下方法查看 服务器开放和启用的端口。以下是详细的步骤和工具&#xff0c;适用于不同场景。1. 使用 ss 查看开放的端口ss 是一个现代化工具&#xff0c;用于显示网络连接和监听的端口。1.1 查看正在监听的端口运行以下命令&#xff1a;ba…
阅读更多...
XF 306-2025 阻燃耐火电线电缆检测

XF 306-2025 阻燃耐火电线电缆检测

近几年随着我国经济快速的发展&#xff0c;电气火灾呈现高发趋势&#xff0c;鉴于电线电缆火灾的危险性&#xff0c;国家制定了阻燃&#xff0c;耐火电线电缆的标准&#xff0c;为企业&#xff0c;建设方&#xff0c;施工方等的生产&#xff0c;选材提供了指引。XF 306-2025 阻…
阅读更多...
【Java|第二十篇】面向对象（十）——枚举类

【Java|第二十篇】面向对象（十）——枚举类

目录 &#xff08;四&#xff09;面向对象&#xff1a; 12、枚举类&#xff1a; &#xff08;1&#xff09;概述&#xff1a; &#xff08;2&#xff09;枚举类的定义格式&#xff1a; &#xff08;3&#xff09;编译与反编译&#xff1a; &#xff08;4&#xff09;Enum类…
阅读更多...
第二十一天-OLED显示实验

第二十一天-OLED显示实验

一、OLED显示原理1、OLED名词解释OLED可以自发光&#xff0c;无需背光光源。2、正点原子OLED模块模块总体概述模块接口模式选择MCU与模块外部连接8080并口读写过程OLED显存因为要进行显示&#xff0c;所以需要有显存。显存容量为128 x 8 byte&#xff0c;一个点用一位表示。SSD…
阅读更多...
会议系统核心流程详解：创建、加入与消息交互

会议系统核心流程详解：创建、加入与消息交互

一、系统架构概览 会议系统采用"主进程线程池进程池"的分层架构&#xff0c;实现高并发与业务隔离&#xff1a; #mermaid-svg-fDJ5Ja5L3rqPkby0 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-fDJ5Ja5L3r…
阅读更多...
Spring 创建 Bean 的 8 种主要方式

Spring 创建 Bean 的 8 种主要方式

Spring&#xff08;尤其是 Spring Boot&#xff09;提供了多种方式来让容器创建和管理 Bean。Component、Configuration Bean、EnableConfigurationProperties 都是常见方式。 下面我为你系统地梳理 Spring 创建 Bean 的所有主要方式&#xff0c;并说明它们的使用场景和区别。…
阅读更多...
React 第七十节 Router中matchRoutes的使用详解及注意事项

React 第七十节 Router中matchRoutes的使用详解及注意事项

前言 matchRoutes 是 React Router v6 提供的一个核心工具函数&#xff0c;主要用于匹配路由配置与当前路径。它在服务端渲染&#xff08;SSR&#xff09;、数据预加载、权限校验等场景中非常实用。下面详细解析其用法、注意事项和案例分析&#xff1a; 1、基本用法 import { m…
阅读更多...
iSCSI服务配置全指南（含服务器与客户端）

iSCSI服务配置全指南（含服务器与客户端）

iSCSI服务配置全指南&#xff08;含服务器与客户端&#xff09;一、iSCSI简介 1. 概念 互联网小型计算机系统接口&#xff08;Internet Small Computer System Interface&#xff0c;简称iSCSI&#xff09;是一种基于TCP/IP的协议&#xff0c;其核心功能是通过IP网络仿真SCSI高…
阅读更多...
堆（Heap）：高效的优先级队列实现

堆（Heap）：高效的优先级队列实现

什么是堆&#xff1f;堆是一种特殊的完全二叉树&#xff0c;满足以下性质&#xff1a;堆序性&#xff1a;每个节点的值与其子节点满足特定关系最小堆&#xff1a;父节点 ≤ 子节点&#xff08;根最小&#xff09;最大堆&#xff1a;父节点 ≥ 子节点&#xff08;根最大&#xf…
阅读更多...
朝花夕拾(四) --------python中的os库全指南

朝花夕拾(四) --------python中的os库全指南

目录 Python os模块完全指南&#xff1a;从基础到高阶文件操作 1. 引言&#xff1a;为什么需要os模块&#xff1f; 1.1 os模块的重要性 1.2 适用场景 1.3 os模块的"瑞士军刀"特性 2. os模块基础功能 2.1 文件与目录操作 2.1.1 核心方法介绍 2.1.2 避坑指南 …
阅读更多...
uniappx 安卓端本地打包的一些总结

uniappx 安卓端本地打包的一些总结

本人之前没用过android studio&#xff0c;因为有打包到安卓端的需求&#xff0c;所以有了这篇文章。下面一些内容不正常工作&#xff0c;也不报错&#xff0c;是很烦的&#xff0c;根本不知道是哪里出了问题。比如对应的aar包没有引入。或者没有注册信息。 在实现过程中我遇到…
阅读更多...
AUTOSAR进阶图解==＞AUTOSAR_SWS_UDPNetworkManagement

AUTOSAR进阶图解==＞AUTOSAR_SWS_UDPNetworkManagement

AUTOSAR UDP网络管理详解 基于AUTOSAR标准的UDP网络管理模块架构分析与实现指南目录 1. 概述2. UDP网络管理架构 2.1 整体架构图2.2 架构组件详解 3. UDP网络管理状态机 3.1 状态机图3.2 状态详解 4. UDP网络管理操作序列 4.1 序列图4.2 操作流程详解 5. UDP网络管理配置模型 …
阅读更多...
AI搜索引擎下的内容优化新范式：GEO的关键技术解析

AI搜索引擎下的内容优化新范式：GEO的关键技术解析

摘要&#xff1a; 生成式AI搜索引擎的崛起&#xff0c;催生了GEO&#xff08;Generative Engine Optimization&#xff09;这一新的优化领域。本文将深入剖析GEO背后的关键技术&#xff0c;包括深度语义理解、结构化内容生成、以及AI算法的适配性&#xff0c;旨在为品牌在AI时代…
阅读更多...
Java Lambda表达式是什么，怎么用

Java Lambda表达式是什么，怎么用

这种代码是什么&#xff0c;怎么阅读/*** 批量插入** param entityList ignore* param batchSize ignore* return ignore*/Transactional(rollbackFor Exception.class)Overridepublic boolean saveBatch(Collection<T> entityList, int batchSize) {String sqlStateme…
阅读更多...
集成运算放大器（反向加法，减法）

集成运算放大器（反向加法，减法）

反向加法电路原理&#xff1a;示波器显示&#xff1a;结论&#xff1a;输出电压-&#xff08;R4/R1*V1R4/R2*V2R4/R3*V3&#xff09;。平衡电阻R4等于R1和R2和R3的并联电压。减法运算电路原理&#xff1a;结论&#xff1a;减法运算电路分为三种不同情况&#xff0c;第一种情况为…
阅读更多...
Maven入门到精通

Maven入门到精通

目录 一&#xff0c;Maven概述 1.1介绍 1.2安装 1.3Maven生命周期和插件 1.4Maven的坐标的本地仓库的存储地址 二&#xff0c;依赖管理 2.1依赖管理——依赖范围 2.2依赖管理——添加依赖 获取依赖坐标 依赖添加后的操作 2.3依赖管理——依赖传递 2.4依赖管理——依…
阅读更多...
最新文章

Copyright @ 2022~2023