JavaScript基础之箭头函数

箭头函数的语法格式如下

(param1,param2,...,paramN) => {statements}

该箭头函数等价于

function(param1,param2,...,paramN){
	statements
}

如果箭头函数的执行体只有一条return语句，则允许省略函数执行体的花括号和return关键词。

(param1,param2,...,paramN) => expression
//等价于(param1,param2,...,paramN) => { return expression；}

如果箭头函数的形参列表只有一个参数，则允许省略形参列表的圆括号。

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

下面代码示范了使用箭头函数代替传统函数。

<script>
    var arr = ["arr1","arr2","arr3","arr4"];
    //使用函数作为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);
    
    arr.forEach(function(ele){
        console.log(ele);
    });
    arr.forEach((ele)=>{
        console.log(ele);
    });
    arr.forEach(ele=>console.log(ele));
</script>

如果函数不需要形参，那么箭头函数的形参列表的圆括号不可以省略

<script>
    var f = () => {
    	console.log("测试箭头函数");
    	console.log("函数结束");
    }
    f();
</script>

与普通函数不同的是，箭头函数并不拥有自己的this关键字
如果程序通过new调用函数创建对象，那么该函数中的this代表所创建的对象；
如果直接调用普通函数，那么该函数中的this代表全局对象(window)。

<script>
    function Person(){
        this.age=0;
        setInterval(function growUp(){
            console.log(this===window);
            this.age++;
        },1000);
    }
    var p = new Person();
    setInterval(function(){
        console.log(p.age);
    },1000);
</script>

输出结果为

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

<script>
    function Person(){
        this.age=0;
        setInterval(() => {
            console.log(this===window);
            this.age++;
        },1000);
    }
    var p = new Person();
    setInterval(function(){
        console.log(p.age);
    },1000);
</script>

输出结果为

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

如果返回的是一个对象，需要在外面加上一个括号

<script>
    var f =()=>({name:'yeeku'});
    console.log(f());
</script>

箭头函数不允许在形参列表和箭头之间包含换行

var func = ()
	=>'Hello';//会提示错误
//正确写法为
var func = () =>
'Hello';

当箭头函数与其他运算符在一起时，应该将箭头函数放在圆括号中

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