JavaScript箭头函数

 

箭头函数相当于其他语言的 Lambda 表达式或闭包语法，箭头函数是普通函数的简化写法。

箭头函数的语法格式如下 ：

{pararnl, pararn2,..., pararnN) => {statements }

相当于：

function (paraml, param2,..., paramN) {

        statements

}

如果箭头函数的执行体只有一条 return 语句 ，则允许省略函数执行体的花括号和 return 关键字。也就是说，如下两种语法有等同效果：

(paraml, param2, ..., paramN) => expression 
//等同于: (paraml , param2, ... , paramN) => {return expression;}

如果箭头函数的形参列表只有一个参数，则允许省略形参列表的圆括号 。 也就是说， 如下两种语法有等同效果：

(singlePararn) => {statements} 
//等同于 :singleParam => {statements}

箭头函数代码示例：

其中  map()与forEach()区别 ：     

        // map()函数有返回值，forEach()没有返回值
        // map()对原数组不起作用，生成一个数组。forEach()会对原数组产生作用

 <script>
        var arr = ['yeek','fkit','leegang','crazyit'];
        // 用函数作为map（）方法的参数
        var newArr1 = arr.map(function(ele){
            return ele.length;
        });
        // 使用箭头函数作为map（）方法的参数
        var newArr2 = arr.map((ele)=>{
            return ele.length;
        });
        // 箭头函数，只有一个形参，可以省略圆括号
        // 执行语句只有一条，且为return语句，可以省略return关键字
        var newArr3 = arr.map(ele => ele.length);
        console.log(newArr3);

        // 使用函数作为forEach()方法的参数
        arr.forEach(function(ele){
            console.log(ele);
        });

         // 使用箭头函数作为forEach()方法的参数
        arr.forEach((ele)=>{
            console.log(ele);
        });

         // 箭头函数，只有一个形参，可以省略圆括号
        // 执行语句只有一条，可以省略执行体的花括号
        arr.forEach(ele => console.log(ele));
    </script>

    
    <script>
        // 当没有参数时，参数列表的圆括号不可以省略
        var f = ()=>{
            console.log("测试");
            console.log("end");
        }
        // 执行f函数
        f();
    </script>

运行结果：

 

与普通函数不同的是，箭头函数并不拥有自己的this 关键字

——对于普通函数而言 ， 如果程序通过 new 调用函数创建对象，那么该函数中的 this 代表所创建的对象；如果直接调用普通函数，那么该函数中的 this 代表全局对象 (window)。

代码示例：

    <script>
        function Person(){
            // 实例属性this
            this.age = 0;
            // 全局方法，定时器1000毫秒执行一次
            setInterval(function growUp(){
                // 对于普通函数来说，直接执行该函数时， this 代表全局对象 (window) 
                console.log(this === window);
                this.age++;
                console.log(this.age);//全局对象window下age值不确定，所以输出NaN
            },1000)
        }
        // 1，得到对象p 2，调用Person函数
        var p = new Person();
        setInterval(function(){
            console.log(p.age);//此处访问 p 对象的 age, 将总是输出 0 
        },1000);
    </script>

运行结果：

箭头函数中的 this 总是代表包含箭头函数的上下文。 

如果直接在全局范围内定义箭头函数，那么箭头函数的上下文就是 window 本身，此时箭头函数中 的 this 代表全局对象 window

代码示例：

    <script>
        function Person(){
            // 实例属性this
            this.age = 0;
            // 全局方法，定时器1000毫秒执行一次
            setInterval(() => {
                // 箭头函数中的 this 总是代表包含箭头函数的上下文 
                console.log(this === window);
                //此处的 this, 将完全等同于 Person 构造器中的 this 
                this.age++;
                console.log(this.age);//此处访问this为Person下的age, 将总是输出数值不断加 1 
            },1000)
        }
        // 1，得到对象p 2，调用Person函数
        var p = new Person();
        setInterval(function(){
            console.log(p.age);//此处访问 p 对象的 age, 将总是输出数值不断加 1 
        },1000);
    </script>

运行结果：

 

箭头函数并不绑定 arguments, 因此不能在箭头函数中通过 arguments 来访问调用箭头函数的参数。箭头函数中的 arguments 总是引用当前上下文的 arguments。

arguments：浏览器传递给函数的隐式参数arguments。

在函数调用的时候，浏览器每次都会传递进两个隐式参数：

1. 函数的上下文对象this

2. 封装实参的对象arguments

代码示例：

    <script>
        var arguments = "li";
        //箭头函数中的 arguments 引用当前上下文的 arguments 
        var arr = ()=>arguments;
        //输出上下文中的“li”
        console.log(arr());
        function foo(){
            //箭头函数中的 arguments 引用当前上下文的 arguments 
            //此时 arguments 代表调用 foo 函数的参数 
            var f = (i) => 'hello,'+arguments[i];
            //传入形参 1-->给i
            return f(1);
        }
        console.log(foo("china","dadaguai","dog"));
    </script>

运行结果：

 

上述代码中，arguments是有值的，它的值就是我们传递进去的参数，虽然我们没有给foo函数定义形参，但是我们还是可以通过arguments来调用传递给函数foo的实参。

 

由于箭头函数写代码很简单，容易犯得错误：

1、函数返回对象的错误 

{name:'li'｝用花括号包着的为一个Object 对象

<script type="text/javascript ">
 var f =() => {name:'li'};
 console.log(f()) ; 
</script>

但是上面的程序还原为普通形式：

   <script type="text/javascript">
        var f =function(){
            return name:'li'   //程序报错
        };
        console.log(f()) ; 
    </script>

正确形式：{name:'li'}把他用圆括号括起来

 <script type="text/javascript ">
        var f =() => ({name:'li'});
        console.log(f()) ; 
</script>

 

箭头函数不允许在形参列表和箭头之间包含换行 ； 否则会提示语法错误。例如，如下函数将会提示语法错误：
 

var func = () 
=> 'Hello';

正确形式：

var func = () => 
'Hello';

2. 解析顺序导致的错误 

虽然箭头函数所包含的箭头不是运算符，但是当箭头函数与其他运算符在一起时，也可能 由于解析顺序导致错误。

var func;
func = func || () => "yu" ; 

程序先处理 func ll(), 这样处理就会导致代码发生错误。