javascript的高阶函数有哪些_map和filter如何使用?

JavaScript中最常用、最实用的高阶函数是map、filter和reduce:map一对一变换生成等长新数组,filter按条件筛选生成子集,reduce累积计算返回单个值,三者不可变、可链式调用。

javascript的高阶函数有哪些_map和filter如何使用?

JavaScript 中最常用、最实用的高阶函数就是 mapfilterreduce。它们都属于数组方法,不修改原数组,而是返回一个新数组或新值,写法简洁、逻辑清晰,是函数式编程的核心工具

map:对每个元素做变换,生成新数组

map 的作用是“一对一映射”——遍历原数组,把每个元素按规则处理后,放进一个新数组里。

回调函数接收三个参数:当前元素索引原数组,通常只用第一个必须有 return,返回值会成为新数组对应位置的元素原数组完全不变,新数组长度和原数组一致

例子:

const nums = [1, 2, 3, 4];
const doubled = nums.map(n => n * 2); // [2, 4, 6, 8]

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

const users = [{name: ‘Alice’}, {name: ‘Bob’}];
const names = users.map(u => u.name); // [‘Alice’, ‘Bob’]

filter:按条件筛选,生成子集数组

filter 的作用是“保留符合条件的元素”,它像一道筛子,只让满足条件的元素通过。

回调函数必须返回布尔值:true 表示留下false 表示丢弃新数组长度 ≤ 原数组,空数组或全不满足时返回空数组 []不对空数组执行,也不改变原数组

例子:

const scores = [85, 92, 56, 78, 99];
const passed = scores.filter(s => s >= 60); // [85, 92, 78, 99]

const words = [‘apple’, ‘dog’, ‘banana’, ‘cat’];
const longWords = words.filter(w => w.length > 3); // [‘apple’, ‘banana’]

reduce:把数组“压缩”成一个值

reduce 不生成数组,而是把所有元素逐步累积成一个结果,比如求和、找最大值、扁平化、对象分组等。

回调函数接收四个参数:累加器(上一次结果)当前元素索引原数组第二个参数是初始值(常写 0 或 {} 或 []),建议始终显式传入,避免隐式转换出错

例子:

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, n) => acc + n, 0); // 10

const arr = [‘a’, ‘b’, ‘c’];
const str = arr.reduce((acc, c) => acc + c, ”); // ‘abc’

基本上就这些。map 负责“变”,filter 负责“选”,reduce 负责“合”。三者可链式调用,比如先 filter 再 map 最后 reduce,一气呵成完成复杂数据处理。

以上就是javascript的高阶函数有哪些_map和filter如何使用?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1541907.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 13:45:01
下一篇 2025年12月21日 13:45:13

相关推荐

  • 如何实现继承_javascript中类的继承方式有哪些?

    JavaScript类继承通过extends实现,底层基于原型链;子类需在constructor中调用super()初始化父类this,super可传参并支持方法重写、静态方法及内置类继承。 JavaScript 中类的继承主要通过 extends 关键字 实现,这是 ES6 引入的语法糖,底层仍基…

    2025年12月21日
    000
  • Web应用中视频播放的内存优化策略:动态设置与清除src属性

    在web应用中,频繁播放视频可能导致内存占用过高,影响设备性能。本文将介绍一种有效的内存优化策略,通过动态管理html `video` 元素的 `src` 属性,在视频播放时加载源,在暂停或关闭时及时清除源,从而释放系统资源。这种方法能显著减少ram消耗,提升用户体验,并避免在低内存设备上出现卡顿或…

    2025年12月21日
    000
  • 解决Terser优化中移除全局函数的问题:策略与实践

    在使用terser压缩javascript代码时,函数可能因被误判为“死代码”而被移除,即使它们被html或其他外部脚本调用。即使设置`dead_code: false`或在模块模式下,terser的静态分析也可能无法识别这些外部引用。本文将详细阐述这一问题的原因,并提供一个稳健的解决方案:通过显式…

    2025年12月21日
    000
  • JavaScript中如何判断数据类型_typeof的局限性

    typeof对基本类型可靠但对null、数组、Date等均返回”object”,核心局限性;最可靠方案是Object.prototype.toString.call(),可精确识别所有内置类型。 JavaScript 中判断数据类型,typeof 是最常用的操作符,但它对某些…

    2025年12月21日
    000
  • javascript如何实现国际化_如何支持多语言网站

    JavaScript国际化核心是分离语言内容与逻辑代码并动态加载翻译资源,用JSON管理多语言文案、Intl API处理格式化、运行时切换并持久化用户偏好。 JavaScript 实现国际化(i18n)的核心是**分离语言内容与逻辑代码,按用户语言环境动态加载对应翻译资源**。不依赖后端时,前端可完…

    2025年12月21日
    000
  • ElectronJS IPC 事件监听器管理:避免重复触发与数据混淆

    本文深入探讨 ElectronJS 应用中 ipcRenderer.on 事件监听器重复注册导致的问题,特别是在多次文件选择等场景下,旧监听器未清理可能引发数据混淆和重复操作。教程将提供两种核心解决方案:使用 ipcRenderer.once 实现单次监听,或通过 ipcRenderer.remov…

    2025年12月21日
    000
  • JavaScript await 行为与事件循环中的 ‘Tick’ 概念辨析

    本文深入探讨了javascript中`await`关键字的工作机制,特别是在事件循环和微任务调度方面的行为。我们将解析`await`如何暂停异步函数执行并将后续代码推入微任务队列,并阐明微任务在当前事件循环迭代中被处理的原理。文章还将辨析mdn和node.js文档中对“tick”概念的不同定义所导致…

    2025年12月21日
    000
  • Prisma关系查询:深度解析如何通过外键获取关联字段详情

    本文旨在详细指导如何在Prisma中通过外键关系高效地查询并获取关联实体的详细字段,而非仅仅获取外键ID。我们将通过一个实际的用户与朋友关系模型,演示如何利用Prisma的嵌套select语句,从多对多关系中的连接表进一步深入,获取关联用户的完整信息,从而优化数据查询与展示。 1. 理解Prisma…

    2025年12月21日
    000
  • SolidJS信号更新对象/数组不触发UI重绘的原理与解决方案

    本文深入探讨SolidJS中信号(signal)更新数组或对象时UI不刷新的常见问题。核心原因在于SolidJS的信号默认进行引用相等性检查,当直接修改现有对象或数组而不创建新引用时,信号认为值未改变。教程将提供两种主要解决方案:通过创建新引用实现不可变更新,或通过配置信号禁用相等性检查,确保UI正…

    好文分享 2025年12月21日
    000
  • 什么是JavaScript的反射机制_Reflect API提供了哪些元编程能力?

    JavaScript 的反射机制是通过 Reflect API 显式暴露对象底层操作(如[[Get]]、[[Set]])的元编程工具,配合 Proxy 实现可控拦截;其方法与 Proxy trap 一一对应,统一返回布尔值,提供更规范、安全的对象操作接口。 JavaScript 的反射机制不是传统面…

    2025年12月21日
    000
  • Nuxt 3 useFetch 与 Cookie 头部:客户端请求的最佳实践

    本文深入探讨了在 nuxt 3 中使用 `usefetch` 进行数据请求时,如何正确地传递 `cookie` 头部信息。我们将重点介绍 `userequestheaders` 这一 nuxt 3 提供的强大工具,解释其在服务器端渲染 (ssr) 和客户端请求中的作用,并提供详细的示例代码和最佳实践…

    2025年12月21日
    000
  • 解决Bootstrap 5 Toast不显示:确保正确初始化目标元素

    本教程旨在解决Bootstrap 5中Toast组件不显示的问题,即使开发者工具中没有错误。核心原因在于Toast实例的初始化目标元素不正确。文章将详细解释如何正确选取带有`.toast`类的元素进行初始化,并提供完整的示例代码和最佳实践,确保您的Toast组件能够按预期工作。 1. 问题现象与初步…

    2025年12月21日
    000
  • React中父子组件数据传递与状态同步:实现子组件操作父组件列表数据更新

    本文详细探讨react中父子组件间的数据传递与状态同步机制,重点解决子组件修改父组件数组数据并更新视图的问题。文章通过两种主要方法——传递父组件的状态设置函数和传递特定操作的回调函数——演示了如何实现子组件删除列表项后,父组件状态随之更新,并强调了组件间职责分离的最佳实践。 引言:React组件通信…

    2025年12月21日 好文分享
    000
  • javascript的ES6是什么_它带来了哪些新特性?

    ES6是JavaScript的重大标准升级,核心特性包括:1. let/const提供块级作用域;2. 箭头函数简化语法且不绑定this;3. 模板字符串支持多行与变量插值;4. 解构赋值便捷提取数据;5. import/export实现模块化管理。 ES6(全称 ECMAScript 2015)是…

    2025年12月21日
    000
  • 什么是JavaScript的代码压缩_它如何减少文件大小呢

    JavaScript代码压缩通过删除注释、空格、换行符,缩短变量函数名,简化表达式,合并语句,移除未使用代码(Tree Shaking)等方式减小文件体积,保持功能不变,提升加载速度。 JavaScript代码压缩,就是把源代码里那些对运行没用但对人友好的部分去掉或简化,让文件变小、加载更快,同时保…

    2025年12月21日
    000
  • JavaScript数组动态追加元素:避免重复初始化陷阱

    本文将详细阐述如何在JavaScript中正确地实现数组元素的动态追加,尤其是在多次函数调用场景下,避免因数组重复初始化而导致的常见问题。文章通过具体代码示例,深入解析了将数组声明在函数外部作用域的重要性,以确保元素能够持续累加而非被替换,从而构建出健壮的应用逻辑。 在JavaScript开发中,我…

    2025年12月21日
    000
  • Javascript中的WebGL是什么?

    WebGL是浏览器中基于OpenGL ES的GPU加速JavaScript图形接口,需手动管理顶点、着色器、缓冲区等底层资源,区别于CPU渲染的Canvas 2D,适用于高性能3D应用;Three.js等库是其高级封装,但调试优化仍需理解WebGL原理。 WebGL 是浏览器里直接调用 GPU 渲染…

    2025年12月21日
    000
  • javascript如何工作_它的执行机制是怎样的?

    JavaScript执行机制核心是调用栈、任务队列和事件循环协同工作:调用栈执行同步代码(LIFO结构),任务队列分宏任务(如setTimeout)和微任务(如Promise.then),事件循环按“宏任务→微任务→渲染→下一宏任务”循环调度。 JavaScript 是单线程、非阻塞、基于事件循环的…

    2025年12月21日
    000
  • 解决HTML中JavaScript与EmailJS集成时DOM未加载问题的教程

    本文旨在解决前端开发中常见的javascript脚本在html文档加载前执行导致dom元素无法获取的问题,尤其是在使用emailjs发送表单数据时。我们将详细探讨如何通过“标签的`defer`或`async`属性,确保脚本在dom完全构建后运行,从而成功捕获表单事件并调用emailjs服…

    2025年12月21日
    000
  • 在NestJS中将纯时间字符串转换为Date类型对象的指南

    本文详细介绍了在NestJS或其他JavaScript环境中,如何将不包含日期信息的纯时间字符串(如“HH:mm:ss”)转换为完整的`Date`类型对象。核心方法是利用JavaScript的`Date`对象,结合一个基准日期(通常是当前日期),并通过`setHours`方法设置指定的小时、分钟和秒…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信