箭头函数

短命女 2022-01-21 11:21 306阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>箭头函数</title>
    </head>
    <body>
        <script>
            /*
            运用箭头函数：
            首先要去掉function
            然后在去掉function的第一个括号后面加上胖箭头（=>）
            */
            const numbers =[1,2,7,4,5];
            //没有运用箭头函数
            const double =numbers.map(function(number){
                return number*2;
            });
    
            console.log(double);
    
            //运用了箭头函数
            const double1 =numbers.map(number=>{//多个参数带括号，一个参数可以去掉括号，不带参数保留括号
                return number*2;//显示返回
            });
            console.log(`我是一个参数的：${double1}`);
    
            const double2 =numbers.map((number,index)=>{//多个参数带括号，一个参数可以去掉括号，不带参数保留括号
                return `${index}: ${number*2}`;//显示返回
            });
            console.log(`我是多个参数：${double2}`);
    
            const double3 =numbers.map(()=>{//多个参数带括号，一个参数可以去掉括号，不带参数保留括号
                return "hello world";//显示返回
            });
            console.log(`我是没有带参数的：${double3}`);
    
    
    
            /*
            隐式返回
            去掉return
            去掉胖箭头（=>）后面的{}
            */
            const double4=numbers.map(number=>number*2);//隐式返回
            console.log(`我是隐式返回：${double4}`);
    
            /*
            箭头函数是匿名函数
            */
            const greet=name=>{console.log(`hello ${name}`)};
            greet("XYZ")
    
        </script>
    </body>
    </html>