00:00
好的同学们,我们继续呢学习pros,我把这个目录呢收起来一下啊同学考虑一个问题,如果人的信息特别多怎么办?现在每个人只有三个信息,你在这写呢,也不会显得很长,但是如果说某一个人有了12个信息,那你写吧,肯定会很长。好,这是第一个问题,我们再考虑第二个问题,如果是真实的项目开发,同学们,你说这个人的信息是不是得是服务器给你返回的,你肯定得发了一个adjust请求把人的数据带回来,然后做展示。那我们模拟一下这种场景啊,你比如说呢,我定一个变量,P就代表他是一个人,这人呢,有名字叫老刘,好,这人呢,有年龄是18岁啊好,那这人的性别走是一位女同志,那你说你这得怎么写呢?你就只能这样写了,走P点内幕对吧?读变量,那这呢,同理呗,p.H这呢p.sex说老师,那这不也行吗?那你看一下呗,肯定是可以的,但是咱说了这信息如果特别多怎么办呀?最好能让他批量的把东西传进去,而不是说我自己要一个一个写,对吗?同学你看这个变量都在这了是吧?人家这要什么呢?要name,你这有没有内有,人家要age和sex,那你这有没有啊,也都有,那就不能用一种简单的方式吗?当然可以react设计了,它是这么写的,走,先把第40行我给你注掉。
01:37
我直接在第41行里边写这种简写的方式,这么写的啊,注意看点点点P,哎就一次性把这里边所有的key value6都传到这儿了,来我们看一下效果啊走依然能用,哎说老师那这怎么回事呢?其实你这种写法就是第40行这种写法的语法堂,但是这呢有一个要求,就是人家如果带回来的数据不叫内,你比如说叫NM就代表内。
02:08
那你这样传的话,就相当于你这写了一个NM等于p.NM。哎,那你这样的话就不行了,因为人家这边拿的是谁呢?Name,哎,那这儿呢,你就不可以这么写了,说老师那我就这样写的话,东西肯定是拿不到的,对吧?哎,那所以说这么写呢,也得有一个前提,就是你捞回来的数据对吧?咱说法架请求从数据库那边拿数据啊,咱通俗易懂点说,接地气点说就是捞数据是吧?哎,数据捞回来之后呢,你得保证你这儿拿的呀,和人家这的是一样,哎,这才可以啊说老师好了,学会了,这就是呢,批量传递东西。同学说一个细节上的问题,关于展开运算符,哎,就是你们所说这个点点点运算符,你还记得多少呢?我们简单复习一下啊,在这儿呢,你可能说老师多么自然呢,点点点啊,这个三点运算符不就是把一个对象给展开了吗?你看老师这对象在这儿呢,你用点点点把一个对象展开了,同学不是这么回事儿,点点点啊,这个展开运算符是不能够展开对象的,有必要呢,我们回顾一下这个展开运算符,打开复。
03:16
新建一个第四个走叫做展开运算符,好写一段简单的代码啊,我们一起看一下脚本,准备好,同学,这个展开运算符啊,可以有很多种用的方式,它可以跟数组进行匹配使用,你比如说我准备好一个数组吧,叫AR1,它里边的内容呢是13579好。那还有一个数组A222啊,等于它是呢二四六八十同学,我想把一个数组里的元素都展开输出一下,你就可以这样写,点点点A221,来我们一起看一下,打开控制台上键啊刷新13579就出来了,你要是直接输出数组呢,它长的是这样输出的是一个,哎,是个数组,你要是这样的话呢,那就是展开分别给它输出,OK,好,哎,那这是什么呢?展开一个数组,展开一个数组,那么这个三点运算符呢,也可以用于去连接两个数组,你比如说我想弄一个ARR3,这个ARR3呢,想把一和二拼在一起来,那我们写一下let arr3ar23等于来这么写,点点点A2R1逗号点点点A2R R诶就把它俩拼在一起了,其实这段代码的含义就是。
04:43
这把数组一拿回来,所有元素展开放这,哎,再来个逗号,把数组二也拿回来,所有元素展开放这儿,你就形成了一个A223啊,A223,来我们一起看一下,回到控制台,一三五七九二四六八十啊,那这个呢,是连接数组好走连接数组,诶数组好,那还可以应用在哪呢?就是函数传参,你比如说我有这么一个需求,同学有一个求和的方法啊,它能收到两个值,计算出这两个值的结果,那就是return a加B啊那这呢,来咱测试一下colo输出萨姆调用的结果,传个一,传个二,给我返回的应该是三,那三就输出了。哎,那同学问另外一个问题,你说如果我调用sum方法的时候,不是求两个数的和。
05:39
苏老师,那明白,那是三个数,我再多接受一个C,我再加一个C,你这儿呢,再给我传一个C,不是同学不是这个意思,不是说只能,哎说计算三个人的和你考虑啊,如果说我调sum方法的时候,我不确定到底有几个数,你比如说我可能一直写下去45678对吧,或者说呢,哎,有可能我就写一个,也就是说我的参数是不固定的,那这个时候呢,你就也可以用这个展开运算符,你比如说在这儿我可以点点点,然后numbers。
06:12
说老师那你这能干嘛呀,你看一下效果啊,Colo,我输出这个numbers,你注意观察,那numbers是一个什么啊,艾特符逗号啊,注意观察来走什么呀,同学,是不是一个数组啊,对吧?哎,好了,那回来你说如果我传的是2344个人呢?诶,那就是数组里边有四个元素,所以说你觉不觉得用这种方式能够批量的把所有的参数都接收到呀,好,那里边怎么办呀?对吧?我要求和吗?那正好也考你一下同学一个最简单的面试题,有一个数组里面的值呢,全都是数数值类型的啊,全是number类型,计算一个数组里边所有数值的和怎么计算啊?当然了,你可以写一个最基础的放循环去遍历对吧?啊那在这儿呢,我直接说一下同学数组身上啊,有个方法叫做reduce,还记得吗?如果不记得的小伙伴,课下呢,自己去复习一下reduce传递一个参数啊,这个参数呢是函数,这个函数接收两个参数,一个是之前的值p re啊,VALUE6,那还会接到一个current value就是当前的值,那当然了,小驼峰命名,把这个V呢大写,这个呢也给它大写p re代表之前的,那你在这里面做一件事就可以了,Ren return,谁呢?PRE6,之前的值加上谁呢?Current当前的值,那你别忘了,Reduce方法是有返回值的。
07:43
能把整个数组求和的值最终给你,那你是不是得作为sum的返回值啊,随之写一个return OK,那最后你看一下效果,那就是1234加一起来来走的是不是十啊啊同学,这段代码呢?如果你忘了呢?那你最好是回顾一下之前数组身上的方法,OK同学,数组身上的方法很重要哦,你说我们是前端人员对吗?我们做的最多的事就是在合适的时候发出合适的请求,把合适的数据展示到合适的位置。那同学,你请求回来的一堆数据极有可能是一个非常复杂的数组,而你呢,却对数组身上的方法都不熟悉,对吧?那你这肯定是不可以的啊。OK,那说老师啊,这是配合函数去使用是吧?哎,在函数啊中使用,那老师还有什么场景呢?来同学,还有这么一个场景啊,你要注意,比如说呢,我有一个对象啊,Let一个person人的这么一个对象啊。
08:43
Son等于呢是有名字的啊,比如说呢也叫做Tom,人呢是有年龄的,比如说叫做18同学,你说三点运算符能展开一个数组吗?我们试试colo,展开person,看看能不能行啊,报错了,报什么错误呢?说对象类型没有接口。
09:11
他的意思就是说,你不能够把展开运算符直接应用到一个对象身上,一句话,三点运算符没有办法展开一个对象,即展开运算服务不能够展开一个对象。说老师你等等不对呀,刚才这儿好像能呀,对吧?哎,别急,先别考虑这儿,同学我给你讲还有一种写法,不知道你能不能记得了啊,我想复制一份person,比如说有个PERSON2,我想复制一份person,能这么写吗?很明显不行,同学你要这么写啊,可就有意思了啊,你自己注意看啊,首先这句话呢,我给你写好注释,它是报错的啊,展开运算符不能展开对象,同学,所有这里边讲的,其实怎么说呢,应该是你都已经掌握的东西,因为现在在复习,OK,好,那同学不能展开对象,那你看着啊,如果我这么写啊,就有意思了。lo,你输出这个person2.name,说老师,那原来人叫Tom,你复制了一份那。
10:27
肯定也叫做Tom呀,那当然我得把这个代码注掉啊,GS单线程这犯错了就走不下去了呀,啊,是不是Tom呀,那你看着啊,我在第二十五行输出之前呢,我给你做一个事儿,我把person.name给你改了,叫做Jerry,那你注意看吧,PERSON2也跟着改,所以说同学你这不叫复制一个对象,OK,那这里边不是一个引用关系的传递吗?啊说老师,那我怎么复制一下呢?你可能会想到你们之前讲的什么深度复制是吧?啊还有这个浅度复制,什么深克隆浅克隆那些东西对吧?好,那你看着还有一个非常便捷的办法来瞧着,这呢,不能直接给person,这咱可以这么写来,注意看花括号点点点person。
11:15
说老师点点点不是不能展开一个对象吗?直接写点点点肯定不能展开一个对象,但是如果你外侧包裹了,诶一个对象这种花括号形式,那可以复制一个对象,也就是说呢,你这么写呢,是一个新语法。啊,本身就是ES规范里的一个新语法,你刚才这么写肯定是不行的,你也看见了,不能直接便利一个对象,但是如果你外边包一个花括号,你就触发了一个东西,就是字面量的形式复制一个对象,哎,可能有些同学啊老师啊,彻底晕了,那来我们看一下啊,你搜一下这个MDN啊。打开咱们去瞧一下啊,呃,你找一下这里边的技术GS,找到表达式和运算符,一直往下找,这块有对展开运算符的说明,叫展开语法啊打开,然后这里边呢,都是说的是你之前讲过的那些内容了,我们直接往下滑,你看啊,它有这么一个东西,这儿呢,构造字面量对象时使用展开语法,那你瞧有一个OBJ1,有个OBBJ2,他在这写了一个哇COBBJ写了一个花括号,点点点OBJ1,他管这个叫做克隆后的对象,所以说呀,同学们直接写点点点person,那是想用展开运算符展开对象,那是不能够实现的,无法展开,但如果外边包了一个花括号,同学,那就代表你要复制一个对象,这个语法就没问题,你colo输出这个PERSON2,你。
12:57
小眼同学来到这儿,是不是把那个人复制了,说老师,那如果我在这一行,哎,我写了一个person.name我把person的名字改成Jerry,那它变吗?那你看一下吧,它不变,哎,你在最后呢,你再输出一个person,你发现其实是person变了,哎,您觉不觉得这种形式能复制一个对象啊?那你可能说了,老师,那这回你一讲我就明白了呀,刚才在这儿呢,咱们其实是复制了一个对象,错。
13:28
同学啊,你这个花括号和你这个花括号结尾表达的是这个里边你要写GS表达式了。而你原生GS里的这个,那是人家提前定义好的一种语法结构,所以说同学这两个花括号和你react里边这两个花括号它不是一个意思,React里边这块是作为一个分隔符在使用,所以说你真正写的那段GS其实就是点点点P,那你可能就会问了,老师,那点点点不是不能便利一个对象吗?那这P不是一个对象吗?
14:08
老师,那这怎么回事呢?要说一下同学,你的Bible加上你所引入的react,哎,就这两个人加在一起,React加上bbible,就可以允许你用展开运算符去展开一个对象了,原生里边同学这么写它肯定是不行的,但是在这儿呢就行了,千万不要认为这块触发了什么复制对象没有,人家这的画括号和你原生里边写的外边包着的那个可不是一个意思啊,可不是一个意思。OK啊,这会儿要理解理解,说老师呢,那我想测试一下,听你这么说,好像在这儿我能这么写了点点点P,哎,这不就诶你看老师他也不报错展开运算符,由于我现在有Bible加上react,那就意味着第40行代码就能展开一个对象了呗,老师我想看看展开是什么样子的,来做个分格,前面加一艾特符,写一逗号,同学你就注意看那个艾特符后边是什么,打开走刷新有东西吗?没有,那这多说一句,同学,Double加react确实可以让展开运算符呢,哎,去展开一个对象,但是不能让你随意的去使用,说老师我在这想输出看一下,不,它仅仅适用于标签属性的传递,别的地方都不行,OK啊,这块你要知道,哎,所以说再往下,那既然咱都说了这个三点运算符,那。
15:43
咱就一次性把它都说完吧,嗯,走,那这块呢,我们叫做复制对象,嗯,那我们把这个MDN呢,里边那个文字呢,咱都给它复制过来吧,啊省着自己再敲了啊打开这儿构造字面量对象时使用展开语法啊那还有一个地方就是复制对象的同时修改它的属性,简单的呢写一下啊let,然后比如说呢,我有一个呃,Person啊,我想复制它一下,你比如说还有一个叫做PERSON3,等于那复制一下就是点点点,诶person啊,那不喜欢他这个名字,想把名字给他改一下,你就可以这样写逗号name名字改一下,比如说叫做Jack啊Jack好了,你输出一下这个PERSON3看一下吧,右键打开控制台。
16:42
刷新怎么样,是不是改过来了?哎,所以说这个呢,就是复制对象的同时修改了它的属性,也是刚才MDN里边所说的,嗯,在哪呢?在这儿它叫合并啊,其实合并的意思就是说,嗯,我们看一下吧,你这里边是不是有名字和年龄,那我这要再写呢,就把你的覆盖了,那你比如说我在这再来一个a DD res家庭住址,你比如说开玩笑的说哈,地球啊,那你看一下你在输出这个PERSON3的时候呀,走就多了一个这个是吧?哎,所以说这是一个合并的动作,呃,我们给他写一下啊,叫做合并,好哎,所以说展开运算符呢,一般有这么些个用法,同学,这里的东西如果你觉得哪一块特别的生疏呢,希望大家自己下去呢,多多复习一下好吧,诶,我们的视频呢,停一下。
我来说两句