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() 方法？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 如何在 JavaScript 中使用 Array.prototype.reduce() 方法？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
