00:00
好嘞,各位,那这一小节呢,咱给底部的这个功能啊,给它实现了,首先呢,先完成这儿,就是统计一下全部有几个,已完成有几个,随后呢,再做这儿,最后呢再做这儿,来先分析一下这儿吧,各位你想做统计啊,你想知道全部有几个,已完成有几个,那就必须保证整个底部这个foot特啊得把一个人握在手里,谁呢?就是todos todos数组的长度,就是全部的数量,然后呢,我再算一下,再遍历一下,看看todos里面有几个要做事的,那个当值为真,那是不是就是已完成有几个,哎,所以说各位回到APP里面,我得做一件事,就是把这个todos啊,我得传给谁呢?来走,那你这边传了各位,那这是不是就得声明接收啊,诶在这写一个pro OK,这个东西你握在手里了,那这三呢,就别写了,大家能猜到怎么写是吧?Todoth点读。
01:00
取一下长度不就可以了吗?对吧?刷新一波走本来就是三个,那全部三个没毛病,那我再写一个,比如说学习回车,你看是不四个,哎,好了,回来,那你把这一堆呢,给它复制一份儿,往这儿一替换,别写零了,在这儿琢磨琢磨怎么写吧,这儿啊同学就有点复杂了,不像这儿这么简单,直接我读一个属性啊,你就是全部了,这儿各位你是不是得便利一下啊,你是不是得写一个判断谁的当值为真,是不是还得记述一下呀?所以说觉不觉得这块的逻辑不是简简单单就能写完的,那既然这块不是简简单单就能写完,各位得算,那你说我得用谁呢?啊,我都提到这个算字了,各位是不是得考虑用到计算属性啊?View里边不是有一个原则吗?就是模板语法里边的这个代码啊,尽可能的让它简单一点,别写的太长啊,你这么写还好,没什么毛病对吧,读一个属性,那这儿呢,同学来换一下吧,给它起。
02:00
个名,那计算属性我叫这个名啊,叫做down total啥意思呢?就是已完成的总数吗?Total不有总数的意思吗?好了,在这写什么呢?Computed来里边是不是写一个down total,那么计算属性的简写方式是不是这么写的,直接写成一个函数,哎,看你还能不能记得之前讲那计算属性了,那这儿呢,同学是不得给一个返回值,我如果返回的是99,那就意味着已完成的数量是不是99啊?哎,说老师这怎么飘红呢?是因为刚才啊,我写完了这个东西,我就保存了一下,然后这儿呢,还没等写呢,对吧,回来你刷新一波它就没了啊,当然不可能是99,那怎么写?同学这儿的方法有很多,同学你写一个最基础的for,循环遍理一下行不行?行,我用map行不行行,For each行不行行,同学你可以随意的去发挥对吧,整体过一遍哎,当值为真的有几个一统计就完了,你比如说各位啊,我写一个特别简单的,我这么想啊,在外边呢,Let一个I艾等于零奇数。
03:00
然后怎么办?this.todo点,然后我就开始一个最简单的for each去别离它可以吧,那这拿到的每一个是todo里边怎么写,你得写判断呗,啊如果如果啥你这个todo的当值啊为真,就是进入这个判断,那很简单,哎呀就加加就得了呗,诶那最后呢,在这别忘了是不得return这个,哎呀,OK,回来看一下效果刷新,诶已完成两个,那你再勾一个呢,那就三个呗,啊都取消呢,那就是零呗,同学回来这写行不行啊,行,哎,但是同学啊,这么写呢,稍微有点不太好,哎,就看起来不高端啊,那高端点得怎么写呢?各位你说一下啊,数组身上有一个方法叫做reduce,你是学过ES6的人啊,你应该知道这个reduce方法,这个reduce呢,各位是专门用于做条件统计的,什么叫条件统计呢?我给你一堆学生,我问你里边年龄大于18岁的有几个可以用它,对吧?我给。
04:00
给你一堆订单,让你筛选,这个订单的金额是1万块钱以上的有几个,是不是也可以用它呀,你看这就是条件统计,哎,或者再说一个一堆人里边男士有几个人对吧?都可以用这个去实现啊,有些小伙伴呢,对这个方法熟,有些小伙伴呢,可能就觉得,诶老师我没听过来这样啊各位我简单粗略的说一下这个reduce的使用,如果你说老师我听这reduce啊,就这东西跟新课似的,哎,那我建议你呢,自己下去,同学来打开这网站啊,大家应该知道吧,MDN,你去搜索reduce,哎,第一个就是你看放在瑞原型上的reduce是不是给数组实例用的,打开里边会告诉你的这些东西都怎么用行不?各位在这儿毕竟咱不是讲基础,不能花费大篇幅去给大家复习,这个reduce是不好了,给这个关掉,说说怎么写啊,各位把这一堆呢给它删除啊,首先还是得拿到this,点这个todo,然后调这个reduce,这个reduce呢能传两个参数,各位啊,我慢慢给你说。
05:00
啊,第一个参数呢,其实它是一个函数,第二个参数呢,就是如果你要做统计啊,就是那个统计的初始值,就有点像刚才你那个Lett I等于零,哎,就那意思,所以说我要做统计吧,哎,那传个零,然后各位你听好了活啊,都在这里呢,哎,都在这里呢,这个函数能被调几次呢?你听我说你数组的长度是几,这个函数就被调用几次,来我们测试一下啊,Colo艾特符,如果不出意外的话,现在应该输出三个艾特符,你说对吗?各位来回到这儿刷新几个三个是吧?哎,这没啥的,主要是说他收到的参数,各位来这块呢,有意思,在官方文档里啊,它第一个参数呢,叫做pre,第二个参数呢,叫做这个crut,啥意思,就是当前的,那这个p re呢,就是上一次的值啊,那这个current呢,就是当前的值,我给大家呢,输出一下这个p re啊一点一点看啊保存回来。
06:00
刷新一波你发现啊,这是零,完了都是安fun,这是怎么回事呢?这是因为它里边有一个规则,来跟大家说一下啊同学,我声明,如果你是ES6学的还不错的同学说老师这reduce还值得你这么说吗?那你赶紧把这个视频倍速播放一下,把这块跳过去,OK诶,如果你是不太熟的同学,那你听我给你复习一遍,OK好,来在这同学说啥是这么回事,就是这个绿色的函数,来,我给你圈好了啊,绿色的函数确实呢,会调用三次,因为你数组的长度啊是三,那么第一次调用的时候p re是几呢?是零,为什么是零啊,因为你的统计的初始值是零,哎,零就进来了,于是乎输出了几啊零,好了各位,重点来了,这个函数是不是被掉了一次,那是不是还得再调一次,因为得调三次吗?啊,刚才我说的是调用第一次,那么接下来要调用第二次了,那你听我说呀,各位第。
07:00
二次去调用这个绿色的函数的时候,这个pre是上一次你调用这个绿色函数的返回值。再说一遍,第二次调这个绿色的函数是第一次调这个函数的返回值,然后作为p re的值,那我问一下同学,刚才我已经执行了一次这个绿色的函数,请问我有写return返回值吗?我没写,没写就是什么and find,所以说第二次调用到这儿的时候,同学那个p re是几呢?Andde find对吗?所以说输出的是几呢?Andde find是不?各位好,第二次调完没?调完了,那我再问你接下来是不是还得掉第三次啊好,那我再问你第二次掉的时候我的返回值是多少啊unde,所以说在这呢?哎,继续写是不是还是unde find,那在这的输出呢?啊来是不是unde find呀?那同学我问各位,控制台上就正如你所见,是不是0ANDDE find andde find呀,哎,OK,就把这块是不是给大家解释清了呀,好那再往下,各位,那你说我要写返回值呢,好瑞瑞多少呢,三好那你说先。
08:10
能带啥效果?各位来,第一次掉这是几零,输出几零好了,那我第一次调完有没有返回值,有,那所以说第二次进来的时候P是几三所以说输出几三?第二次掉完没掉完了,但我返回的第二次是不是还是三呢?那所以说第三次进来的时候它是几呢?还是三,输出几呢?三所以说控制台上应该是033对吗?各位刷新诶033啊OK,那你看好了啊各位,接下来呢,我不返回三了,我返回啥呢?我返回p re,然后加一,哎,统计开始了,同学,这就是那活活在这儿呢,来分析一波啊各位走,你这是绿色的函数。第一次调用,请问p re是几啊,是零哎,所以说输出几呢?呃,零哎,那注意了,第一次调用的返回值是零加一,所以说返回值是几是一,那么这个一就作为下一次的p re进来是几一所以说输出几一,那么现在p re已经是一了,一再加一,诶我问各位是不是变成二了,那么这个二呢,就作为第三次调用这个绿色函数的啊,那个p re的值,那所以说二是不是就进来了,哎,那所以说同学这儿是不是再输出一个二啊啊那你说到了这一步,二再加一,哎我问你最后是不是就是那三呢?那也就是说控制台上的输出应该是像第20行这个写的就是012,但是我想问各位的是,它最后一次调用这个绿色的函数的返回值是几是三?
09:50
哎,我再说一遍,各位,最后一次调用这个绿色的函数的返回值是几呢?是三,那么你听我说呀,这个三呢,就作为reduce这个方法的返回值了。
10:03
最后一次调用绿色函数的返回值是整个reduce的返回值,也就是说各位如果你在这儿写一个cost X在这收一下,我问你X得几得三是这意思不?各位诶,来咱试试啊,在这我cost X在这收一下,随后呢,我打印这个X啊,来看一下效果啊,在这呢,给你做个分格吧,写一个井号,来一个逗号,瞧好了,各位刷新是不是像咱分析呢?艾特符012完了是几呢?三,那同学如果按照我这么写的话,你觉不觉得最终这X呀,其实就是数组里边有几个元素?是吧?各位,我要这么统计说老师,那你拿这个就算数组的长度呗。同学,我觉得呢,除非这个人病的不清,采用这种方式去算这个数组里边有几个元素,明明我点lesss就可以取到,我为什么非得这么算呢?对不?哎呀,整的这个麻烦是吧?一次一次加E,怎么再返回下一次?哎,同学,那你说我加的要不是一呢?我加的要是这个呢?啊,来先引导大家一波吧,你看看那个current是谁啊?艾特福后边是p re,然后是current,你注意看那current是谁啊?同学,其实current就是每一个todo,像你觉不觉得是这样,你看都是按照顺序传进来的吗?那你看这来走着走着走着是不是也是啊,各位,哎,那你说接下来怎么办呀,我是不是可以这么写呀?来各位这一呀,我不写死,我写死就没意义了,对吧,你数组里有八个元素,你依次进来完,我每次给你加一,最后我再告诉你是八能有什么意义吗?这一字啊,换成一表达式,我这么写。
11:43
我说当前你的当值啊,是否为真?哎,他说我为真好,你算一个,他说如果我不为真好,你不算一个,对吗?各位有没有种感觉,条件统计,那最后出来这X,那你分析一波吧,各位,三个凸度项里边只有两个是做完的,那你告诉我吧,最终这X是几啊,肯定是二对吗?各位,哎,这块你理解理解啊,来刷新一波,瞧是不二啊说老师那这一这一,那你分析呗,各位你看看啊,第一次进来接。
12:16
零输出几零,那然后呢,第一个事做没做完,做完了那零加不加,一加一,所以说这是不是一,第二次进来我问几一,那这输出几一,那你要注意的是第二个事儿我是没做完的,所以说一加这个零是不是还是一,那所以说再进来的是不是一啊,那在这呢是不是一,那再往下走,同学这个一,那到了第三个,那你说加不加呢?第三个事儿我做完了,所以说一加一是几呢?是几是不是二,哎所以说你看这一个一个一个这不就走下来了吗?哎,就这么回事,所以说你再体会体会啊,说老师那这方法麻烦呀,同学,如果你想精简的话,一行就能写完,你信不?哎,不用整这个中转变量X了,Written返回,然后返回的时候,这里边同学别做,这输出是不?哎写的精简点,那这样吧,各位,我把这个呢给你留下啊,回头你看一眼这方法吧,怎么讲各位,呃,我跟大家说个事儿吧,就是我们是不是前端人员同学,你觉不觉得前端人员的职责就是在合适的时候发出合适的请求啊,拿回合适的数据。
13:17
展示到合适的位置,但是很多的时候这个数据是不能直接展示的,涉及到你对这个数据进行便利啊,过滤啊加工,然后再展示,对不?所以说同学一句话啊,就是前端人员如果你对数组和对象身上的方法你不熟,那你跟前端其实是很吃力的,对不?各位,这也是为什么我们前端人员出去面试的时候,经翅考到你数组身上的方法,诶见过最有套路的一个问题,就是请你说说你过去在干开发当中常用的数组身上的方法,你都用过哪些?越多越好,那同学我觉得你只能输出六个,好像不够用吧,对吧?没事翻翻那个MDN文档,那些方法都过一过,好同学不墨迹了,这些注掉,然后呢,把这一堆东西复制再来一份,那这怎么写?看lo不要了,X中转变量也不要了,写一个return对吧,各位,哎,然后这一堆东西都给它拿走,函数体只有一句,并且还是箭头函数,Return可以不写了,画括号呢也可以省略了,OK,同学,这是不是就。
14:17
写完了呀,咋的不比你直接外边定义一个,哎,再写个for each看起来要好啊对不?各位,哎,这看起来就比较怎么讲呢,语义化,你写reduce人家知道了,诶应该是在做统计呢,人一看哎就知道这规则了,为了让大家好理解,我这不用current,我用todo可以吧,哎,Todo啊todo好把这个呢复制来到这儿,OK,这是不是就可以了,看一下效果吧,各位啊,刷新一波走完成的是两个,全部是三个,如果你勾一个,那就变成三了,如果你都取消,各位是不是就是零,OK,是不是底部的这块儿就写完了呀,哎,咱慢慢来,各位,这一小节咱只讲这儿啊,一会儿咱再讲这个勾选,还有这个清除已完。
我来说两句