JS中箭头函数写法及5种简写规则

左手的ㄟ右手 2024-03-27 10:28 55阅读 0赞

ES6箭头函数的引入，使函数的写法变的更加简洁。 箭头函数没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。  
![在这里插入图片描述][7e9ace24ed154ba387110fd2c81256cf.png_pic_center]

#### 普通函数的书写 ####

function test(zjcopy) {
          //声明式写法 
        console.log(zjcopy) 
    } 
    test('hello')

或者

let test2 = function(zjcopy) {
          //赋值式写法 
        console.log(zjcopy) 
    } 
    test2('Good')

**箭头函数的书写 ()=>\{\}**

const test = (zjcopy) => {
         
        console.log(zjcopy) 
    } 
    test('hello')

#### 箭头函数简写规则： ####

（1）箭头函数只能用赋值式写法，不能用声明式写法  
（2）如果参数只有一个，可以不加括号，如果没有参数或者参数多于一个就需要加括号  
![在这里插入图片描述][30f6b2aa755248db81ad45652ae7fe00.png_pic_center]

（3）如果函数体只有一句话，可以省略函数体大括号  
（4）箭头函数返回对象时，省略大括号，用小括号括起来。  
![在这里插入图片描述][45bf9326e924417396a39f9122807b2d.png_pic_center]

（5）如果函数体只有一句话，并且这一句话是return 返回值 那return也要省略

const add1=function(p1,p2){
         
    return p1 + p2;  
    } 
    add1(3, 4) 
     
    const add2 = (p1, p2) =>p1 + p2 
    add2(10, 25)

（6）如果函数不是一句话,不能省略这个大括号

const add1=function(p1,p2){
         
    console.log(p1);  //3 
    return p1 + p2;  //7 
    } 
    add1(3, 4) 
     
    const add2 = (p1, p2) =>{
         
    console.log(p2);   //25 
    return p1 + p2;   //35 
    } 
    add2(10, 25)

[7e9ace24ed154ba387110fd2c81256cf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/dee5ee4a1fad4772aee385b2fc6f9ce7.png
[30f6b2aa755248db81ad45652ae7fe00.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/03168a15af1942c99e6b0ebb18c33311.png
[45bf9326e924417396a39f9122807b2d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1fd39537499e4d318d4a3e1bfc883182.png