谷粒商城24 - 前端基础 ES6 函数优化(箭头函数)

Myth丶恋晨 2023-03-02 10:22 35阅读 0赞

### 文章目录 ###

*   *   *  参数默认值
         *  不定参数
         *  箭头函数
         *   *  函数只传递一个参数的情况
             *  多个参数, 方法体只有一行的情况
             *  多个参数 ,方法体有多行的箭头函数写法
         *  箭头函数与解构表达式综合

### 参数默认值 ###

//es6以前判断参数为空的做法
            function add(a, b){ 
                b= b||1 ;
                return a+b;
            }
            console.log(add(10));
    
    
            //es6的写法
           function add2(a , b= 1 ){ 
                return a +b ; 
           }
           console.log(add2(20));

可以看出来, 第二个方法, 即使b没有传递值, 但是算出来是21 , 说明使用了默认值1  
![20200728200414723.png][]

### 不定参数 ###

如下可以传递多个参数

function fun(...values){ 
    
                console.log(values.length)
            }
            fun(1,2);
            fun(1,2,3,4);

![20200728200827244.png][]

### 箭头函数 ###

#### 函数只传递一个参数的情况 ####

//箭头函数传递一个参数的情况 
    
        //以前的写法
        var print = function(obj){ 
            console.log(obj);
        }
    
        //es6的写法
        var printes6  = obj => console.log(obj);
    
        // 调用printes6 方法, 传递 hello
        printes6("hello");

![20200728201321828.png][]

#### 多个参数, 方法体只有一行的情况 ####

//多个参数, 方法体只有一行的情况
        var sum2 = (a, b) => a +b;
    
        //测试调用
        console.log(sum2(1,2));

#### 多个参数 ,方法体有多行的箭头函数写法 ####

//多个参数 ,方法体有多行的箭头函数写法
        var sum3  = (a , b ) => { 
            c = a+b ;
            return a+ c ;
        }
        //测试调用
        console.log(sum3(6,6));

### 箭头函数与解构表达式综合 ###

对象作为参数, 传递进去, 用解构表达式, 直接获取其属性

const person = { 
            name: "jack",
            age: 21,
            language: ['java','js','css']
        }
    
        var hello2 = (param) => console.log("hello, "+ param.name);
    
        hello2(person);
    
        //使用解构表达式, 解构出person对象的name属性, 直接调用即可
        var hello3 = ({ name}) => console.log("hello, "+ name);
    
        hello3(person);

![20200728203452152.png][]

[20200728200414723.png]: /images/20230208/8cce0b9f03ab49659ae1e978d3bdbfc2.png
[20200728200827244.png]: /images/20230208/a9bb9caeb54b4b09ab2ca14f61f1a257.png
[20200728201321828.png]: /images/20230208/5cc50fd97a7d4841b16f481e5ecdb24c.png
[20200728203452152.png]: /images/20230208/8317fddb2901464bab43132c44672616.png