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 相关文章推荐
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
简介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源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
JS document对象简单用法完整示例
2020/01/14 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
Django中使用Celery的教程详解
2018/08/24 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
django 微信网页授权登陆的实现
2019/07/30 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
如何把python项目部署到linux服务器
2020/08/26 Python
Python random模块的使用示例
2020/10/10 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
判缓刑人员个人思想汇报
2014/10/10 职场文书
电影红河谷观后感
2015/06/11 职场文书
公司管理建议书
2015/09/14 职场文书