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() 方法在对所有数组元素执行某些任务后返回最终结果值。
在下面的示例中，我们创建了数字数组并用一些数值对其进行了初始化。之后，我们使用 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>
在下面的示例中，我们使用 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>
在下面的示例中，我们正在查找元素索引值的总和。用户可以在回调函数中看到我们如何使用数组索引。
<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>
在此示例中，我们创建了一个对象数组。该数组的每个对象都包含 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中文网其他相关文章！
