ES6扩展——数组扩展

1、结合扩展运算符使用。通过扩展运算符，在调用函数的时候，把一个数组展开，然后作为这个函数的参数

            //结合扩展运算符使用
            function foo(a,b,c){
                console.log(a);  //1
                console.log(b);  //3
                console.log(c);  //2
            }
            //通过扩展运算符，在调用函数的时候,把一个数组展开,然后作为这个函数的参数
            foo(...[1,3,2]);  
            

 

实际应用：比如从服务端拿到了json数据，它代表用户信息的集合，相对于对象，按照一定规则使用数组，长度会更短一些，就更节省流量

            //实际应用：比如从服务端拿到了json数据，它代表用户信息的集合，相对于对象，按照一定规则使用数组，长度会更短一些，就更节省流量
            //比如数据交互的时候规定好用户的数据格式,第一个代表名字；第二个代表年龄；第三个是数组，代表他的爱好;第四个是他的简短描述
            
            
            const user = ['小明',14,['吃饭','打游戏'],'我没有女朋友'];
            function say(name,age,hobby,desc){
                console.log(`我叫${ name },我今年${age}岁,我喜欢${ hobby.join('和') },${ desc }`);
            }
            //es5写法:
            say(user[0],user[1],user[2],user[3]);  //我叫小明,我今年14岁,我喜欢吃饭和打游戏,我没有女朋友
            //es6写法:
            say(...user);
            //以前还会使用apply这种方法,基本上所有函数都可以调用apply
            //第一个参数跟一个对象,它可以改变调用方法时this的指向,但是传undefined的时候就不会改变
            //第二个参数就是传方法的参数,接收的是一个数组,跟扩展运算符差不多,会把数组展开,作为函数的参数
            //跟call很相似,不过call的后面就是跟参数的列表,而apply可以跟数组
            say.apply(null,user);
            
            
            //对比一下两种方式,更推荐使用扩展运算符
            const arr = [1,2,233,3,4,5];
            //Math.max()接收一堆参数,然后会帮你把里面的最大值求出来
            //当参数是不确定个数的时候,就可以用扩展运算符或者apply展开数组,
            console.log(Math.max(...arr));  //233
            console.log(Math.max.apply(null,arr));  //233，不改变this 的指向,把arr传过去
            

 

2、使用扩展运算符复制或合并数组

            //复习，使用扩展运算符来合并复制数组
            const arr1 = [1,2,3,4];
            const arr2 = [4,3,2,1];
            const arr3 = [2.2,'123',false];
            //复制
            const cArr1 = [1,2,3, ...arr3];
            const cArr2 = [...arr1];
            const [...cArr3] = arr3;
            //合并
            const cArr4 = [...arr1,...arr2,...arr3];
            
            

 

3、es6新特性:扩展运算符可以将生成器函数传出来的值作为数组项,形成数组,

可以通过生成器让一个函数暂停,通过yield关键字暂停,同时暂停的时候还可以传出去一个值

            //es6新特性:扩展运算符可以将生成器函数传出来的值作为数组项,形成数组,
            //可以通过生成器让一个函数暂停,通过yield关键字暂停,同时暂停的时候还可以传出去一个值
            function *g() {
                console.log(1);
                //生成器函数通过yield关键字就可以暂停这个函数的执行
                yield 'hi~';  //到这里函数就停止了,除非.next
                console.log(2);
                yield 'imooc~';
            }
            
            
            //调用生成器,生成的就是一个迭代器对象
            const arr9 = [...g()];  //通过扩展运算符调用生成器函数,这个时候arr就变成hi~和imooc组成的数组了
            console.log(arr9); //['hi~','imooc~']
            //通过.next方法可以继续执行这个函数
            const gg = g();
            gg.next();  //1
            setTimeout(function(){
                gg.next();  //2
            },1000);
            
            //借助生成器和Promise可以极大的改变书写异步流程的方式,从某个角度讲是解决了回调地狱
            

 

4、Set

es6提供新的数据结构Set集合,可以使用扩展运算符把它转成一个数组
Set有一个特性是它里面的元素是不能重复的,所以可以用来去重

            //es6提供新的数据结构Set集合,可以使用扩展运算符把它转成一个数组
            //Set有一个特性是它里面的元素是不能重复的,所以可以用来去重。除了数组之外，还可以传入一个类数组。
    
            let set = new Set([1,2,2,3]);
            console.log(set);  //{1,2,3}
            //可以用set去重,去完重再转为数组(用扩展运算符)
            console.log([...set]); //[1,2,3]