00:00
Hello,大家好,我是风雨,那我们这节课呢,我们来讲一这个E6里边一个非常非常好使的一个东西啊,那这个东西叫什么呢?这个东西叫做扩展云悬浮啊扩展。运算符扩展运算符是怎么写的呢?它是三个点点点,那么这三个点呢,我相信大家在看了函数的那个rest参数的时候,一定在这个地方会感觉很熟悉,对吧?跟函数参数的那个rest参数非常非常的像,都是三个点,OK,那么它这个扩展运算符啊,其实它跟函数的参数的那个rest参数呢,是它好比那个rest参数的一个逆运算啊,好比一个逆运算,那么那个。函数的rest参数呢,它那三个点点点的作用呢,是把咱们一堆传进去的散的这种实参,对吧,把它诶整合一下放到一个数组里面去,对吧?按顺序得得得这样排到一个数组里面去,那么这个扩展运算符呢,诶刚好跟它相反,它是用于把一个可以遍历的结构,比如说像我们这个数组啊,把一个数组这种结构的全部把它里边的每一项给展开出来啊展开出来,那这个到底什么意思呢?来我们来看一下。
01:25
诶来let一个AA,那A瑞呢,1233项对吧?诶再多也无所谓啊,都可以,那这地方我们来输出,那么输出的时候呢,我们就输出这个A瑞,那如果说我一旦直接输出A瑞的时候,OK,那么这个时候它必然是一个数组对吧?它这123这三项呢,就是包括在包裹在一个这个中括号里面对吧,一个数组里面去,那这时候如果在这个数组前面加上一个点点点,那么这三个点点点扩展运算符呢,就会把这个数组的每一项给它展开,然后输出来,那这个时候当我一来保存,你就发现它变成了123,那就是这么的神奇啊,就这么神奇,那它呢,要记好,它相当于这个数这个rest参数的一个运算,那么像这个东西啊。
02:14
像咱们这个扩展运算符啊,它有什么,它这个这么牛逼怎么用呢?啊,有什么好用的呢?有什么好用的地方呢?来我们这边来看一下啊,我们来看一下,那么首先我们就来举一个简单的例子,就比如说我要通过这个,比如说t name对吧?哎,document.get elements t name,我们要来获取这个这个标签啊,或者说函数里面arguments等等的这一种类数组的时候,那么我们每次使用这种呢,诶都会有时候某些情况下啊,我想对它使用一个数组的方式的时候呢,就会很尴尬啊,为什么这么说呢?因为我们得把它先转为数组对吧?诶转为数组,那么转为数组的时候呢,ES里边呢,我们可以通过一个。
03:01
这个数组的select啊select方法,然后通过这个apply,然后呢,把那个this指向来指向我们的一个呃类数组,就可以把那个类数组呢转换数组了,那这个呢是ES5的,我们这边也就不再演示它了,对吧?诶刚才呢,我们已经说过了,那我们现在呢,我们就演示一下,诶现在呢,我要把一个类数组同样的要来转换为一个数组的时候,OK,那么这个时候呢,我就不再需要通过那个呃s select的方法了,我们通过点点点就可以了,那我们来看一下,比如说这个地方我有三个div,那么这时候呢,我们先来呃获取一下,那么获取这些div的时候呢,比如叫它诶diys对吧,然后等于一个诶document点上这个get tIgEr,我们来获取一下那div,那它现在获取到的这一个diys啊,这个集合它肯定是个什么呀,它肯定是一个类数组啊,这是没有问题的吧,我们来看一下哈,它有点一个类似数组的这么一个结构,我们来看一下来保存诶你发现。
04:02
它是一个什么?是个HTML啊的这么一个集合,那它的这个构造函数啊,并不是对吧,也就是说它并不是数组,那不是数组意味着什么呢?意味着我们不能对它进行调用数组的方法,因为它原型上没有嘛,你调用那肯定是报错的对不对?那么如果说啊,我就是要对这个东西来调用一下数组的方法的时候呢,我们必然就要涉及到把它诶转为一个这个真正的数组对象,那么转换数组对象呢?ES5的我们就不说了,我们今天讲ES6 OK,那我们来看一下ES6的是怎么做的,好吧,我们给他写个名字,比如叫做六啊div。DD。Div divs,对吧?诶我们新建了这么一个集合,那么这个集合呢,诶看好了,它现在是不是像个数组的结构一样,那么它这种结构也可以被点点点展开,那么展开以后,这里边的每一项是不是就相当于散出来了,对吧?诶那个数组呢,它就相当一个包装啊,把这个商品包包起来,那当你把它包装拆开以后呢,这里边的商品是不是就散落出来了,那么散落出来以后,诶我不行对吧,我还得再把你包装一下,所以这个时候呢,我们先你看哈,先来点点点把它拆开,它拆开现在是不是就拆开了,那么拆开以后又要把它作为一个新数组,所以我们把它放到数组里面去,诶再用一个中括号把它包起来,那这个时候呢,再把整体的这个数组返回给它,那这个时候我们再来输出它的时候,我们来看一下是不是变为一个真正的数组,诶点开一看,你发现这个就是个数组,对吧?诶并且呢,它这个构造函数,那就是我们的这个,那么它的这个构造函数RA时候意味着它原型上就。
05:45
数组的这些方法对不对,比如map pop push对吧?诶非常非常多,因为他现在就是一个数组了,所以呢,这个就是点点点的一个小小的一个演示,对吧?诶它可以把一个类数组转化为数组,那其实可以不用这么麻烦,对吧?诶不用这么麻烦,那我们来看一下。
06:03
这个地方是不是当我们获取的时候,就是一个类数组类呀,诶所以呢,我们这样直接在它前面点点点,然后呢,一个中括号括起来。来,快起来。诶扩起来以后,再把它整体复制给这个diys,那这时候我们来输出它呢,诶它是不是就是那个数组啊。对吧,诶,它就是一个数组,那它使用的时候呢,跟我们平常每转数组也是一样的,比如说DIV0,哎DIV0啊,它的第零个是吧,我给他的这个in呢,HT没有in呢。HTM。比如说像它等于一个一三啊,等于个13,那这个不需要打印了是吧,我把这个干掉,诶把这个干掉来保存,你发现一三就出来了,对吧,那这个呢,就是我们点点点的一个小小的这么一个作用啊,一个作用,那么其实它的作用呢,还很多,那我们这边呢,就再来举一个例子啊,再来举个例子,比如说。我现在呢,依旧还是一个数组,对吧?诶,那我们如果说涉及到要来,比如说什么呢?我们要复制数组啊,哎,我们要合并数组呀,怎么办呢?我们来看一下,我们先来看一个复制啊复制,那我来一个新的一个瑞二,它呢要跟尔瑞长得一模一样,那这样是复制吗?这样不是复制,这样呢,它仅仅是两个这个变量指向了同一个对象,它们是同一个对象,你改变了它一定改变,它改变了反正你一定改变,那这不是复字,我们需要复制两个独立的数字出来,那这时候怎么做呢?我们一样的,哎,从括号括起来对吧,给它个新数组,点点点A来保存。
07:35
哎,保存,那这个时候我们最后再来输出一下这个二。来保存,你发现它就是个新数组,并且它这个数组呢,是绝对不可能等于这个一的first对吧?诶没有问题,这个就达到了复制数组的这么一个作用啊,非常的简单啊,非常简单,那么其实除此之外呢,呃,还有什么呢?其实还很多啊,还有很多。呃,比如说我们再来讲一个,我们再讲个合并,那么在我们ES5之前要来使用合并的时候,我们只能使用数组的content方法对吧,来对它进行合并,那我现在呢,我们也不用ES5了,我们来个ES6的,那这个呢,是第二个数组456啊456,那它要合并怎么办呢。
08:17
他怎么何必呢?诶,这个东西怎么来合并呢?你看哈,我们合并很多种,比如说两个数组合并为一个新的数组,也有呢,把第二个数组合并到第一个去,我们现在看一下,两个合成一个新的,那合成一个新的2V3,那怎么办呢?诶,那就是点点点谁先谁先合并在前面啊,如果我们让它再合并在前面,那就瑞逗号再来一个点点点瑞二,那这时候这个瑞三呢,就是一个全新的这么一个合并以后的数组,123456对吧?123456没问题对吧?没问题,然后再紧接着这是第一种,那还有第二种。那就是我要干嘛呢?我要把第二个合并到第一个里面去,那这还不简单对吧?诶这就非常简单了,我们来看一下怎么合并呢?哎是吧,他现在是个什么呀,他其实就是一个什么,就是一个他自己是吧,他自己,那么他自己我们呢,要把它合并给谁呢?要把这个合并到里面去,那这样呢,其实呃。
09:18
写法也很多吧,哎,非常的简单,我们可以直接在它后面,比如说诶逗号点点点二就可以了是吧,但是要注意的是这个东西得先声明对不对,诶先声明,那么可以放到它前面去,那现在是不是就相当于是个合并了对吧?一个合并了,那它一样的还123456对吧?哎,你当然了,你要把它拆开来啊,你先把它呃提出来啊,也是一样的啊,反正用法都是差不多了,好吧,那这个呢,就是我们这个呃点点点,也就是我们所说的这个扩展云算符的一个使用方式,大家学会了吗?OK,那我们这这个内容呢,就到这里啊,感谢大家,再见。
我来说两句