00:00
这课我们来看一个问题,也就是说我们可以通过组件的属性向组件里面去传数据,对吧?但是我们真实的情况是,就是比如在一个商业项目中,我们的字段哎,可能比这个要多很多,可能有十几个这个字段,我们一个一个去写的话,就会比较繁琐,好,那我先建一个文件给大家来看一下啊,如何批量传递。Purpose。我们改个零二啊,批量传递。Purpose。这个上节课是我写错了啊,我们把它改一下。还有这里啊。这里复制一下啊,改把第一个的给改了啊。那我们第二个的这个标题是批量。
01:01
传递。啊,把这个删啊,我们用一个就够了,也就是说我们这个数据有可能是从服务器获取了,哎,然后我们来模拟一下这个数据啊。啊,P等于name com。Six。啊。A,好,18。啊,那这里我们是只写了三个,但是有时候我们从服务器获取的数据是很多对吧?啊,那我们怎么去把这个数据传到这个组件里面呢?啊,但是大家可能想到可以这样去传啊P点内。比如说这个是P点。Six,这个是Peter a对吧?p.a来看一下啊,运行。诶,效果是一样的,哎,但是这个并没有解决我们刚才提出的那个问题,虽然我们是可以把这个比如说从服务器拿到的这个数据啊,我们依次的需要的字段去传进去,但是并没有解决刚才我们提出的问题,就是当我们的字段特别多的时候怎么办?你要这样一直一直写下去吗?
02:15
显然比较复杂啊。那我可以直接给大家写出来啊,写出来怎么去传批量的把这个。呃,数据给通过这个purpose传到组件里面,哎,直接写一个划括号,然后点这点,然后是我们的这个。这个东西啊好。我们来看一下。效果是不是一样的啊。我把这个撤销啊,把这个撤销之后。我把这个给大家留一份啊,复制一份,再给大家注释角留一份好做对比,来这里我们直接使用一个一对花括号里面点点点来用这个展开运算符,把这个P。哎,这个对象传到这个里面,好,这样的话,刚才我们也看到效果是一样的啊。
03:04
没有内容来看一下报错。啊,这里的这个注释的这个问题啊。我们这里是GS啊,不能用这种,就是我是使用了快捷键啊。来把这个删掉。手动写的啊好,这样注释就没有问题了。是不是正常出来了啊,跟我们之前那样写是一样的。通过这个展开运算符来把这个对象给传到组件里面。那它相当于什么呢?它相当于哎,就是我们一个一个属性一个属性去写清楚了吧,也就是我们这个对象里面,它有什么属性和值,就会被哎展开成对应的这个属性和值。清楚了吧,其实这种写法就是上面这种写法的一个语法堂好。关于这个啊展开运算符,有的人可能已经忘了啊,这里为大家去新建一个文件,我们来复习一下这个展开运算符。
04:04
来新建一个零三。来,一起拍面。展开运算图。写一个script。来定一个数组啊,A221等于什么呢?等于这个1357。接下来我们使用这个展开运算符来输出这个A。在这里啊,来到这我们来看一下啊运行。打开控制器,是不是也可以看到它把我们的数组给展开成一个的元素啊,进行了一个输出,好。
05:00
这是展开约算数,第一个作用是展开这个数组。哎,我们再来写一个二。246。八。嗯,看一下啊,是一样的啊。这是我们展开运算符第一个的作用,它可以展开这个数组。啊,把注释写一下啊,展开数度,接着看我们展开运符第二个作用,哎,我们展开一个的话,它是展开这个速度,如果我们再定义一个A223,哎,这个时候AR3是一个数组,我们在这个数组里面去展开A221逗号展开A2。那接下来我们来打印一下这个AR3啊,来看一下。诶,可以看到A23,它是一个数组,哎里面的结果是1357啊468,哎是把这个我们的数组一和数组二连到了一块,也就是说啊,它把数组一展开之后放到了这里,接着一个逗号,接着再把数组二展开放到这里,哎,最终组成了这么一个新的一个数组,啊把数组一哎它展开之后。
06:20
展开的这个结果放到了这里,接着我们一个逗号隔开,接着去展开这个数组,二展开的结果放到这里来,最终组出了这个这样一个新数组,这是它的这个第二个啊,作用可以看什么合并数组啊。接着我们再来看展开运算符,它第三个应用的一个地方,哎,就是在函数的这个传参里面去应用,那我们来定义一个求和的一个函数啊。啊,求和的函数,那我们先说两个参数AB。这个。
07:00
来看一下啊。Log some,我们传两个数来计算这两个数的和,我们把注释写一下啊,在这个函数中使用。看一下啊。可以看到啊,输出的三。啊,但是我们有一个需求是啊。我们想要计算多个数的一个求和,哎,可能是三个,也可能是四个,哎就是我们这个参数它是不确定的,这时候你要怎么办,你就不能这么去写这个参数了吧,因为参数都不确定。是不是,哎,这时候我们就可以去用这个展开运算符numbers啊来,那我们不知道它是什么,我们先打印一下这个numbers,看看它是什么。哎,可以看到它是一个数组,是不是一二是一个数组啊。那既然它是一个数组,哎,我们再多传几个参数试一试啊。
08:04
好,传了这么几个数,再来看一下。可以看到啊,它把我们传递的这个参数都给我们收集了起来,成为了一个数组,哎,这时候我们就需求就比较明确了,那其实我们就是对这个数组进行求和,对不对?对数求和大家怎么办?哎,你们可能想到了,哎,就是循环累加是不是?但是其实数组有一个很好用的一个方法啊,一个reduce就是求和的一个方法,如果大家忘掉的话,自己再复习一下这些数组相关的一些方法啊来,它有一个这个。数组的这个reduce方法啊。可以用来。求和。我们来看一看这个方法它都有哪些参数,诶。点进来可以看到它接收一个回到函数啊,接收一个call back,然后call back回调函数,它有几个参数,一个是也就是上一次计算的一个结果的一个值,以及当前的一个值,还有当前的一个索引,哎,其实我们用这两个参数就够了啊。
09:06
来复制下啊。我们传一下一个回调函数有两个参数,第一个来上一个的计算的一个值,下一个是当前的一个值,那它呢,是有一个这个返回值,你要把上一次计算的这么一个结果来加上当前的这个值去返回就可以了啊,最后它整个这个函数,哎,这个函数的运行结果,它是给我们返回这个计算后的一个值,所以我们把这个计算后的值。就可以了,来我们算一下这几个数啊,一加二加三加四,看看结果是多少。刷新哎,可以看到是十对吧。啊,这个函数的一个使用。也就是说我们这个点点点展开运算符在函数里面可以去用来展开我们传的这个参数,它会把我们传的这个参数,哎,给这个处理成一个数组。
10:00
接下来我们再来看一看展开运算符的另外一个应用。来定一个对象啊,Person等于name。好。Eight。啥?我们来尝试一下,看一看这个展开运算符能不能展开一个对象。Log点点点。运行一下啊。可以看到啊,直接报错了。他说找不到这个迭代器,也就是对象啊,他没有具备这个迭代器,我们的这个展数运算符不能展开这个对象啊,它会报错,我们把那个注释写一下啊。展开运算符不能展开对象啊。
11:02
搞错,哎,把它注释掉啊。那大家可能有疑问了,哎,之前我们在写这个批量传递的时候,哎,这里明明用这个展开元符去展开的这个对象,那这里为什么不行呢?哎,这个我们先放一放啊,我们到后面再来讨论这个问题,接下来我们再来看一个东西啊,也就是说现在我们需要去复制一个对象,那怎么来复制呢?哎,我们来看一看这么写行不行啊,Letter person2。等于这个person,好,接下来我来输出这个。PS2啊,这个报错的,我给它放到最后啊。接下来诶,我来输出这个PS2 ps2看log。看一下啊。哎,可以看到PS2有输出对吧?那接下来我在这个PS2的输出之前,我做一件事情,我把这个person的这个name给改掉,哎,等于丽丽,哎,接下来我再去打印这个PS2,你会发现,哎,这个PS2的内也改变了,对吧?那我们这个就不是一个复制对不对,这只是它的这样的一个引用的一个复制,就复制的是内存地址中的一个引用,它们指向的是同一个对象。
12:17
这不叫复制对象吗?对吧?你看我们把第一个对象改了,第二个也改了,好呃,那我们怎么去复制这个对象呢?哎。我们可以这么去做啊,POS2等于大括号带着打好。这个时候我们再来看一下,先打印一下这个PS2。可以看到,诶是一个对象和我们之前的person是一样的啊,那我在PERSON2出事之前去修改一下person的这个name,我们看看PERSON2受不受影响啊。可以看到不受影响,还是我们复制的那个对吧?啊,那通过这个展开运算符,展开这个对象,加上这个大括号,哎,我们可以干什么,可以复制一个对象,这个是ES6的一个信誉法啊。
13:01
使用花括号,包括哎,在这一对划括号里面,使用展开运算符去展开一个对象啊,我们以这个字面量的形式去复制一个对象啊,大家如果还有疑问的话,我们来看一下这个手册。来搜索一下MDN。第二。找一下它的技术里面的GS的这个教程,诶找到。表达式和运算符,哎,找到我们的展开运算。在这里啊,展开语法。前面的这些都是比较基础的,我们直接跳过往哪里往。下面去看啊。在这里啊,构造啊字变量对象时,使用这个展开法可以看到的啊,这里它定义了个对象,然后使用这个点点点外面加了画括号去克隆一个对象,也就是我们刚才说的去复制了一个,哎,对象好。
14:02
这个就是构造字面量对象时使用展开语法,我们把这个给复制一下啊。站到这里来。放到这里啊。确切的说应该是。嗯,就放到这里啊,那这个我们注意一下,这个是克隆一个对象对不对,克隆一个对象来接着我们来看一看它还有什么呢?第二个一个用法,哎,是合并一个对象,那合并一个对象怎么回事呢。也就是说。那我们在克隆这个对象的时候,我们再来一个三啊。PERSON3,哎,我们在克隆一个对象的时候可以去修改。对象的一些属性,哎,比如你把那个name修改成这个。啊,Jack,我们来打一下破衬衫。保存来运行一下。
15:03
讲到这里。可以看到,诶,PERSON3我们克隆之后并不是那个Tom,而是我们修改后的这个,这对不对,哎。这个我们删掉啊,所以说这就是他这里说的这个第二个的用法就是合并后一个对象,也就是说我们在克隆这个对象的时候,哎,在克隆这个对象的时候,把这些我们额外加这些属性给合并进去,那因为内幕已经存在了,所以就把这个内幕给覆盖掉了,当然我们还可以去加一些不存在的一个属性,比如我加一个地址啊,北京来再刷新一下,看它会不会多一个地址的一个属性。刷新。哎,是不是我们的名字修改成剑,并且还多了一个地址的一个属性啊,这个就是。我们的合并一个对象啊。啊,当然,哎,我们这里是直接去写的一些属性,还可以直接去合并一个对象,哎,比如我们在定一个这个temp的一个对象,这个对象就是。
16:05
啊,具备这个。地址。好,上海那。这里我们直接继续使用点点点去展开我们的这个探对象啊,来看一下我们这个探对象属性是不是会合并到这个对象里面。可以看到是不是啊,这个就是合并一个对象,它有两个作用,一个是我们在克隆对象的时候,可以去修改一些啊,它的这个对象原本的一些属性的一些一些值啊。当然如果原对象中哎没有这个属性的话,它会是进行一个合并操作,把这个新增的一些属性给合并的,最后我们克隆的这个对象上面,哎,这是我们的展开运算符的一些基本的一些使用啊,这里复习一下,那接下来回过头来继续看我们这里批量传递purpose这里使用的这个展开运算符它是怎么回事,哎,我们说了,我们的展开运算符它不能直接去展开一个对象,但是通过画括号的时候可以去克隆的对象,但是这里啊,大家注意,这里你看着是也是画括号,哎,里面去包裹了一个这个展开段符展开的一个对象,但是他们的这个含义不一样。
17:17
我们首先来分析一下这两个代码它的一个运行环境,我们这个代码它是在哪里面运行的,在这个背包里面运行的对不对,好,而且这里面我们这些是什么语法,G差的一个语法,那我们的这个大括号的作用是什么?作用是里面放这个表达式对不对,好,接下来再看这里的这个,哎,我们的代码它是运行在哪,运行在这个GS里面对不对,那我们在原生的GS里面大括号作用什么,一般是去定义一个对象对不对,好,首先明白这个它们的所处的这个运行环境不一样,对吧?那他们画括号的含义就不一样,哎,这个画括号啊,是为了让我们在这个里面去写GS的一个表达式,哎,也就是它实际上就是在。展开这个对象明白了吧?哎,那明们可能有疑问啊,明明这边已经说了啊GS啊,就说展开运算不能展开对象会报错哎。
18:10
这点大家要注意啊,这里是我们原生GS中,你不能去展开,就说用展开,从展开对象它会报错,但是这里啊。这里还是原生检,不是啊,我们这里有什么有背,然后有这个react,看到了吗?Be加上这个react的这个核心库,它就允许我们用展开运算符去展开一个对象。清楚了吧,好,那我们来。在这里做一个输出啊,Log输出什么呢?我们直接展开这个P好来。运行一下啊,在这个。浏览器中,我们来看一下这个效果。可以看到并没有报错,是不是也就是说在这个背啊,然后加上这个react这个核心库,它是允许我们去使用点对点运算符去展开一个对象的,哎,不会报错,那但是这个我们来看一下啊。
19:02
这个结果,但是结果为什么没有输出呢?哎,注意点,这点大家注意,就是说我们在背里,也就是在react里面可以使用这个展开预算符去展开一个对象,但是只能去用在什么地方,用在标签组件去传递这个purpose的时候去使用,清楚了吗?你其他地方去使用,没有用的不给你输出。看到了吧,通过这个例子啊,不会输出啊,不会输出。啊。展开运算符。哎,我在这里写了。展开运算符,展开对象啊,只能在这个。标签组件啊,通过属性传递跑的时候使用啊。
20:00
哎,就是。这点要和原生的GS大家一定要区别开啊,同样是大括号,但是他们的这个大括号的意义不一样啊。在这里仅仅是做一个分隔符,也就是我大括号里面,我们要写这个GS的代码了,要写G的表达式了,哎,而不是说原生的GS,它的大括号式,我们再定义对象。
我来说两句