ES6（1）：箭头函数

旧城等待， 2022-12-08 12:56 79阅读 0赞

#### 一、什么是箭头函数 ####

所谓箭头函数，如其名，就是带箭头的函数，能够定义匿名函数。  
  用箭头函数之前我们的基础写法：

let fun = function () { 
      console.log('fun()');
    };
    fun();

![在这里插入图片描述][20200919113723679.png_pic_center]  
  我们用箭头函数这样写：

let fun1 = () => console.log('我是箭头函数');
        fun1();

![在这里插入图片描述][20200919113837736.png_pic_center]

//声明一个函数
    let fn = (a,b) => { 
        return a + b;
    }
    
    //调用函数
    let result = fn(1, 2);
    console.log(result);

![在这里插入图片描述][20201123201308547.png_pic_center]

#### 二、箭头函数 形参的情况 ####

##### 1. 没有形参，并且函数体只有一条语句，()可以省略 #####

//1.没有形参，并且函数体只有一条语句，()可以省略
    let fun1 = () => console.log('我是箭头函数');
    fun1();

##### 2. 一个形参，()可以省略 #####

let fun2 = x => x;
    console.log(fun2(5));

##### 3. 两个及两个以上的形参，()不能省略 #####

let fun3 = (x, y) => x + y;
    console.log(fun3(25, 39));

##### 打印结果： #####

![在这里插入图片描述][20200919114216602.png_pic_center]

#### 三、箭头函数 函数体情况 ####

##### 1. 函数体只有一条语句或者是表达式的时候，\{\}可以省略。此时 return 必须省略，而且语句的执行结果就是函数的返回值。 #####

let fun4 = (x,y) => x + y;
     console.log(fun4(20, 40));//60

##### 2. 函数体不止一条语句或者是表达式的情况，\{\}不可省略。 #####

let fun5 = (x, y) => { 
       console.log(x, y);//34 38
        return x + y;
    };
    console.log(fun5(34, 48));//82

##### 打印结果： #####

![在这里插入图片描述][20200919114602726.png_pic_center]

#### 四、箭头函数 this的指向 ####

箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this。  
  扩展理解： 箭头函数的this看外层的是否有函数，如果有，外层函数的this就是内部箭头函数的this，如果没有，则this是window。

##### 1. 没有箭头函数时 #####

let btn = document.getElementById('btn');
    //没有箭头函数
    btn.onclick = function () { 
         console.log(this);//btn
     };

##### 2. 箭头函数 #####

//箭头函数
    let btn2 = document.getElementById('btn2');
    
    let obj = { 
         name : 'kobe',
         age : 39,
         getName : () => { 
             btn2.onclick = () => { 
                 console.log(this);
             };
         }
     };
    obj.getName();//window

#### 五、箭头函数基本特点 ####

##### 1、this 是静态的，this 始终指向函数声明时所在作用域下的 this 的值（也可看第四部分内容） #####

![在这里插入图片描述][20201123201925451.png_pic_center]

##### 2、不能作为构造实例化对象 #####

let Person = (name, age) => { 
    this.name = name;
        this.age = age;
    }
    let me = new Person('xiao',30);
    console.log(me);

![在这里插入图片描述][20201123202052525.png_pic_center]

##### 3、不能使用 arguments 变量 #####

let fn = () => { 
    	console.log(arguments);
    }
    fn(1,2,3);

![在这里插入图片描述][2020112320221823.png_pic_center]

#### 六、箭头函数实践 ####

##### 1、点击 div 2s 后颜色变成『粉色』 #####

HTML代码：

CSS代码：

div { 
        width: 200px;
        height: 200px;
        background: #58a;
    }

JS代码：  
以往写法：

//获取元素
    let ad = document.getElementById('ad');
    //绑定事件
    ad.addEventListener("click", function(){ 
        //保存 this 的值
        let _this = this;
        //定时器
        setTimeout(() => { 
            //修改背景颜色 this
            _this.style.background = 'pink';
        }, 2000);
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]  
使用ES6箭头函数写法：

//获取元素
    let ad = document.getElementById('ad');
    //绑定事件
    ad.addEventListener("click", function(){ 
        //定时器
        setTimeout(() => { 
            //修改背景颜色 this
            this.style.background = 'pink';
        }, 2000);
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]

##### 2、从数组中返回偶数的元素 #####

以往写法：

![在这里插入图片描述][2020112320445478.png_pic_center]

使用ES6箭头函数写法：

const arr = [1,6,9,10,100,25];
    const result = arr.filter(item => item % 2 === 0);
    
    console.log(result);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 2]

[20200919113723679.png_pic_center]: /images/20221123/037e9951559f452eb5a7a3cbe2df564f.png
[20200919113837736.png_pic_center]: /images/20221123/6281378c8ca543c498d82c1e205fa37b.png
[20201123201308547.png_pic_center]: /images/20221123/81d2f55820ef4439aace01236ded9661.png
[20200919114216602.png_pic_center]: /images/20221123/3d51258109ef447daa34805affe9a7ac.png
[20200919114602726.png_pic_center]: /images/20221123/226131a568804ee68c7dbf0f4e0f84cd.png
[20201123201925451.png_pic_center]: /images/20221123/05e6ec0e86774b29be8abfb957d99d16.png
[20201123202052525.png_pic_center]: /images/20221123/672b1fe7ec2c4078b4a0c55b7d8f068b.png
[2020112320221823.png_pic_center]: /images/20221123/c7e177efecee40dd829dedeca9e2f90e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/39aa3adb5a3c4fa8be2cf6c0aa7c004f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/6a8b30c096734177bbc544204fc8af25.png
[2020112320445478.png_pic_center]: /images/20221123/12d0953e22194e28952768c5b0f35a86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/95aa882073b64139b98cb3286b259f1e.png