ES6中的箭头函数

6.2箭头函数

【1】定义：对绝大多数匿名函数的简写

【2】为什么：反复写function来定义函数很繁琐

【3】何时使用：几乎所有匿名函数都可以用箭头函数简化

【4】如何使用：3句话 步骤

​ i：去掉function，在()和{}之间加=>

​ ii：如果只有一个形参，则可以省略()

​ iii：如果函数体只有一句话，则可以省略{}，如果函数体仅剩的一句话还是return，则必须去掉return

【5】示例：

//     function add(a,b){
//       return a+b;
//     }
// 修改为箭头函数
    var add=(a,b)=>a+b;
    console.log(add(3,5));//8

    
    var arr=["小明","小红","小东"];
//     arr.forEach(function(elem){
//       console.log(`${elem} - 到!`)
//     })
// 修改为箭头函数
    arr.forEach(elem=>console.log(`${elem} - 到!`))

    var arr=[1,2,3,4,5];
//     var sum=arr.reduce(function(box,elem){
//       return box+elem;
//     },0)
// 修改为箭头函数
    var sum=arr.reduce((box,elem)=>box+elem,0) 
    console.log(sum);

6.2.1箭头函数与this

【1】箭头函数的功能：箭头函数可以让函数内的this与函数外的this保持一致！

【2】使用箭头函数的情况

​ i：如果函数中①不包含this，或②希望函数内的this与外部this保持一致时，就可以修改为箭头函数

​ ii：如果不希望函数内的this与函数外的this保持一致，就不能修改为箭头函数

比如：对象中的方法就不能改为箭头函数

​ 如何解决：ES6中为对象的方法定义提供了一种专门的不带function的简写

 var 对象名={
         属性名: 属性值， 
     //解决办法
         方法名(){ ...  this.属性名 ... }
       }
//强调: 既不带:function，又不要加=>。
//好处: 既省略了function，但是又不等同于箭头函数，不会影响内部的this！

【3】示例

        /*
        var lilei={
            sname:"li lei",
            friends:["mj","yq","yk"],
            intr:function(){
                // 这个this指向调用intr函数的对象，可以得到对象lilei
                this.friends.forEach(
                    function(n){
                        //this不能够获取想要的值，因为两个function生成了两个实体墙，this无法穿过
                        console.log(`${this.sname}的朋友们是${n}`)
                    }
                )
            }
        }
        */
        var spp={
            sname:"spp",
            friends:["hh","mm","yy","xy","zz"],
            // intr:function(){
                // es6中为对象的方法提供了不带function的简写↓
            intr(){
                this.friends.forEach(n=>{
                        console.log(`${this.sname}的朋友们是${n}`)
                    }
               )
            }
        }
        spp.intr()