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 相关文章推荐
在chrome中window.onload事件的一些问题
Mar 01 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 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,ajax实现分页
2008/03/27 PHP
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
JS的replace方法详细介绍
2012/11/09 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
Python创建xml的方法
2015/03/10 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
如何更优雅地写python代码
2019/07/02 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
pytorch torch.nn.AdaptiveAvgPool2d()自适应平均池化函数详解
2020/01/03 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
总裁岗位职责
2013/12/04 职场文书
活动总结的格式
2014/05/07 职场文书
一体化教学实施方案
2014/05/10 职场文书
升职演讲稿范文
2014/05/23 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
田径运动会通讯稿
2015/07/18 职场文书
python如何利用traceback获取详细的异常信息
2021/06/05 Python
解析Redis Cluster原理
2021/06/21 Redis
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs