了解 JavaScript 函数式编程

简介: 函数式编程(Function Programming, FP) 是编程范式之一。

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第20天,点击查看活动详情


函数式编程(Function Programming, FP) 是编程范式之一。


编程范式即编程规范,编程风格


我们常听听说的编程范式还有:


  • 面向对象:典型的就是 java 语言,目前 javascript 的超集 typescript 也是走这条路线。也就是把事物抽象成程序世界中的类和对象,通过封装、继承和多态来演示事物之间的联系。


  • 面向过程:典型的就是 C 语言。在面向过程程序设计中,问题被看成是一些列需要完成的任务,函数则用于完成这些任务,可以看成一步步升级打怪。


而我们今天要讨论的编程范式 -- 函数式编程把事物和事物直接的联系抽象到程序世界,强调的是函数的计算,对运算过程进行抽象。使用函数进行编程


纯函数



纯函数 指相同的输入永远得到相同的输出,而且没有副作用。


如下: slice 是纯函数,splice 就不是。


let arr = [1, 2, 3];
console.log(arr.slice(0,1)); // 1
console.log(arr.slice(0,1)); // 1
console.log(arr.slice(0,1)); // 1
let another_arr = [3, 4, 5];
console.log(another_arr.splice(0,1)); // 3
console.log(another_arr.splice(0,1)); // 4
console.log(another_arr.splice(0,1)); // 5
复制代码


纯函数是函数编程的重点。函数是函数编程的一等公民。


一等公民,指函数跟其他类型具有相同的地位,也就是说 function 可以当作令一个 function 的参数,也可以作为 function 的返回值,也可以作为变量。


比如:


function demo(cb) {
 cb()
}
function add(x) {
 return function(y) {
   return x + y
 }
}
const val = () => 'jimmy';
复制代码


声明式编程



函数式编程属于声明式编程范式。


声明式编程范式:会描述一些列的操作,但是并不会暴露他们是如何实现的或者数据流是如何传递的。


比如:


let arr = ['hello', 'world', '!']
// 命令式,暴露具体实现
for(let i = 0; i < arr.length; i++) {
  arr[i] = arr[i].toUpperCase()
}
// 声明式,隐藏细节
arr.map(str => str.toUpperCase())
复制代码


引用透明



引用透明(Referential Transparency)指的是一个函数穿传入相同的参数,不管运算多少次,永远会得到相同的值,并且不对外部世界产生任何改变(上面我们已经提到过,就是不产生副作用)。


例子可以参考上面纯函数的例子。


又比如:


function change_style() {
  let dom = document.getElementById('demo');
  dom.style.color = 'red';
}
// change_style 对外界产生的副作用,更改了 dom 的样式
复制代码


不可变性



不可变性,就是数据一旦创建后就不会再改变的,所有对不可变性的数据操作返回的是另一个不可变性的数据。这好比操作 const 定义变量一样。


又比如:


let obj = {
  name: 'jimmy'
}
let person = obj;
person.name = 'Jimmy';
console.log(obj.name); // Jimmy
// 此时,对象 obj.name 数据已经发生了改变(可变)
let obj1 = {
  name: 'jimmy'
}
let person1 = { ...obj, name: 'Jimmy'};
console.log(obj1.name); // jimmy
// 此时,对象 obj.name 数据没发生变化(不可变)
复制代码


好了,我们来总结下函数式编程应该具有的特征:


  • 纯函数
  • 函数是一等公民
  • 声明式编程
  • 引用透明
  • 不可变性


以下面的节流函数应用结束本文:


function throttle(fn) {
  let canRun = true;
  return function() {
    if(!canRun) {
      return;
    }
    canRun = false;
    setTimeout(() => {
      fn.call(this, arguments);
      canRun = true;
    }, 1000)
  }
}



相关文章
|
前端开发 JavaScript 数据处理
深入学习JavaScript ES8函数式编程:特性与实践指南
深入学习JavaScript ES8函数式编程:特性与实践指南
83 0
|
4月前
|
存储 JavaScript 前端开发
JavaScript——函数式编程Functor(函子)
JavaScript——函数式编程Functor(函子)
27 0
|
6月前
|
前端开发 JavaScript 开发者
函数式编程在JavaScript中的应用
【6月更文挑战第10天】本文探讨了函数式编程在JavaScript中的应用,介绍了函数式编程的基本概念,如纯函数和不可变数据。文中通过示例展示了高阶函数、不可变数据的使用,以及如何编写纯函数。此外,还讨论了函数组合和柯里化技术,它们能提升代码的灵活性和可重用性。掌握这些函数式编程技术能帮助开发者编写更简洁、可预测的JavaScript代码。
|
7月前
|
JavaScript 前端开发
JavaScript 的数组方法 map()、filter() 和 reduce() 提供了函数式编程处理元素的方式
【5月更文挑战第11天】JavaScript 的数组方法 map()、filter() 和 reduce() 提供了函数式编程处理元素的方式。map() 用于创建新数组,其中元素是原数组元素经过指定函数转换后的结果;filter() 则筛选出通过特定条件的元素生成新数组;reduce() 将数组元素累计为单一值。这三个方法使代码更简洁易读,例如:map() 可用于数组元素乘以 2,filter() 用于选取偶数,reduce() 计算数组元素之和。
52 2
|
7月前
|
JavaScript 前端开发 测试技术
JavaScript中的函数式编程:纯函数与高阶函数的概念解析
【4月更文挑战第22天】了解JavaScript中的函数式编程,关键在于纯函数和高阶函数。纯函数有确定输出和无副作用,利于预测、测试和维护。例如,`add(a, b)`函数即为纯函数。高阶函数接受或返回函数,用于抽象、复用和组合,如`map`、`filter`。函数式编程能提升代码可读性、可维护性和测试性,帮助构建高效应用。
|
7月前
|
JavaScript 前端开发 索引
JavaScript函数式编程【进阶】
JavaScript函数式编程【进阶】
61 1
|
7月前
|
存储 JavaScript 前端开发
JavaScript函数式编程[入门]
JavaScript函数式编程[入门]
58 1
|
7月前
|
前端开发 JavaScript 数据处理
深入学习JavaScript ES8函数式编程:特性与实践指南
深入学习JavaScript ES8函数式编程:特性与实践指南
119 0
|
缓存 JavaScript 前端开发
带你读《现代Javascript高级教程》十四、JavaScript函数式编程(1)
带你读《现代Javascript高级教程》十四、JavaScript函数式编程(1)
|
JavaScript 前端开发 测试技术
带你读《现代Javascript高级教程》十四、JavaScript函数式编程(2)
带你读《现代Javascript高级教程》十四、JavaScript函数式编程(2)