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

PHPz 转载: 2023-09-11 22:53:02 1214浏览

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() 方法将所有数组字符串连接到一个字符串中。我们使用“+”运算符将当前字符串元素与前一个结果合并到回调函数中。

<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()方法的回调函数中，我们访问每个对象并将其salary属性的值添加到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>

用户学会了使用 Array.prototype.reduce() 方法将整个数组转换为单个数组值。我们已经通过不同的例子看到了reduce()方法的用例。另外，我们可以使用 array.reduce() 方法从数组中查找最小值和最大值。

当我们以空数组作为引用来调用 array.reduce() 方法时，它会返回一个错误。

以上就是如何在 JavaScript 中使用 Array.prototype.reduce() 方法？的详细内容，更多请关注php中文网其它相关文章！