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 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
js文件中调用js的实现方法小结
Oct 23 Javascript
javascript之bind使用介绍
Oct 09 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 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容易忘记的知识点分享
2013/04/30 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
新闻内页-JS分页
2006/06/07 Javascript
jQuery TextBox自动完成条
2009/07/22 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
js中document.write的那点事
2014/12/12 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
考试没考好检讨书
2014/01/31 职场文书
学校安全责任书
2014/04/14 职场文书
岗位明星事迹材料
2014/05/18 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
2014年卫生工作总结
2014/11/27 职场文书
redis缓存存储Session原理机制
2021/11/20 Redis
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python