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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 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
phpize的深入理解
2013/06/03 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
jquery使用经验小结
2015/05/20 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
django rest framework之请求与响应(详解)
2017/11/06 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
Python实现直播推流效果
2019/11/26 Python
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
新员工入职感言
2014/02/01 职场文书
会计求职信范文
2014/05/24 职场文书
食品安全标语
2014/06/07 职场文书
支部组织生活会方案
2014/06/10 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
干部外出学习心得体会
2016/01/18 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫