小码哥的IT人生

JavaScript Array reduce() 方法

JavaScript基础 2022-05-13 16:29:42小码哥的IT人生shichen

JavaScript Array reduce() 方法

实例

从头开始减去数组中的数字:

var numbers = [175, 50, 25];
document.getElementById("demo").innerHTML = numbers.reduce(myFunc);
function myFunc(total, num) {
  return total - num;
}

完整实例:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>从左边开始减去数组中的数字:</p>
<p id="demo"></p>
<script>
const numbers = [175, 50, 25];
document.getElementById("demo").innerHTML = numbers.reduce(myFunc);
function myFunc(total, num) {
  return total - num;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

页面下方有更多 实例。

定义和用法

reduce() 方法将数组缩减为单个值。

reduce() 方法为数组的每个值(从左到右)执行提供的函数。

函数的返回值存储在累加器中(结果/总计)。

注释:对没有值的数组元素,不执行 reduce() 方法。

注释:reduce() 方法不会改变原始数组。

浏览器支持

表格中的数字注明了完全支持该方法的首个浏览器版本。

所有浏览器都完全支持 reduce() 方法:

Chrome IE Edge Firefox Safari Opera
Chrome 3 IE 9 Edge 12 Firefox 3 Safari 5 Opera 10.5
2009 年 6 月 2010 年 9 月 2015 年 7 月 2009 年 1 月 2010 年 6 月 2010 年 3 月

语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数值

参数 描述
function(total, currentValue, index, arr) 必需。为数组中的每个元素运行的函数。

函数参数:

参数 描述
total 必需。initialValue,或函数先前返回的值。
currentValue 必需。当前元素的值。
index 可选。当前元素的数组索引。
arr 可选。当前元素所属的数组对象
initialValue 可选。作为初始值传递给函数的值。

技术细节

返回值: 返回上次调用回调函数的累积结果。
JavaScript 版本: ECMAScript 5

更多实例

四舍五入数组中的所有数字,并显示总和:

<button onclick="myFunction()">Try it</button>
<p>Sum of numbers in array: <span id="demo"></span></p>
<script>
var numbers = [15.5, 2.3, 1.1, 4.7];
function getSum(total, num) {
  return total + Math.round(num);
}
function myFunction(item) {
  document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);
}
</script>

完整实例:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>计算数组中被四舍五入的数字的总和。</p>
<p id="demo"></p>
<script>
const numbers = [15.5, 2.3, 1.1, 4.7];
document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);
function getSum(total, num) {
  return total + Math.round(num);
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024