0

0

什么是高阶函数_JavaScript中map和filter如何使用

夜晨

夜晨

发布时间:2026-01-07 20:53:19

|

598人浏览过

|

来源于php中文网

原创

高阶函数本质是接受函数为参数或返回函数的函数,是函数式编程基石;map严格按原数组长度返回新数组,不修改原数组;filter依据回调返回值的真值性筛选元素,保持原始顺序。

什么是高阶函数_javascript中map和filter如何使用

高阶函数在 JavaScript 中的本质是什么

高阶函数不是语法糖,而是指「接受函数作为参数」或「返回函数」的函数。它本身不特殊,但它是函数式编程的基石——mapfilterreduce 全是高阶函数,因为它们都接收一个回调函数作为参数。

注意:不是所有带函数参数的函数都叫高阶函数(比如 setTimeout(fn, 100) 是,但 JSON.stringify(obj, replacer) 中的 replacer 是可选回调,也符合定义),关键看是否「以函数为一等公民来使用」。

map 的核心行为和常见误用

map 只做一件事:对数组每个元素调用回调函数,**原样返回一个新数组**,长度与原数组严格一致。它不修改原数组,也不跳过元素。

  • 如果你需要改变数组结构(比如扁平化、合并对象),别硬套 map,考虑 flatMapreduce
  • 如果回调里写了 return undefined 或没写 return,对应位置会变成 undefined,不是被过滤掉
  • map 不会跳过稀疏数组的空位,但会保留它们(例如 [1, , 3].map(x => x * 2) 返回 [2, , 6]
const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2); // [2, 4, 6]
const withIndex = nums.map((n, i) => `${i}: ${n}`); // ['0: 1', '1: 2', '2: 3']

filter 的判断逻辑和边界情况

filter 的回调函数必须返回布尔值(或能转为布尔的值),true 表示“留下”,false/0/null/undefined/'' 都表示“过滤掉”。它只关心返回值的真值性,不关心具体类型。

百宝箱
百宝箱

百宝箱是支付宝推出的一站式AI原生应用开发平台,无需任何代码基础,只需三步即可完成AI应用的创建与发布。

下载

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

  • 别在 filter 回调里做副作用(如 console.log 或修改外部变量),这不是它的职责
  • filter 不会改变原数组,也不会影响索引顺序——留下的元素保持原始顺序
  • 空数组调用 filter 总是返回空数组,不管回调怎么写
const words = ['apple', 'banana', 'cherry'];
const longWords = words.filter(w => w.length > 6); // ['banana', 'cherry']
const hasA = words.filter(w => w.includes('a')); // ['apple', 'banana', 'cherry']
const falsyCheck = [0, 1, '', 'hello', null, undefined].filter(Boolean); // [1, 'hello']

map 和 filter 组合使用的实际意义

单独用 mapfilter 很简单,但真实场景中它们常连用——比如先过滤再转换,或先转换再过滤。这种链式调用清晰表达了数据处理流程,且每次返回新数组,便于调试和复用。

注意性能:连续调用 mapfilter 会遍历多次数组;如果数据量极大(比如上万项),可考虑用 reduce 合并逻辑,但可读性会下降。

const users = [
  { name: 'Alice', active: true, score: 85 },
  { name: 'Bob', active: false, score: 92 },
  { name: 'Charlie', active: true, score: 76 }
];
<p>// 先 filter 再 map:获取活跃用户的姓名大写
const activeNames = users
.filter(u => u.active)
.map(u => u.name.toUpperCase()); // ['ALICE', 'CHARLIE']

真正容易被忽略的是:mapfilter 的回调函数里,this 默认是 undefined(严格模式下),如果依赖上下文,得显式绑定或用箭头函数。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

455

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

546

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

335

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

82

2025.09.10

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

golang map内存释放
golang map内存释放

本专题整合了golang map内存相关教程,阅读专题下面的文章了解更多相关内容。

77

2025.09.05

golang map相关教程
golang map相关教程

本专题整合了golang map相关教程,阅读专题下面的文章了解更多详细内容。

40

2025.11.16

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

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

76

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号