ECMAScript6中箭头函数的基本用法

箭头函数的作用是更简短的函数并且不绑定this。
箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。

箭头函数在“=>”的左边是参数,参数可空或多个。
右边的是函数体,有一个“简写体”或“块体”,在一个“简写体”中,只需要一个表达式,并附加一个隐式的返回值。在“块体”中,必须使用明确的return语句。

语法:

//没有参数,使用一对圆括号
() => { statements }

//只有一个参数,圆括号可选
(singleParam) => { statements }
singleParam => { statements }

//多个参数
(param1, param2, …, paramN) => { statements }

//可变参数
(param1, param2, ...rest) => { statements }

//默认参数
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
statements }

//如果只有一个表达式,则可省略{ ... }和return
(param1, param2, …, paramN) => expression
//相当于:
(param1, param2, …, paramN) =>{ return expression; }

//如果函数体返回对象字面量表达式,则函数体需要加括号
params => ({foo: bar})

//参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;

例子:

    var f1 = x => x * x;   
    console.log(f1(5));
    //结果:25    
   
    //可变参数
    var f2= (...rest) => {
        var sum=0;
        for(var i=0;i<rest.length;i++){
            sum += rest[i];
        }
        return sum;
    };
    console.log(f2(1,2,3,4));    
    //结果:10
 
    //promise链
    function f3(){
        var p = new Promise(function(resolve, reject){            
            setTimeout(function(){
                console.log('f3');
                resolve('f3回调数据');
            }, 2000);
        });
        return p;
    }
    f3().then(a => {
        console.log(a);       
    })
    //输出:
    //f3
    //f3回调数据

 另一个例子,数组排序:

    var items = new Array(10,8,2,5);
    //sort()会按照字符串排序
    //items.sort(); //结果:[10, 2, 5, 8]
    //数字排序方法1,升序用a-b,降序用b-a
    //items.sort(function(a,b){return a-b});//结果:[2, 5, 8, 10]
    //数字排序方法2
    items.sort((a,b)=>a-b);//结果:[2, 5, 8, 10]
    console.log(items);

浏览器兼容性:IE浏览器不支持。

参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

原文地址:https://www.cnblogs.com/gdjlc/p/14487547.html