0

0

JavaScript高阶函数是什么_如何使用map、filter、reduce【教程】

幻影之瞳

幻影之瞳

发布时间:2026-01-20 19:10:03

|

373人浏览过

|

来源于php中文网

原创

高阶函数是接受函数作为参数或返回函数的函数,如map、filter、reduce;map生成新数组,filter按布尔判断筛选,reduce需谨慎设置初始值以避免错误。

javascript高阶函数是什么_如何使用map、filter、reduce【教程】

高阶函数就是接受函数作为参数或返回函数的函数

JavaScript 里 mapfilterreduce 都是典型的高阶函数——它们本身是函数,而且必须传入一个函数(回调)才能工作。这不是语法糖,而是函数式编程的核心机制:把“做什么”和“怎么做”分离。比如 arr.map(fn) 不关心 fn 怎么实现,只负责按顺序调用它并收集返回值。

map 的关键不是遍历,而是生成新数组

map 的唯一职责是:对原数组每个元素调用一次回调,把每次返回值组成一个**长度相同的新数组**。它不修改原数组,也不会跳过空位(稀疏数组中 undefined 仍会触发回调)。

  • 回调函数默认接收三个参数:itemindexarray,但多数场景只用第一个
  • 如果回调返回 undefined 或没写 return,新数组对应位置就是 undefined
  • 不能用 map 替代 forEach 做纯副作用操作(比如发请求、改 DOM),因为它的设计意图是转换,不是执行
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // [2, 4, 6]
const withIndex = numbers.map((n, i) => `${i}:${n}`); // ['0:1', '1:2', '2:3']

filter 的判断逻辑必须明确返回布尔值

filter 看似简单,但常见错误是误以为“真值”就代表“保留”。实际上它只认 true / false,其他值会被强制转布尔——而对象、非空字符串、非零数字都是真值,容易导致意外保留。

纳米漫剧流水线
纳米漫剧流水线

360推出的国内首个工业级AI漫剧生产平台

下载
  • 回调返回 true 时保留当前项,false 时丢弃
  • 避免直接返回对象或数组:arr.filter(item => item.profile) 可能出错,应写成 arr.filter(item => item.profile != null)
  • filter 不改变原数组,也不保证返回数组的引用是否复用(不要依赖 === 判断)
const users = [{id: 1, active: true}, {id: 2, active: false}, {id: 3}];
const activeUsers = users.filter(u => u.active === true); // 明确比较

reduce 容易错在初始值和累加器类型不匹配

reduce 是最灵活也最容易出错的。核心问题在于:第一次调用回调时,累加器(accumulator)的值取决于是否传了初始值。没传时,它取数组第一个元素,回调从第二个开始执行;传了则从第一个开始。

立即学习Java免费学习笔记(深入)”;

  • 处理空数组时,**必须提供初始值**,否则抛 TypeError: Reduce of empty array with no initial value
  • 初始值类型要和预期返回值一致:求和用 0,拼接字符串用 '',累积对象用 {}
  • 别在回调里修改传入的初始对象(比如用 {} 当初始值,又在里面直接赋值 acc[key] = val),这会污染原对象
const nums = [1, 2, 3];
const sum = nums.reduce((acc, curr) => acc + curr, 0); // 正确:初始值 0
const grouped = nums.reduce((acc, n) => {
  acc[n % 2 === 0 ? 'even' : 'odd'].push(n);
  return acc;
}, { even: [], odd: [] }); // 初始值必须是完整结构

实际写业务逻辑时,reduce 的可读性常不如链式调用 filter + map,除非你确实需要单次遍历完成聚合。三者嵌套时,注意执行顺序和中间数组创建开销——这不是性能瓶颈的主因,但过度嵌套会让调试变困难。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

254

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1089

2024.03.01

php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

266

2025.12.04

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

760

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

221

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1566

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

649

2023.11.24

java读取文件转成字符串的方法
java读取文件转成字符串的方法

Java8引入了新的文件I/O API,使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java,可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中,你需要将文件路径替换为你的实际文件路径,并且可能需要处理可能的IOException异常。想了解更多java的相关内容,可以阅读本专题下面的文章。

1208

2024.03.22

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

3

2026.03.11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号