您的位置:首页> 前端教程> JS教程
文章导航

JavaScript reduce()

2018-9-7 12:23| 作者: admin| 查看: 1493| 评论: 0|来自: 蚂蚁部落

reduce方法具有累积计算的功能,规则单纯通过理论方式难以清晰描述。

后面会通过代码实例对其进行一下详细分析。

更多内容可以参阅JavaScript Array 数组一章节。

ES5新增此方法。

语法结构:

[JavaScript] 纯文本查看 复制代码
array.reduce(callbackfn[, initial])

参数解析:

(1).callbackfn(previousValue,currentValue,currentIndex,array):必需,索引升序对数组每一个元素执行一次回调函数。

         具有四个参数:

         (1).前一次回调函数的返回值。

         (2).当前数组元素的值。

         (3).当前数组元素的索引。

         (4).当前数组对象。

(2).initial:可选,如果指定此参数,将用作初始积累值。

特别说明:

回调函数第一次调用时,是否为reduce提供initial参数有重要影响。

提供initial参数:

(1).previousValue参数值为initial值。

(2).currentValue参数是数组中的第一个元素值。

未提供initial参数:

(1).previousValue参数值是数组中的第一个元素值。

(2).currentValue参数值是数组中的第二个元素的值。

reduce方法返回值是回调函数最后一次执行返回的累积结果。

浏览器兼容:

(1).IE9+浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).火狐浏览器支持此方法。

(5).opera浏览器支持此方法。

(6).safria浏览器支持此方法。

代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
let num=0;
function appendCurrent (previousValue,currentValue){
  num++;
  return previousValue + ":" + currentValue;
}
let elements=["antzone", "softwhy.com", 3, "青岛市南区"];
let result=elements.reduce(appendCurrent);
console.log(num);
console.log(result);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/07/122431oznl0344z33n9jlb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对上述代码分析如下:

(1).没有为reduce方法提供第二个参数。

(2).那么回调函数初次调用时previousValue参数值就是数组第一个元素值,currentValue是第二个元素值。

(3).初次调用,函数内部实现数组第一个元素和第二个元素拼接效果,生成"antzone:softwhy.com"。

(4).第二个调用回调函数,previousValue参数值是上一次回调函数的返回值"antzone:softwhy.com",第二个参数值是数组第三个元素值。

(5).最后reduce方法的返回值就是回调函数最后一次执行的返回值。

[JavaScript] 纯文本查看 复制代码运行代码
let num=0;
function addRounded(previousValue, currentValue){
  num++;
  return previousValue + Math.round(currentValue);
}
let numbers=[10.9,15.4,0.5];
let result=numbers.reduce(addRounded,0);
console.log(num);
console.log(result);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/07/122509t40uszqbk4ubkmw6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对上述代码分析如下:

(1).对reduce方法提供了两个参数。

(2).第二个参数initial规定累积起始值。

(3).reduce方法规定参数initial,回调函数第一个参数值就是initial,回调函数第二个参数值就是数组第一个元素值。

(4).回调函数第一次执行完毕,它的返回值作为回调函数第二次执行的第一个参数值,第二个参数是数组的第二个元素值,以此类推。

(5).最后reduce方法的返回值就是回调函数最后一次执行的返回值。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部