ES6标准新增了一种新的函数:Arrow Function(箭头函数)。

为什么叫Arrow Function?因为它的定义用的就是一个箭头:

x => x * x

上面的箭头函数相当于:

function (x) {
   return x * x;
}

箭头函数相当与匿名函数

() => {
    console.log('箭头函数被调用了');
}

相当于

function (){
    console.log('匿名函数被调用了');
})

用变量接收箭头函数

var a = () => {
    console.log('箭头函数被调用了');
}

相当于

function a(){
    console.log('匿名函数被调用了');
})

带一个参数的箭头函数

x => {
    console.log('带一个参数的箭头函数被调用了,参数是:'+x)
}

相当于

function (x){
    console.log('带一个参数的匿名函数被调用了,参数是:'+x);
}

带多个参数的箭头函数

(x,y) => {
    console.log('带多个参数的箭头函数被调用了,参数是:'+x,y)
}

相当于

function (x, y) {
    console.log('带多个参数的匿名函数被调用了,参数是:' + x, y);
}

有返回值的箭头函数

() => {
    return 1
};

相当于

() => (1);

相当于

function () {
    return 1;
}

有返回值并且带参的箭头函数

x => {
    return "参数是:"+x
};

相当于

x => ("参数是:"+x);

相当于

function (x) {
    return "参数是:" + x;
}

有返回值并且带多个参的箭头函数

(x,y) => ("返回值是:"+x+y);

相当于

function (x, y) {
    return "返回值是:" + x + y;
}

返回对象的箭头函数

() => ({
             username: 'Tom'
         });

相当于

function () {
    return {
        username: 'Tom'
        };
}

返回对象并且带參的箭头函数

(x,y) => ({
    username: x,
    age: y
});

相当与

function (x, y) {
    return {
        username: x,
        age: y
    };
}

包含多条语句并且有返回值的箭头函数

这时不能用这种写法了:

() => (1);

只能用这种写法:

() => {
    if (1 > 2) {
        return 1
    }else{
        return 2
    }
}

相当于

function () {
    if (1 > 2) {
        return 1;
    } else {
        return 2;
    }
}

箭头函数和匿名函数的区别

箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。

原文链接:https://miansen.wang/2018/09/29/1/