函数的扩展

• rest参数
• 箭头函数

rest参数-三点运算符

ES6 引入 rest 参数（形式为“...变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中

<script type="text/javascript">
        function foo(...value){//value为数组
            value.forEach(function(item,index){
                console.log(`索引：${index},值：${item}`);
            })
        }
        foo(1,2,3);
        //索引：0,值：1
        //索引：1,值：2
        //索引：2,值：3
    </script>

注意：只能放到最后位置，前面如果还有其他的，他会去掉前面固定部分的参数

上面是三点运算符作为参数引用，
三点运算符的另外一个作用：作为拓展运算符使用：
扩展用法：将数组插入到另外一个数组的中间

        let arr=[1,6];
        let arr1=[2,3,4,5];
        arr=[1,...arr1,6];//把arr1的每个值拿出来放到arr的中间
        //遍历数组
        console.log(arr);//数组
        console.log(...arr); //数组遍历后的实际值

再来一个小例子

        function push(array, ...items) {
            for (var i = 0; i < items.length; i++) {
                array.push(items[i]);
            }
        }
        var a = [];
        push(a, 1, 2, 3);
        //扩展运算符
        console.log(...a);

总结：三点运算符应用
1、作为扩展参数用
2、作为拓展运算符使用

箭头函数

最重要的一点：箭头函数this和普通函数的this：简头函数没有自己的作用域，这一点以后续axios调用时非常有用,多用于定义回调函数上

1、简头函数如果外层有函数，this就是外层函数
2、如果外层没有函数，this即是window

      <script>
        var name = '外部window';
        var obj = {
            name: '内部obj',
            nameprintf: function() {
                alert("非箭头函数:"+this.name)
            },
            nameprintf2: () => {
                alert("箭头函数:"+this.name)
            }
        }
        obj.nameprintf(); //'内部obj'
        obj.nameprintf2();//外部window
    </script>

简头函数小括号有几种情况：
1、没有形参时，小括号不可省略

    <script type="text/javascript">
        let fun = () => {
            console.log("hello");
        }
        fun();
    </script>

2、一个形参时，小括号可省略

        let fun2 = username =>console.log(username);
        fun2("wang.qj");

3、2-n个形参时，小括号不可省略
正确的写法：

let fun3 = (username,password) =>console.log(username,password);
fun3("wang.qj","123456");

错误的写法：
let fun4 = username,password =>console.log(username,password)
fun4("wang.qj","123456");

参数部分的小括号使用小结

1、没有参数时，括号不可省
2、一个参数时，可省略括号
3、大于一个时，小括号不可省略
总结一下：只有参数个数是一个时，可省略小括号

函数体的几点说明：
1、只有一条语句时，函数体的花括号可以省略，花括号省略时会把语句的执行结果返回，也就是相当于自动return 。

        let x=10;
        let y=20;
        let fun = () =>x+y;
        console.log(fun());//30
        let fun2 = () =>{x+y;}
        var value=fun2();
        console.log(value); //undefined 因为这时没有返回值

2、函数体有多条语句时，花括号不可以省略

        let fun2 = (x,y) =>{
            let result=x+y;
            return result;
        }
        console.log(fun2(20,30));//50

3、返回json

    <script type="text/javascript">
        let fun1=id=>{
            return {name:"wang.qj",id:id};
        }
        alert(fun1(1).name);
    </script>

4、由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。
错误的写法：

    <script type="text/javascript">
        let fun1=id=>{name:"wang.qj",id:id};
        alert(fun1(1).name);
    </script>

正确的写法：

    <script type="text/javascript">
        let fun1=id=>({name:"wang.qj",id:id});
        alert(fun1(1).name);
    </script>

函数体使用总结：
为防止写错，尽量用以下方式

    {
        return ****;
    }