发布于2026-07-21 阅读(0)
扫一扫,手机访问
在ES6正式登场之前,Ja vaScript开发者的日常,基本就是命令式编程(IP)的天下。从ES6开始,情况发生了变化。受Python和Ruby的影响,函数式编程(FP)逐渐在JS社区流行起来,这一点,学过React的同学应该深有体会。
那么,这两种范式到底有什么区别?我们先从一个小例子切入。
假设我们要打印一个数组的所有元素。
如果用命令式思维,直觉会告诉我们:
const print = function(arr) {
for(let i=0; i
这里的关键是“怎么做”——循环、索引、逐个打印,每一步都清清楚楚。
函数式风格则完全不同。它更倾向于“做什么”,把功能拆解开来:
const forEach = function (arr, act) {
for(let i=0; i
仔细对比一下,两者的差别其实挺明显的。
函数式编程的核心目标,是描述数据以及数据上的转换。换句话说,它更关心“数据怎么流、怎么变”,而不是“程序该按什么顺序执行”。命令式编程则恰恰相反,执行顺序几乎就是程序的生命线。
此外,函数式编程中,函数和数据的集合是主角。我们可以自由地使用函数和递归,而命令式编程则更依赖循环、赋值和条件判断。
还有一个关键点:函数式编程极力避免函数副作用和可变数据。它不会去修改传入函数的参数,如果确实需要基于输入返回一个结果,通常的做法是制作一个副本,然后返回修改后的副本。这其实是一种非常安全、可预测的编程方式。
ES2015之后的Ja vaScript,让函数式编程变得前所未有的顺手。
举个例子,找数组中的最小值。
命令式写法:
let findMin = function(arr) {
let min = arr[0];
for(let i=0; i arr[i]) {
min = arr[i];
}
}
return min;
}
函数式写法,借助Math.min和扩展运算符:
const min = function(arr) {
return Math.min(...arr);
};
如果再配合箭头函数,甚至可以进一步简化:
const min = arr => Math.min(...arr);
这不仅仅是代码变短了,更关键的是,思维方式从“如何迭代”转向了“想要什么结果”。
这三个方法,可以说是函数式编程的基石。没有它们,很多函数式操作会变得很别扭。
比如,转换一个数据集合到另一个集合。
命令式做法:
const dayOfWeek = [
{name: "Monday", value: 1},
{name: "Tuesday", value: 2},
{name: "Wednesday", value: 3},
];
let dayOfWeekVal = [];
for(let i=0; i
用ES2015+的map:
const dayOfWeekVal = dayOfWeek.map(day => day.value);
再比如,筛选出数组中的正数。
命令式:
const poNum = function(arr) {
let po = [];
for(let i=0; i= 0) {
po.push(arr[i]);
}
}
return po;
}
函数式,配合filter:
const poNum = arr => arr.filter(num => (num >= 0));
最后看一个reduce的典型用法——拼接数组。
命令式:
const mergeArr = function(arrays) {
let newArr = [];
let k = 0;
for(let i=0; i
函数式,用reduce:
const mergeArr = function(arrays) {
return arrays.reduce(
function(p, n) {
return p.concat(n);
}
);
};
甚至还可以进一步简化成一行:
const mergeArr = (...arrays) => [].concat(...arrays);
当然,代码越短,可读性有时也会打个折扣,但不可否认的是,这种表达方式非常直接——它告诉读者“我要把多个数组合并成一个”,而不是“我要嵌套循环、推入新数组”。
从命令式到函数式,不仅仅是语法层面的变化,更是一种思维方式的转变。它要求开发者不再把注意力放在“如何一步步实现”上,而是放在“数据应该如何变换”上。对于习惯了命令式编程的人来说,刚开始可能会有些不适应,但一旦习惯了这种表达方式,你会发现代码的可维护性和可测试性都会上一个台阶。
售后无忧
立即购买>office旗舰店
售后无忧
立即购买>office旗舰店
售后无忧
立即购买>office旗舰店
售后无忧
立即购买>office旗舰店
正版软件
正版软件
正版软件
正版软件
正版软件
1
2
3
7
8