web前端—前端三剑客之JS-ES6(7)：函数参数及箭头函数

菜鸟教程：https://www.runoob.com/w3cnote/es6-function.html

目录

函数参数

箭头函数

---

函数参数

1、参数变量是默认声明的，所以不能用let或const再次声明,否则报错： Uncaught SyntaxError: Identifier 'x' has already been declared

        function fun1(x = 1, y = 2) {
            // let x = 3;     //参数变量是默认声明的，所以不能用let或const再次声明,否则报错： Uncaught SyntaxError: Identifier 'x' has already been declared
            return x*y;
        };
        console.log(fun1(5));

2、函数参数不允许重复，否则报错（Uncaught SyntaxError: Duplicate parameter name not allowed in this context）

        function foo(name,name='xiaoyu') {  
            // 函数参数不允许重复，否则报错（Uncaught SyntaxError: Duplicate parameter name not allowed in this context）
        };

3、使用解构赋值方法传递默认参数，避免fun1方法不写x只写y参数时报错

        function fun2({n=6,m=6}={}) {   // 使用解构赋值方法传递默认参数，避免fun1方法不写x只写y参数时报错
            console.log(n*m);
        };
        fun2({m:8});
        fun2();

 

4、默认值参数只能设置为尾参数，否则调用方法的时候不能省略还需要再手动传入

        function fn3(x,y=4,z) {
            console.log(x,y,z);
        };
        fn3(3,5);     // 结果：3 5 undefined
        fn3(3,4,5);

 5、扩展运算符接收不定长参数,并将多余的参数存放到一个数组对象中

        function fn4(p1,p2,...pn) {
            console.log(p1,p2,pn);
        };
        fn4(3,5,7,8,9,666);

   

箭头函数

语法：函数名 = (参数) =>{函数体;}; 

• 参数只有一个的时候可以省略()
• 函数体只有一句的时候可以省略{}
• 函数体语句只有一句并且是return语句的时候，return可以省略

        fn1 = name =>name;
        // 等同于
        function fn1(name) {
            return name;
        }


        fn2 = (name,age) => name+'的年龄是'+age+'岁';
        fn3 = name =>console.log('我的名字叫：'+name);

• 没有参数的箭头函数不能省略()

fn4 =() => console.log('一个没有参数的箭头函数');

• 函数体中超过一行语句的时候必须使用{}
• 可以使用默认值参数、结构赋值参数、不定长参数

• 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象

        let name = 'doc1'
        let arr = {
            name :'doc2',
            fo1:function(){
                name :'doc3',
                console.log(this.name);    // 结果：doc2
            }
        };
        arr.fo1();