JavaScript中reduce()方法的使用详解


Posted in Javascript onJune 09, 2015

 JavaScript 数组reduce()方法同时应用一个函数针对数组的两个值(从左到右),以减至一个值。
语法

array.reduce(callback[, initialValue]);

下面是参数的详细信息:

  •     callback : 函数执行在数组中每个值
  •     initialValue : 对象作为第一个参数回调的第一次调用使用

返回值:

返回数组的减少单一个值
兼容性

这种方法是一个JavaScript扩展到ECMA-262标准; 因此它可能不存在在标准的其他实现。为了使它工作,你需要添加下面的脚本代码的顶部:

if (!Array.prototype.reduce)
{
 Array.prototype.reduce = function(fun /*, initial*/)
 {
  var len = this.length;
  if (typeof fun != "function")
   throw new TypeError();

  // no value to return if no initial value and an empty array
  if (len == 0 && arguments.length == 1)
   throw new TypeError();

  var i = 0;
  if (arguments.length >= 2)
  {
   var rv = arguments[1];
  }
  else
  {
   do
   {
    if (i in this)
    {
     rv = this[i++];
     break;
    }

    // if array contains no values, no initial value to return
    if (++i >= len)
     throw new TypeError();
   }
   while (true);
  }

  for (; i < len; i++)
  {
   if (i in this)
    rv = fun.call(null, rv, this[i], i, this);
  }

  return rv;
 };
}

例子:

<html>
<head>
<title>JavaScript Array reduce Method</title>
</head>
<body>
<script type="text/javascript">
if (!Array.prototype.reduce)
{
 Array.prototype.reduce = function(fun /*, initial*/)
 {
  var len = this.length;
  if (typeof fun != "function")
   throw new TypeError();

  // no value to return if no initial value and an empty array
  if (len == 0 && arguments.length == 1)
   throw new TypeError();

  var i = 0;
  if (arguments.length >= 2)
  {
   var rv = arguments[1];
  }
  else
  {
   do
   {
    if (i in this)
    {
     rv = this[i++];
     break;
    }

    // if array contains no values, no initial value to return
    if (++i >= len)
     throw new TypeError();
   }
   while (true);
  }

  for (; i < len; i++)
  {
   if (i in this)
    rv = fun.call(null, rv, this[i], i, this);
  }

  return rv;
 };
}

var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; });
document.write("total is : " + total ); 
</script>
</body>
</html>

这将产生以下结果:

total is : 6
Javascript 相关文章推荐
js停止输出代码
Jul 20 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
基于jquery的气泡提示效果
May 31 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 Javascript
简介JavaScript中的push()方法的使用
Jun 09 #Javascript
JavaScript中pop()方法的使用教程
Jun 09 #Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 #Javascript
JavaScript中join()方法的使用简介
Jun 09 #Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 #Javascript
Jquery实现遮罩层的方法
Jun 08 #Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 #Javascript
You might like
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
Jquery 插件开发笔记整理
2011/01/17 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
js中replace的用法总结
2013/12/27 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
JS document form表单元素操作完整示例
2020/01/13 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
英语硕士生求职简历的自我评价
2013/10/15 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
企业年检委托书范本
2014/10/14 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
2015学校年度工作总结
2015/05/11 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python