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的理解与拓展的更多相关文章

  1. Array.prototype.reduce 的理解与实现

    Array.prototype.reduce 是 JavaScript 中比较实用的一个函数,但是很多人都没有使用过它,因为 reduce 能做的事情其实 forEach 或者 map 函数也能做,而 ...

  2. 数组中的reduce 函数理解

    第一次见到reduce 是在js 的高级程序设计中,它的意思是把一个数组减少为一个数,举的例子是数组中元素的求和.它接受一个函数作为参数,函数又有两个参数,一个是prev, 前一个值,一个是next, ...

  3. Array.reduce()方法的使用

    起因是学习异步函数的串行与并行写法时,发现reduce方法可以简化写法,然后看到一篇博客里面这样一段代码: var array = [1, [2, [3, 4], 5], 6]; function f ...

  4. reduce深入理解

    // map console.log([1, 2, 3, 4, 5].reduce((a, v) => { a.push(v * v); return a },[])); //filter co ...

  5. Array.reduce()方法

    Array.reduce()方法是对数组的遍历,返回一个单个返回值   使用方法: Array.reduce((acc, cur, idx, src) => { }, initialValue) ...

  6. 自从学会了 Array.reduce() ,再也离不开它

    (转载)原文链接:https://juejin.im/post/5dfd9d27e51d455825129ec3   在所有后 ES6 时代的数组方法中,我觉得最难理解的就是Array.reduce( ...

  7. 用es6的Array.reduce()方法计算一个字符串中每个字符出现的次数

    有一道经典的字符串处理的问题,统计一个字符串中每个字符出现的次数. 用es6的Array.reduce()函数配合“...”扩展符号可以更方便的处理该问题. s='abananbaacnncn' [. ...

  8. Array.reduce()学习

    昨天遇到的一道题:1234567890 => 1,234,567,890 要求其实就是使用逗号做千分位将数字进行分隔. 当时没想到任何方法,但是以前看到过,印象很深刻,今天就找了一下. 看到其实 ...

  9. JS Array.reduce 对象属性累加

    Array reduce() 方法  ,无非就是 计算数组元素 相加后的总和 ,看网上给的Demo 全是  [1,2,3,4,6].reduce 这种基本用法, 本次我将使用 reduce 实现 数组 ...

随机推荐

  1. JS基础_for循环练习1

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. vue项目打包文件配置(vue-clli3)

    练手项目完结打包的时候遇到一些问题,特此记录 先贴我的vue.config.js文件的代码(vue-cli3构建的项目默认是没有此文件的,需手动添加)更多详细配置参考官方配置文档,我的项目不大不小,这 ...

  3. httpclient 上传附件实例

    httpclient 单附件上传实例  (扩展多附件上传实例,点我) /** * 上传附件 * @param host * @param uri * @param filePath 文件路径 * @p ...

  4. C# 移除数组中重复项

    方法一: static void Main(string[] args) { //看到数组的第一反应应该是排序 ,,,,,,,}; //去掉数组中重复的项 //先排序 arrayAsc(array); ...

  5. Django基础第三篇

    一.ORM操作 1.常用字段和参数 Autofied 自增的整形字段,必填参数primary_key=True,  则成为数据库的主键,如无该字段,django自动创建 IntegerField 一个 ...

  6. CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程

    4要素: width: 125px;  //宽度必须 text-overflow: ellipsis/clip; //省略号或裁剪: white-space: nowrap;//强制内容在一行显示; ...

  7. 异步通信&同步通信

    首先是两者的不同: 同步通信要求接收端时钟频率和发送端时钟频率一致,发送端发送连续的比特流:异步通信时不要求接收端时钟和发送端时钟同步,发送端发送完一个字节后,可经过任意长的时间间隔再发送下一个字节. ...

  8. 将 spring boot 安装为 systemd 服务

    [root@ecs-11-132 system]# cat /etc/systemd/system/push-gateway-3.0.0.service [Unit] Description=app- ...

  9. PHP通过php-java-bridge调用JAVA的jar包里class类

    正 文:   有的时候我们需要在PHP里调用JAVA平台封装好的jar包里的class类和方法,一般飘易推荐的做法是采用php-java-bridge做桥接,本文就来介绍一下大致的实现方法. 先简单说 ...

  10. 【PKUSC2018】最大前缀和

    上午的国庆大阅兵有意思 Description https://loj.ac/problem/6433 Solution 看数据范围认解法 首先在每种情况出现概率相同的情况下, \(期望 \times ...