JavaScript 如何使用Array.prototype.reduce()方法

array.reduce()方法用于通过对每个元素执行一些任务将整个数组减少成一个单一的值。例如，当我们想得到一个数组中所有元素的总和时，我们需要将整个数组减少为一个单一的值，即数组中所有元素的最终总和。

array.reduce()方法会跟踪前一个元素的结果值。之后，它通过使用我们从上一个元素得到的结果值对下一个元素执行任务。数组的第一个元素考虑作为参数传递给结果值的初始值。在本教程中，我们将学习如何使用JavaScript的Array.prototype.reduce()方法。

语法

用户可以按照下面的语法来使用array.reduce()方法。

array.reduce((previousResult, element, index, array) => {
   // perform a task
}, startingValue);

在上面的语法中，我们将箭头函数作为第一个参数值传递。箭头函数作为一个内联回调函数工作。

array.reduce(callback, startingValue);

在上述语法中，回调是一个回调函数。

参数

previousResult – 它是我们对前一个数组元素进行一些操作后得到的结果值。
element – 它是数组中位于索引位置的一个元素。
Index – 它是该数组元素的当前索引。
Array – 它是一个数组本身，在回调函数中使用。
startingValue – 它是初始化previousResult变量的初始值。
callback – 它是一个调用数组中每个元素的函数。

返回值

array.reduce()方法在对所有数组元素执行某些任务后返回最终结果值。

例子1

在下面的例子中，我们创建了一个数字数组，并用一些数值对其进行初始化。之后，我们使用array.reduce()方法找到所有数字的乘法。

同时，我们使用了内联回调函数作为reduce()方法的第一个参数。在回调函数中，我们将previousResult变量的值与元素相乘并返回。

<html>
<body>
   <h2>Using the <i>array.reduce()</i> method to find a factorial of a number in JavaScript.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      let factorial = numbers.reduce((previousResult, element) => {
         return previousResult = element * previousResult;
      }, 1)
      output.innerHTML += "The factorial of 10 is " + factorial;
   </script>
</body>
</html>

例子2

在下面的例子中，我们使用array.reduce()方法将所有的数组字符串合并为一个字符串。我们使用’+’运算符将当前的字符串元素与previousResult合并到回调函数中。

<html>
<body>
   <h2>Using the <i>array.reduce()</i> method to merge all strings of the array in JavaScript.</h2>
   <div id="output"> </div>
   <script>
      let output = document.getElementById('output');  
      let strings = ["Welcome", "To", "the", "TutorialsPoint", "blogs", "!"];
         
      function callback(previousResult, stringElement) {   
         return previousResult + " " + stringElement;  
      }  
      let message = strings.reduce(callback, "");
         
      output.innerHTML += "The Message created from the array of the string values is " + message;
   </script>
</body>
</html>

例3

在下面的例子中，我们正在寻找元素索引值的总和。用户可以看到我们是如何在回调函数中使用数组索引的。

<html>
<body>
   <h2>Using the <i>array.reduce()</i> method.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let numersArray = [20, 30, 40, 50, 60, 70, 80, 90, 100];

      let finalValue = numersArray.reduce((previousResult, element, index, array) => {
         return previousResult + element - index;
      }, 0);
      output.innerHTML += "The resultant value after performing operations on array element is " + finalValue;
   </script>
</body>
</html>

例4

在这个例子中，我们创建了一个对象的数组。数组中的每个对象都包含emp_id, emp_name, 和工资。我们使用了reduce()方法来获取所有员工的工资总额。在reduce()方法的回调函数中，我们访问每个对象，并将其工资属性的值添加到total变量中。最后，它返回所有雇员的工资总额。

<html>
<body>
   <h2>Using the <i> array.reduce() </i> method.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let arrayOfObjects = [
         { emp_id: "10", emp_name: "Shubham", salary: 10000 },
         { emp_id: "20", emp_name: "Akshay", salary: 20000 },
         { emp_id: "dfd0", emp_name: "John", salary: 20000 },
         { emp_id: "10", emp_name: "Mukund", salary: 50000 },
         { emp_id: "10", emp_name: "salman", salary: 5000 }
      ]
      let totalSalary = arrayOfObjects.reduce((total, object, index, array) => {
         return total + object.salary;
      }, 0);
      output.innerHTML += "The total salary of all employees is " + totalSalary;
   </script>
</body>
</html>