关于Array.reduce的理解与拓展
2018年1月6日
首先我要感谢我的同事徒步上山看日出在我第一份实习的时候对我的指导,现在我也开始跟他一样开始养成写博客的习惯
现在开始讨论我遇到的第一个问题,这是我在看javascript高级程序设计看的一个令像我这样的新手值得思考的问题
文章思路
- 什么是array的reduce,用法?
- 什么是迭代==>(在学校学的被狗吃了系列~)
关于Array.ruduce( )
书中是这么写的
ECMAScript 5 还新增了两个归并数组的方法: reduce()和 reduceRight()。这两个方法都会迭代数组的所有项,然后构建一个最终返回的值。其中, reduce()方法从数组的第一项开始,逐个遍历到最后。而 reduceRight()则从数组的最后一项开始,向前遍历到第一项。
这两个方法都接收两个参数:一个在每一项上调用的函数和(可选的)作为归并基础的初始值。传给 reduce()和 reduceRight()的函数接收 4 个参数:前一个值、当前值、项的索引和数组对象。
这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项。
使用 reduce()方法可以执行求数组中所有值之和的操作,比如:
var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
return prev + cur;
});
alert(sum);
第一次执行回调函数, prev 是 1, cur 是 2。第二次, prev 是 3(1 加 2 的结果), cur 是 3(数组的第三项)。这个过程会持续到把数组中的每一项都访问一遍,最后返回结果。
我的理解
数组values有5项,所以数组要执行4次运算
- (1+2) => 3
- (3+3) => 6
- (6+4) => 10
- (10+5) => 15
那如何证明呢,下面我自己写的demo
let arr=[1,2,3,4,5]
let sum = arr.reduce((prev,cur,index,array)=>{
console.log("执行了第",index,"次cur的值是",cur,"prev的值是",prev)
//原来console.log这样可以用
return prev+cur
})
console.log(sum)
结果是
执行了第 1 次cur的值是 2 prev的值是 1<br/>
执行了第 2 次cur的值是 3 prev的值是 3<br/>
执行了第 3 次cur的值是 4 prev的值是 6<br/>
执行了第 4 次cur的值是 5 prev的值是 10<br/>
15
===>猜想get!!!
===>不过如果用迭代可以怎么做
什么是迭代(才发现数据结构这种东西真的很重要啊,哪里都能用到,js也是!!!)
关于迭代(我去百度一波....)
定义:一个函数直接或间接调用自己
迭代需要满足的三个条件:
- 必须有一个明确的中止条件
- 该函数所处理的数据规模必须在递减
- 这个转化必须是可解的
int sum(int n )
{
if(n==1) return 1;
else return n+sum(n-1);
}
同样是求0~n的和,这段代码是每次在函数体中调用自身函数,1~n的和可以拆分成两个部分,1~n-1的和加上n,因此,递归的思想就是:在函数或子过程的内部,直接或者间接地调用自己的算法,从而把问题转化为规模缩小了的同类问题的子问题<br/>
递归算法的步骤:
- 确定递归公式,如sum(n) = sum(n-1)+n
- 确定递归结束条件,如n=1结束递归
刚才的函数
let arr=[1,2,3,4,5]
let sum = arr.reduce((prev,cur,index,array)=>{
console.log("执行了第",index,"次cur的值是",cur,"prev的值是",prev)
//原来console.log这样可以用
return prev+cur
})
console.log(sum)
就可以理解为
function add(n){
if(n==1){
return 1
}
return add(n-1)+n
}
console.log(add(5));
当第一次执行的时候函数add(n)碰到add(n-1)的时候就会进入这个函数执行add(n-1),[在这里,我们注意到add(1)=1(就是说递归终止)]之后又遇到add(n-1-1),当n=2时 =>
add(2){
add(2-1)+2 => add(1)+2 => 1+2
}
由此可推
add(3){
add(2)+3 =>1+2+3
}
add(4){
add(3)+4 =>1+2+3+4
}
add(5){
add(4)+5 => 1+2+3+4+5
}
so,这次博客写完了,谢谢大家阅读,求点赞求人气哈哈~~
关于Array.reduce的理解与拓展的更多相关文章
- Array.prototype.reduce 的理解与实现
Array.prototype.reduce 是 JavaScript 中比较实用的一个函数,但是很多人都没有使用过它,因为 reduce 能做的事情其实 forEach 或者 map 函数也能做,而 ...
- 数组中的reduce 函数理解
第一次见到reduce 是在js 的高级程序设计中,它的意思是把一个数组减少为一个数,举的例子是数组中元素的求和.它接受一个函数作为参数,函数又有两个参数,一个是prev, 前一个值,一个是next, ...
- Array.reduce()方法的使用
起因是学习异步函数的串行与并行写法时,发现reduce方法可以简化写法,然后看到一篇博客里面这样一段代码: var array = [1, [2, [3, 4], 5], 6]; function f ...
- reduce深入理解
// map console.log([1, 2, 3, 4, 5].reduce((a, v) => { a.push(v * v); return a },[])); //filter co ...
- Array.reduce()方法
Array.reduce()方法是对数组的遍历,返回一个单个返回值 使用方法: Array.reduce((acc, cur, idx, src) => { }, initialValue) ...
- 自从学会了 Array.reduce() ,再也离不开它
(转载)原文链接:https://juejin.im/post/5dfd9d27e51d455825129ec3 在所有后 ES6 时代的数组方法中,我觉得最难理解的就是Array.reduce( ...
- 用es6的Array.reduce()方法计算一个字符串中每个字符出现的次数
有一道经典的字符串处理的问题,统计一个字符串中每个字符出现的次数. 用es6的Array.reduce()函数配合“...”扩展符号可以更方便的处理该问题. s='abananbaacnncn' [. ...
- Array.reduce()学习
昨天遇到的一道题:1234567890 => 1,234,567,890 要求其实就是使用逗号做千分位将数字进行分隔. 当时没想到任何方法,但是以前看到过,印象很深刻,今天就找了一下. 看到其实 ...
- JS Array.reduce 对象属性累加
Array reduce() 方法 ,无非就是 计算数组元素 相加后的总和 ,看网上给的Demo 全是 [1,2,3,4,6].reduce 这种基本用法, 本次我将使用 reduce 实现 数组 ...
随机推荐
- element-ui中关闭对话框清空验证,清除form表单数据
对于elementUI中对话框,点击对话框和关闭按钮 怎么清空验证,清空form表单,避免二次点击还会有 验证错误的提示.今天终于自己查资料解决了,分享给大家 1.首先在你的对话框 取消按钮 加一个c ...
- 【Git的基本操作二】添加、提交、查看状态
添加.提交.查看状态操作 查看状态: git status
- JS 中的跨域请求
跨域请求并不仅仅只是 Ajax 的跨域请求,而是对于一个页面来说,只要它请求了其他域名的资源了,那么这个过程就属于跨域请求了. 比如,一个带有其他域名的 src 的 <img> 标签,以及 ...
- sql server 2012使用新特性offset和fetch next完成分页操作
1 select * from HumanResources.Department order by DepartmentID offset rows fetch next rows only; of ...
- yii2 response多次输出问题的查找
{ "IsSuccess": 1, "ErrMsg": "OK", "Data": { "IsSuccess& ...
- dedecms 上传目录路径
DedeCms已经升级到5.7版本了..可惜附件的目录还是不统一,比如我们从后台把附件目录调整为Ym(默认为Ymd)然而我们的附件路径依然是不一样的比如:Ymd代表年月日从文章里上传路径为:/Ym/1 ...
- 使用tinyproxy进行ip代理
爬虫经常用到ip代理.解决方案无非几种: 1.网络上寻找一些免费代理,优点:免费不限量:缺点:可用性较低,验证费时间费资源.一些有免费代理的网站,西刺代理,站大爷,89免费代理等等,网上可以搜出一大堆 ...
- Selenium(1)
一.Selenium->Se(硒)->功能自动化测试工具=功能自动化测试工具(QTP)<-Mercury(汞) 1.Selenium介绍 (1)Selenium 是针对web被测系统 ...
- sql 184. 部门工资最高的员工
Employee 表包含所有员工信息,每个员工有其对应的 Id, salary 和 department Id. +----+-------+--------+--------------+| Id ...
- QOpenGLWidget
QOpenGLWidget描述 QOpenGLWidget类是用于渲染OpenGL图形. 除了可以选择使用QPainter和标准的OpenGL渲染图形,QOpenGLWidget类提供了在Qt应用程序 ...