JavaScript 函数式编程的概念

主要有两种编程范式。命令式编程范式和声明式编程范式。功能性编程是声明式编程范式的一个子类型。范式这个词指的是解决一个特定问题的方法。

函数式编程在过去的几十年里一直在使用，但在2015年JavaScript的最后一个主要修订版本发布后，出现了这种趋势。使用函数式编程有很多好处，我们将在本教程中讨论这些好处。

功能性编程的不同概念及其好处

功能性编程的工作原理是数学函数的工作原理。它允许开发人员在函数评价的基础上开发软件。这意味着程序员可以将代码分解成小部分，我们可以将其称为函数，这使得评估和测试代码变得容易。本教程涵盖了函数式编程的以下概念 –

纯粹的功能
代码的可读性
代码可维护性和更少的错误
高阶函数

JavaScript中的纯函数

纯粹的功能

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

纯函数从不与其他函数共享任何变量或使用全局变量。

以下是纯函数的属性—-。

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

你可以通过下面的例子对纯函数有一个更好的了解。

示例 1

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

另外，我们可以直接使用global_var，而不用把它作为纯函数的参数传递。不过，我们还是把它作为参数传给了纯函数，因为纯函数从不分享任何在函数范围之外声明的变量。

<html>
<body>
   <h2>Pure function in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      let global_Var = 56;
      function pure_func(param) {
         param = param*2;
         output.innerHTML += "The Double value of param is " + param + " <br/>";
      }
      pure_func(global_Var);
      pure_func(30);
   </script>
</body>
</html>

代码的可读性

由于我们在函数式编程中用函数来写所有的逻辑，它使我们的代码更容易阅读。例如，在其他编程语言中，我们使用for或while循环来迭代数组。但函数式编程允许我们使用for-of循环，这使得代码更易读，并告诉其他开发者我们想通过数组进行迭代，并对每个数组元素进行一些操作。

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

示例 2

在下面的例子中，我们用filter()方法来过滤所有可被除以10的值。用户可以看到它看起来很清晰，而且它告诉我们，我们要从数组中过滤一些东西。

现在，看一下过滤值的天真方法。我们用for循环遍历数组，用if语句检查是否可以被10除以，并推送到另一个数组。然而，这两段代码都会得到相同的结果，但第一段代码更具可读性。

<html>
<body>
   <h2>Using the <i> filter() </i> method to filter values from the array</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      // creating the array of values
      let array = [10, 20, 50, 54, 32, 60, 54];
      output.innerHTML += "Original Array: " + array + "<br>"; 
      // using the functional programming approach to filter 
      //all values which are divisible by 10
      let divisibleBy10 = array.filter((ele) => ele % 10 == 0);
      output.innerHTML += "All values divisible by 10: " + divisibleBy10;
      // using the normal approach to filter values
      let filterValues = [];
      for (let i = 0; i < array.length; i++) {
         let ele = array[i];
         if (ele % 10 == 0) {
            filterValues.push(ele);
         }
      }
   </script>
</body>
</html>

代码可维护性和更少的错误

函数式编程使我们能够使我们的代码更具有可维护性。我们都知道，代码重构比编写新的代码要花费更多的时间和成本。同时，开发人员也会在代码重构上花费更多时间。

从上面给出的最后一个例子中，我们可以理解，编写第二种方法来过滤值将会花费更多的时间来理解同伴的想法。因此，如果我们通过函数来执行每一个逻辑，就会使代码更易读和可维护。

同时，我们可以通过使用函数式编程来减少错误。正如我们在例1中所看到的，当我们使用函数式方法时，我们不需要担心作用域和一切。如果任何初学者对范围没有足够的了解，他们就会写出充满bug的代码。

此外，代码的每一部分都有它的范围，我们不需要像面向对象的编程语言那样使用this关键字来指代范围。所以，不使用这个关键字也可以减少bug。

高阶函数

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

示例 3

在这个例子中，我们用reduce()方法将数组减少为一个元素，并将回调函数作为一个参数传递。它代表了高阶函数，因为我们把函数作为一个参数传给了它。

<html>
<body>
   <h2>Using the <i>reduce()</i> method to introduce higher order functions</h2>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
      // creating the array of values
      let array = [6, 7, 8, 42, 23, 43, 2, 43, 23, 3, 13];
      output.innerHTML = "Original Array: " + array + "<br>";
      // using the array.reduce() method to find the total of the array 
      //and pass the arrow function as an argument of the reduce() method
      let total = array.reduce((total, num) => {
         return total + num;
      });
      output.innerHTML += "The total of the array values: " + total;
   </script>
</body>
</html>