❮ ❯

JavaScript - 函数式编程

编程范式主要有两种:命令式编程范式和声明式编程范式。函数式编程是声明式编程范式的子类型。"范式"一词指的是解决特定问题的方法。

函数式编程已经使用了几十年，但直到 2015 年 JavaScript 的最后一个主要修订版本发布后才开始流行起来。使用函数式编程有很多好处，我们将在本教程中讨论。

函数式编程的特点

函数式编程的工作原理类似于数学函数。它允许开发人员基于函数求值来开发软件。这意味着程序员可以将代码分解成我们可以称之为函数的小部分，从而易于评估和测试代码。本教程涵盖以下函数式编程概念

纯函数
代码可读性

JavaScript 中的纯函数

在 JavaScript 中，我们可以编写纯函数。简单来说，纯函数接收值作为参数，对其进行一些操作，然后返回输出。

纯函数不会与其他函数共享任何变量，也不会使用全局变量。

以下是纯函数的属性

对于给定的输入，纯函数始终返回相同的输出。
纯函数不依赖于任何未作为参数传递给它们的外部状态或变量。
纯函数不会产生任何副作用，例如修改全局变量或更改外部对象的状态。

现在，让我们通过一个例子来理解纯函数。

示例

在下面的例子中，我们创建了名为 pure_func() 的函数，它将值作为参数并将其乘以 2。之后，它会打印该值。用户可以看到，pure_func() 并没有与其他函数共享任何全局变量。

此外，我们可以直接使用 global_var，而无需将其作为纯函数的参数传递。尽管如此，我们还是将其作为参数传递，因为纯函数永远不会共享任何在函数作用域之外声明的变量。

<html>
<body>
<h2>Pure Function Example</h2>
<div id="result"></div>
<script>
let result = document.getElementById('result');
let global_var = 10;
function pure_func(value){
   return value * 2;
}
result.innerHTML = pure_func(5);
</script>
</body>
</html>

JavaScript 中的不变性

不变性是函数式编程的另一个重要概念。简单来说，不变性意味着变量一旦声明，就无法更改其值。在 JavaScript 中，我们可以通过使用 const 关键字来实现不变性。让我们来看一个 JavaScript 中不变性的示例。

示例

在下面的示例中，我们使用 const 关键字声明了变量。我们尝试更改变量的值，由于我们无法更改使用 const 关键字声明的变量的值，因此会引发错误。

<html>
<body>
<h2>Immutability Example</h2>
<div id="result"></div>
<script>
let result = document.getElementById('result');
const value = 10;
value = 20;
result.innerHTML = value;
</script>
</body>
</html>

输出

以下是上述代码的输出

TypeError: Assignment to constant variable.

运行上述代码时，由于无法更改使用 const 关键字声明的变量的值，因此会抛出错误。

代码可读性

由于我们在函数式编程中用函数编写所有逻辑，这使得我们的代码更具可读性。例如，在其他编程语言中，我们使用 for 或 while 循环来迭代数组。但函数式编程允许我们使用 for-of 循环，这不仅提高了代码的可读性，还能告诉其他开发人员我们想要迭代数组并对每个数组元素执行某些操作。

让我们看另一个例子。假设我们要从数组中过滤一些值。在其他编程方法中，我们会手动编写一个函数来过滤值，但在函数式编程方法中，我们可以使用 filter() 方法，演示如何根据特定逻辑从数组中过滤值。

高阶函数

高阶函数允许我们将函数作为另一个函数的参数传递。例如，我们可以将回调函数作为数组 reduce() 方法的参数传递。在回调函数中，我们可以编写逻辑将数组缩减为单个元素。

让我们看一个高阶函数的示例。

示例

在此示例中，我们使用 reduce() 方法将数组缩减为单个元素，并将回调函数作为参数传递。它代表了高阶函数，因为我们已将函数作为参数传递。

<html>
<body>
<h2>Higher Order Function Example</h2>
<div id="result"></div>
<script>
let result = document.getElementById('result');
let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, val) => acc + val);
result.innerHTML = sum;
</script>
</body>
</html>

我们已经了解了函数式编程方法，以及它的优势和与编程范式的区别。我们了解到，它提供了一种编写可维护、可读且错误更少的代码的方法。

❮ ❯

JavaScript 基础教程

JavaScript 运算符

JavaScript 控制流