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

更新时间：2015年06月09日 10:24:46 投稿：goldensun

这篇文章主要介绍了JavaScript中reduce()方法的使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下

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 事件循环(Event Loop)
这篇文章主要介绍了JavaScript 事件循环(Event Loop)的的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-06-06
Ajax解决跨域之设置CORS响应头实现跨域案例详解
这篇文章主要介绍了Ajax解决跨域之设置CORS响应头实现跨域案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-07-07
JavaScript splice()方法详解
这篇文章介绍了JavaScript splice()方法，有需要的朋友可以参考一下
2013-11-11
JS暴虐查找法
JS暴虐查找法...
2006-12-12
浅谈开发eslint规则
这篇文章主要介绍了浅谈开发eslint规则，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
Javascript call和apply区别及使用方法
JavaScript中通过call或者apply用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象
2013-11-11
传智播客学习之JavaScript基础篇
前几天学习了JavaScript，但是一直由于忙碌的原因，没有来得及进行总结，今天终于有时间进行一个全面总结了，希望给正在努力学习的朋友们一点小小帮助。
2009-11-11
javascript的基础交互详解
这篇文章主要介绍了javascript的基础交互详解，文章通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-10-10
javascript深拷贝的几种情况总结
这篇文章主要为大家介绍了javascript深拷贝的几种情况，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01
ES6的Promise用法详解
本文详细讲解了ES6的Promise用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-12-12