[JavaScript]ECMA-6 箭头函数

概述

箭头函数的作用是为Js提供一种函数的简写方法，箭头函数作用域内不包含this, arguments, super, or new.target，并且不能用于对象的构造函数；

基本语法

[(][params][)] => [(][{]statements[}][)]

• 参数：

参数可有可无，但是无参数的时候必须带括号

() => { statements }

支持Rest parameters 和 default parameters

(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { 
statements }

支持Destructuring

var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f(); // 6

• 表达式

表达式方面大致可分为两类；

一类是接圆括号的：

这类表达式只能编写一条语句，不支持分号，下面这个例子是错误的：

var f = () => (a = "1";b = "2";a+b);

同时元括号默认返回这个唯一语句执行后的值，并不需要带return关键值：

var f = () => (a = "abc";);
console.log(f());//abc

var materials = [
          'Hydrogen',
          'Helium',
          'Lithium',
          'Beryllium'
        ];
console.log(materials.map(m => m.length));//8, 6, 7, 9

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
var f = () => (rest.d);
console.log(f());//40

因为只有一条表达式所以元括号也是可以省略的

var f = () => a = "abc";
console.log(f());//abc

 

第二类是接大括号的：

这一类跟圆括号的差异就是它可以支持多条表达式，但是需要返回值时，必须接return：

var f = () => {
        var a = 1;
        var b = 2;
        return a+b;
    }
console.log(f());//3

结论

花式玩法：

var f = ({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}) => ({a: a, b: b, rest: rest});
console.log(f());

Js语法确实是天马行空.