您好,欢迎访问一九零五行业门户网

如何在 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() 方法将所有数组字符串连接到一个字符串中。我们使用“+”运算符将当前字符串元素与前一个结果合并到回调函数中。
<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() 方法?的详细内容。
其它类似信息

推荐信息