[JavaScript]ECMA-6 箭头函数

时间：2023-12-28 08:18:02

概述

箭头函数的作用是为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(); //
  • 表达式

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

一类是接圆括号的：

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

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());//

结论

花式玩法：

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

console.log(f());

Js语法确实是天马行空.

相关文章