00:00
大家好,我是学习园地的特约讲师高若峰,这节课我们看一下ES6的结构赋值和扩展预算服啊这些功能,嗯,所有的,它不是说新加的功能,它不像是其他的,像我们数组里边新加的方法呀,字串里边新加方法呀,那属于新加的功能,这种呢,它不是新加的功能,就像我们健康函数啊,是一种新的模式,那不用它呢,我们用原来的方式也可以去编程,那这种呢,像结构赋值和扩展运算符呢,它应该也不算什么新的功能,因为不用他们,我们也可以完成我们的开发工作,但是呢,用上他们,我们可以简化我们的代码,使我们的逻辑更清晰,是这样的主要目的。来,我们先来一个看,先看一下解剖赋值。一个天门我们叫做结构赋值,随便写一个,然后我们在这里边写上script,在这边加上什么叫结构赋值呢?你比如说,呃,我们声明一个对象,或者是一个数组,想把里边的内容提出来,单独形成变量,比如说我们来声明一个数组,AR等于。
01:03
这里边等于这里边,呃,有一个123,就简单几个,那我想把A付给一个变量,B负给变量,C负给一变量,就是这样,呃,123就是ABC啊,123分别赋给三个变量,你看一下,我们如果不用ES6新学的这种结构赋值,我们怎么能把它赋给三个变量呢?那就是AA等于什么?AR里边的零下标我们才能把它拿出来,然后let b下标AR我们E,然后let c等于A。下标二,只有通过这种方式才能够把数组里的三个元素转成三个变量。然后我们a.log白印b.log白印C点打印,我们来看一下。F12看结果,你看123才可以对面,那同样如果是对象中的内容,你比如说let obj成为一个对象,用接森的一个格式啊,你比如说这里边有个呃,Name,这里边呃上,比如说张三,然后年龄。
02:04
是十岁性别。那如果我们想把它变成三个变量,是用一样的方式,什么light name等于半值可Co。这都都无所谓了,你这都可以生明常量,然后我们比如说OB节点name拿过来,Let h等于OBOB节点,呃,静。年龄啊,然后性别等于OB,点性别这样的方式name.log然后年龄点log,然后性别点到我们分别打印看这果。你看是这样的一个情况,那就比较麻烦,那有没有简便的方式呢?我们不用这种方式,有简便的方式。看一下就用解解构赋值,把它的结构给解开,然后赋给几个变量,你看怎么办呢,我们直接。你比如数组,哎,我也声明一个数组,前面等于后边。
03:03
这个速度或者直接这个变量都行。变量也行,速度也行,总之都代表后边的数度,你看,然后呢,我这里边直接传ABC,这里边的ABC就相当于light声明了三个变量,三个变量分别是这里边对应的三个值,123,这里面三个值,来看一下这个ABC是不是一样可以给我们打印出来。你看是一样的,那同理对象我们在打印的时候,我们也不用这种方式一个一个去获取了,我们怎么办呢?用同样啊,使用let,然后我们大括号,这里边等于可以直接obg是一样的,因为它也代表这个对象的,你看这里边name,年龄以及性别。我们看一下一不一样可以给我们打印出来,你看同样可以是这几个打印出来,那想象一下现在用这种方式,或者是这种方式是不是要优于这种方式,一样能完成这样的一个功能,但是呢,我们用接起来这个就比较简单了。
04:00
所以呢,我们后边在学框架的时候,或者我们平时写程序的时候,经常会用到把对象中的某个方法取出来呀,把对象中的某个东西取出来,就像我们学。嗯,外派的时候就是模块化边长的时候,我们出了比如说cost这里边添加的方法,对吧,M2相乘的方法,然后呢,呃。这块可以不用,可以是包含到,然后呢,From从比如说common.gs文件里边去过去,就相当于把这个文件里边的两个方法给我们做成两个变量,不然的话我们就需要获取到,然后一个一个获取,所以呢,这样是比较方便的经常应用的一种方式解构赋值,但是呢,也需要注意几个细节,哪几个细节呢,我把这个还是这么拷过来,这样的话你看起来就比较比较方便啊,就不用这种方式用掉,呃,数组呢,这个我也。掉直接一其是一样的啊,这没有什么改变。你看。首先呢,结构赋值一定要确定一点是什么呢?两左右两边的结构要必须一样才可以,比如数组里边左右两边是一样的ABC对不对,当然变量名你是对边起的,因为它这块没有通过下标,你比如说啊XY对吧,这会换成X换成。
05:15
Y,这是没问题的,你看我们一打印还是123对吧,就相当于我们新起的这个电力流,由我们决定。那么数组的时候呢,它是按顺序的,你这个里边的个数你不能多于这个,多余没有意义,因为这里边一共才三个,对不对,但是呢,我接收的时候,你看这个变颜色了,接收的时候用四个接收肯定是不行的,对不对就不是了,但是少于它可不可以呢?它会按顺序,数组里边前两个负给它,那这个C的变量就没有了,对吧?那这块你看给我搞错了对吧?你看我们结构必须一样,但数组前后的顺序是,嗯,也就是接收的可以少于实际的,来我们看一下。这是没问题的量,你看一和二没有给我们报任何错误,对吧?你比如说数组里边有100个,我既想要前两个变成变量,那用这种方式就可以了,而对象的结构,结构赋值是什么样的呢?名称必须和这个名称前前后名称是一样的,你比如说我这改成内一。
06:09
就不行了。左右两边结构是一样的,改成那一你现在刷新一下。你看就没有内容一这个不是说像数组一样,因为数组是没有键对不对,而我对象呢,相当于这个是键属性嘛,对吧,属性名和这个名称必须是一样的才可以,而且呢跟顺序没有关系,它比较数组是跟顺序有关的,那你比如说我少一个。但是这个就不能用了,找一个你看。专心点。没问题对吧,那假如说我年龄放在前边,我这块名字放在这块,可不可以呢?看一下也没问题,那一样是可以的,因为对象这种结构赋值,它是用来指什么的呢?是根据这个属性名称来给我们复制结构的,名称要对应个数可以少,对吧,名称对应就行,不是按顺序,数组是按顺序的,所以呢,数组也可以结构复值,对象也可以解构复制,只要注意一些细节,当然我们还可以有一些更复杂的一写法混合的写法,比如说呃,我们后期像做呃。
07:08
做用框架开发的时候很复杂,你比如说有的时候呢,我们可以是一个数组对吧,数组里边呢,我们包含B项,比如包含A是十对吧,B是比如说20这样的,然后呢,里边呢,数组里边再包含数组,这里边假如说是123嗯这样的一个结构,然后呢,也可以包含单数据类型,比如说包含个八,比如说包含个字符串对吧哈。很复杂对吧,那么我们这样的复杂能不能给我们结构呢,也可以,但是呢,你左右两边怎么样,必须是一样的。必须是一样的,那可以是有两种方式,你比如说我们接收的时候,如果只接受外层的,那我们你看这是一个元素,这又是一个元素,这又是元,这元素我们用四个元素去接受行了,如果你用两个的话,就接受前两个对不对,那你看。但是数组外层数组,那我这块也得用数组对不对,你看我用one two three。
08:04
对吧,One two three four。接受一下,怎么都变颜色了,One two three。万兔,没你啊。来我们试一下能打印出来啊,然后点,然后后点忘,然后所。点,然后点我们自己打印下。看一下你看可以了啊,咱们变灰色也没关系,你看只要我们不成这样结构,按外层元素,那我们颗粒度还可以化小,什么叫颗颗粒度化小呢?我们不可以,只不光是只接受外层的,你看我们把这个。注掉我们还可以接收外层里边的几层的对吧?那这块我们接收里边的,我们就可以用什么接收啊,用A和B接收来接收这两啊对不对,这个接受对象的里边的值一定要一样,那数组呢,我们这块也用数组也加一个数组,这块就不能叫AB了,里边那个变量它不是求名了嘛,对吧?那我们这块嗯,XYZ接受三个,然后这块还是three,这还是负单个的接收对不对?所以呢,我们这块就可以单个的打印了,同单个打印了。
09:16
a.log对吧,b.log然后x.log y.log然后z.log然后是呃点log和什么lo。你看总共变成了单独这样的变量,我们看一下可不可以。啊,X已经被定义了。重复定义的应该是上面我们定一波XY上面的我们。把这些掉。不知道。好,名字内没有出去的。来我们看一下,你看全可以,所以呢,这是我们解构赋值的时候,我们可以做一个颗粒度。更细化一些,当然这么复杂的用起来就比较少了,这样情况通常我们用外层的就可以了,但结构支持这样的,呃,功能我们得知道。
10:07
好,我们再看一个下一个知识点,什么扩展运算符,也就三个点这样的运算符,那三个点运算符它有什么作用呢?什么叫扩展运算符呢?比如说。呃,我们把以前的都注释掉啊,都注意掉,我把些都注掉注掉,不然的话咱命名有可能重合啊。都住掉,然后。上去。你比如说我这块来声明一个AR1这样的一个数度等于,这里边我们写个什么,呃,123这样的一个结构,然后呢,我再声明一个,呃,来比如说AR这样的一个数组等于里边有什么呢?里边有呃789,然后我们看一下,我们打印一下这个a.log。A,打一下我们看一下结果啊。加新一下,你看789没问题对不对,那现在我想把这个123的数组跟它合并,放到它这里边,放到这个数组里边怎么办呢?怎么办呢?那我们通常的办法怎么呢?数组里边一个一个取过来,或者是合并对不对,也都可以做到,但是我们现在有三点运算符怎么办呢?你放在前面,让我放到后边也好,直接点点点A1,什么意思呢?就相当于我把A1速度展开,相当于把内容都拿出来放到这块来,现在我们看AR的数组,是不是将AR第一个数组内容给我们展开的呢?就相当于一个扩展了呢,扩展运算图。
11:35
你看可以,那当然了,这里边我们还可以在这块生多个数字,都可以放在一个礼拜二,等于假如说我这块来个456对吧,那我在后边展开点点点点什么A2R2,那把这个数据展开。打开这两个数组里边,你看123789456。没问题,这就是破产决策。也就是呃,三个点运算符,三个点运算符,那这三个点运算符除了在这用,那我们还可以在什么地方用呢?我们还可以作为参数使用,经常我们在函数的时候用作参数使用来。
12:13
关掉一下。啊,比如说我这块声明一个函数,我就不用那个进程函数直接声明,还是用这种方法也好,或者是对象中的方法是一样的,对了吧,用什么都行,比如说我就一个数方法随便来一个,里边需要三个参数ABC这样的三个参数,那正常呢,我们调用的时候,嗯。a.log。一点。嗯。b.C点你看我们里边什么也没返回,就是想调用一下这个正常我们调用这个方法的时候,我们可能才123是不这样,然后我们看一下反应结果。反应是123没问题,对不对,那现在我想把一个数组,比如说乘以一个let,零等于这样的123,那怎么办呢?传到第三个参数里边。
13:05
那有的说调的时候那有结构赋值,我可以把它赋给三个变量,三个变量再传进来可以没问题,对不对,那数组里边有三个十个,那怎么办呢?对吧,那我们调的时候可以干嘛呀?可以在这个位置变成点点点arr。你看就相当于把L展开了,把里边的三个值拿出来放到这个参数里边,作为它的三个参数,你看。我们一样可以获取到什么123,所以呢,在调用函数的时候,有多个参数,想把数组作为参数往里传的时候,当然我们可以用CCL那个方法也能达到同样的效果啊,但是用这种会更方便一些。不放面积,这是呃。作为参数传递的时候啊使用的,当然做参数传递的使用呢,我们在声明的时候,你看我们在声明的时候,不光是在调用的时候,我们用它把数组给展开。那我们声明一个函数function,比如说DEMO,那我们可不可以用点点点呢,AR呢?或者点点点ARGS呢?随便声明一个变量呢?这样的方式可不可以呢?
14:08
然后我们这里边儿你看啊。在调用的时候,这里边我们调用DEMO的时候,我传123。看一下,那这里边生明一个变量啊。它是给我们变成了三个参数呢,想象还是什么,还是一个,呃,数组的一个参数呢,想象一下是什么样的,先是看一下可不可以这样。可不可以这样,那直接这块,你看我直接args.log,我先打印一下,你看会不会把123相当于给我们合成一个数值呢,就反过来用。你看是相当于给我们合成一个数据对吧,所以呢,我们调参数的时候,1234就变成了可变参数了,六我传几个都行,它都给我们传到这个数字被根Q来,你看。这个错误是你个浏览错,跟你没关系,你看对吧,所以呢,用这种我们用两种方式,一种呢是调用的时候使用它会把数组展开,形成多个参数,使用另外一种的声明的时候使用这个,那我们就变成了可变参数,两种操作方法,所以经常在后边咱们的学习框架使用的时候,你看经常会有这种方式。
15:17
调用一个方法,其实呢,就把这个数组或者对象怎么办,就把数据这种把它展开了,对吧,这样去应用,那这样的是形成的一个可变参数,当然了你这里边也可以有一些其他的一个变量,比如说这里边成为一个A,一个B,然后再逗号,那什么意思呢?相当于一和二分别付给A和B,这个参数里边是扣除前面两个,把其余的展开放到这里边。变成可变参数也是可以的。发现氧的。这3456对吧,那一和二跑哪去了,一和二付给A和B了,是这样的一个情况,大家要清楚啊。所以这就是我们这节课要讲的这样的东西,当然也有一些注意点啊,你比如说结构赋值的左右两边必须有值,说明这个不能分开,这也是呃,我们需要注意的地方,这个呢,咱们忘说了,你加上。
16:03
什么意思,你比如说我们在声明啊,声明一个解构赋值的时候。我如果。看一下这在这个位置吧,这个位置你看我来声明A和B。我现在不想复值对吧,我后边再赋值,这样是不行的啊,也就是我们在声明和赋值是不能分开的。所以呢,右边也必须有直,这是错误的。那我刷新一下,你看是错误的,右边必须有值等于12134,什么都行,这样才可以。所以这块要注意啊,声明的时候必须有。这是我们呃,一定要注意的这个地方。然后呢,嗯,左右两边必须一样,这个咱们也要清楚啊。呃,扩展运算符可以展开数组,咱们说了,默认参数咱们也用了,对不对?可以用它去调用生呃使用的时候全参用,作为呃食参用,也可以在声明的时候作为行参用,也都说了,这两个知识点在我们用的时候是比多的,能把我们代码变得更简洁一些,用的就是比较多,但是知道细节我们就怎么用都不错了,不然的话,你如果不知道细节,见到别人用,你以为只是固定用法呢,所以呢?
17:22
明白原理,明白一些细节,这样的话,我们在任何场合,任何变形的用法,那你都会了解了。好,谢谢大家,这。
我来说两句