讲师中心 微信公众号
AI工具推荐 视频效率加速

JS高阶函数应用_Map与Filter实现

浅婷小哥_2308

浅婷小哥_2308

发布时间:2025-11-17 22:35:02

|

689人浏览过

|

来源于php中文网

原创

高阶函数map和filter用于数组处理,map转换元素并返回新数组,filter筛选符合条件的元素,二者均不修改原数组,可链式调用实现先过滤后映射,提升代码可读性与安全性。

js高阶函数应用_map与filter实现

在JavaScript中,高阶函数是指接受函数作为参数,或者返回一个函数的函数。Map 和 Filter 是数组内置的两个典型高阶函数,广泛用于数据处理。它们让代码更简洁、可读性更强,同时避免了传统的 for 循环带来的副作用。

Map:转换数组元素

Map 方法创建一个新数组,其结果是原数组中的每个元素调用提供的函数后的返回值。

常用于对数组中的每一项进行统一处理,比如类型转换、数值计算或提取特定属性。

  • 不会修改原数组,而是返回一个新数组
  • 新数组长度与原数组相同
  • 适合做数据映射或格式化

示例:将数字数组平方

const numbers = [1, 2, 3, 4];
const squared = numbers.map(x => x * x);
// 结果: [1, 4, 9, 16]

示例:从对象数组中提取属性

const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 }
];
const names = users.map(user => user.name);
// 结果: ['Alice', 'Bob']

Filter:筛选符合条件的元素

Filter 方法创建一个新数组,包含所有通过回调函数测试(返回 true)的元素。

适用于从数组中按条件过滤出需要的数据。

Expanso json-flatten
Expanso json-flatten

通过 CLI 或 MCP 服务器,使用 Expanso Edge 管道扁平化嵌套 JSON 对象。

下载
  • 不改变原数组
  • 返回的新数组长度小于或等于原数组
  • 常配合逻辑判断使用

示例:筛选偶数

const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter(n => n % 2 === 0);
// 结果: [2, 4, 6]

示例:筛选年龄大于25的用户

const adults = users.filter(user => user.age > 25);
// 结果: [{ name: 'Bob', age: 30 }]

组合使用 Map 与 Filter

实际开发中,经常需要先筛选再转换。可以链式调用这两个方法,实现高效的数据处理流程。

示例:获取年龄大于25的用户的姓名大写形式

const result = users
.filter(user => user.age > 25)
.map(user => user.name.toUpperCase());
// 结果: ['BOB']

这种链式操作清晰表达了“先过滤再映射”的意图,逻辑分离,易于维护。

基本上就这些。合理使用 map 和 filter 能显著提升代码质量,减少手动遍历带来的错误风险。

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

更多
c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

2358

2023.09.20

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

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

690

2025.09.05

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

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

343

2025.11.16

golang map原理
golang map原理

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

553

2025.11.17

java判断map相关教程
java判断map相关教程

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

303

2025.11.27

C++类型转换方式
C++类型转换方式

本专题整合了C++类型转换相关内容,想了解更多相关内容,请阅读专题下面的文章。

2542

2025.07.15

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4756

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1415

2023.07.28

Docker Desktop怎么设置端口映射
Docker Desktop怎么设置端口映射

本专题聚焦Docker Desktop容器端口映射与访问配置,整理从创建容器、设置端口绑定到验证本地服务访问的操作流程。针对端口被占用、映射配置错误、容器服务无法访问等情况,也提供相应的检查方向,方便用户完成端口配置。

0

2026.11.03

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn