0

0

什么是javascript函数式编程【教程】

紅蓮之龍

紅蓮之龍

发布时间:2026-01-29 14:39:02

|

551人浏览过

|

来源于php中文网

原创

JavaScript函数式编程是用高阶函数、闭包和不可变数据思维组织代码的风格;纯函数要求相同输入必得相同输出且无副作用;map用于转换、filter用于筛选、reduce用于聚合;箭头函数非银弹,需警惕this、隐式返回及异步问题。

什么是javascript函数式编程【教程】

JavaScript 函数式编程不是一套独立语法,而是用语言现有能力(如高阶函数、闭包、不可变数据思维)去组织代码的一种风格。它不强制你写成某种形式,但一旦你开始避免修改变量、用 map 替代 for 循环、把逻辑拆成纯函数,你就已经在实践了。

纯函数怎么写,为什么 return 前不能改参数

纯函数指:相同输入永远返回相同输出,且不产生副作用(比如不修改传入的数组、不调用 console.log、不发请求)。常见错误是以为“没写 return 就是纯的”,其实改了入参就破功了:

const badAddOne = arr => {
  arr.push(1); // ❌ 修改了原数组 → 不纯
  return arr;
};

const goodAddOne = arr => [...arr, 1]; // ✅ 返回新数组,原数组不变

  • pushsortsplice 等会改原数组的方法,在函数式里基本要换成 concat[...arr].sort()slice + concat
  • 对象同理:Object.assign({}, obj, {x: 1}){...obj, x: 1},别用 obj.x = 1
  • 纯函数利于测试和缓存(比如用 memoize 包裹),也方便做时间旅行调试(如 Redux DevTools)

map/filter/reduce 什么时候该用哪个

这三个是函数式操作数组的主力,选错会导致逻辑绕、性能差或 bug:

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

家电小商城网站源码1.0
家电小商城网站源码1.0

家电公司网站源码是一个以米拓为核心进行开发的家电商城网站模板,程序采用metinfo5.3.9 UTF8进行编码,软件包含完整栏目与数据。安装方法:解压上传到空间,访问域名进行安装,安装好后,到后台-安全与效率-数据备份还原,恢复好数据后到设置-基本信息和外观-电脑把网站名称什么的改为自己的即可。默认后台账号:admin 密码:132456注意:如本地测试中127.0.0.1无法正常使用,请换成l

下载
  • map:你要“把每个元素转成另一个值”,比如 [1,2,3].map(x => x * 2)[2,4,6];别用来做“筛选”或“累加”
  • filter:只保留满足条件的项,返回新数组,比如 users.filter(u => u.active);别在回调里写 push 或改状态
  • reduce:聚合计算(求和、分组、扁平化),但容易写过重;简单场景优先用 map+filter 组合,比如想“取所有名字再转大写”,不用 reduce 模拟 map

注意:reduce 初始值必须显式传,否则第一个元素当初始值——空数组会报错,而 map/filter 对空数组安全返回空数组。

为什么箭头函数不是函数式编程的银弹

箭头函数常被当作“函数式标志”,但它只是语法糖,不解决纯度问题。反而容易踩坑:

  • 没有自己的 this,在对象方法中用箭头函数可能让 this 指向意外(比如事件监听器里想访问实例属性却拿不到)
  • 隐式返回只对单表达式生效;多语句必须加 {}return,否则返回 undefined,比如 arr.map(x => { console.log(x); x * 2 }) 实际返回 [undefined, undefined]
  • 异步场景下,async 箭头函数返回的是 Promise,不是值——这跟函数式强调“可组合性”冲突,需配合 thenawait 处理,不能直接塞进 map

真正难的不是写出 const add = (a, b) => a + b,而是面对一个已有 class、一堆 this.statesetState 的 React 组件时,如何把副作用(API 调用、DOM 更新)和纯逻辑(数据转换、校验)清晰切开。那才是函数式思维落地最卡的地方。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
sort排序函数用法
sort排序函数用法

sort排序函数的用法:1、对列表进行排序,默认情况下,sort函数按升序排序,因此最终输出的结果是按从小到大的顺序排列的;2、对元组进行排序,默认情况下,sort函数按元素的大小进行排序,因此最终输出的结果是按从小到大的顺序排列的;3、对字典进行排序,由于字典是无序的,因此排序后的结果仍然是原来的字典,使用一个lambda表达式作为key参数的值,用于指定排序的依据。

391

2023.09.04

c语言const用法
c语言const用法

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

531

2023.09.20

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

397

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

575

2023.08.10

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

469

2024.01.03

python中class的含义
python中class的含义

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

13

2025.12.06

go语言闭包相关教程大全
go语言闭包相关教程大全

本专题整合了go语言闭包相关数据,阅读专题下面的文章了解更多相关内容。

137

2025.07.29

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

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

75

2025.09.05

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

1

2026.01.29

热门下载

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

精品课程

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

共58课时 | 4.3万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

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

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