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 相关文章推荐
自动更新作用
Oct 08 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
vue实现简易计算器功能
Jan 20 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
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
php设计模式之委托模式
2016/02/13 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
解读Django框架中的低层次缓存API
2015/07/24 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
解析python实现Lasso回归
2019/09/11 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
Pytorch转tflite方式
2020/05/25 Python
keras导入weights方式
2020/06/12 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
你懂得怎么写自荐信吗?
2013/12/27 职场文书
求职信范文英文版
2014/01/05 职场文书
水果超市创业计划书
2014/01/27 职场文书
财务科科长岗位职责
2014/03/10 职场文书
大学军训感言400字
2014/03/11 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
Python实现滑雪小游戏
2021/09/25 Python