JavaScript 函数式编程的概念

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>

我们已经了解了函数式编程方法,以及它如何有益于编程范式并与之不同。我们了解到,它提供了一种写出可维护和可读的代码的方法,并减少了错误。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

JavaScript 教程