4. =＞ 箭头函数 （Arrow Function）

reference：Arrow function expressions - JavaScript | MDNAn arrow function expression is a compact alternative to a traditional function expression, with some semantic differences and deliberate limitations in usage:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

什么是Arrow Function Expression：

An arrow function expression is a compact alternative to a traditional function expression, with some semantic differences and deliberate limitations in usage:

箭头函数表达式是传统函数表达式的紧凑替代品，有些语义上的限制

• Arrow functions don't have their own bindings to this, arguments, or super, and should not be used as methods.

  • 箭头函数对this，参数，super没有绑定，不应该做为方法使用

• Arrow functions cannot be used as constructors. Calling them with new throws a TypeError. They also don't have access to the new.target keyword.

  • 不能用做构造汗水，会报错。

• Arrow functions cannot use yield within their body and cannot be created as generator functions.

  • 不能作为生成器函数，不能在构造函数主体内使用yield

Syntax:

我这里“抄袭了一下文档并且结合了下前辈的经验”

10分钟理解ES6箭头函数_°PJ想做前端攻城狮的博客-CSDN博客_es6的箭头函数解决了什么问题前言面试中，ES6 是一大考点，当被问到箭头函数时，我们都会说：箭头函数很好用，而且再也不用操心 this 的指向了。面试官：箭头函数是挺好用的，那有哪些不适合使用箭头函数的场景呢？箭头函数在大多数情况下，是很好用的，但是为什么在有些场景，使用箭头函数后会产生问题？是不是箭头函数还不够完善？又有哪些场景会发生问题？该如何解决呢？为了防止血案的产生，重新吧这一块拎出来整理巩固一下。概念ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿名函数的定https://blog.csdn.net/weixin_43745075/article/details/115578888?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166969574116800180664784%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166969574116800180664784&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-115578888-null-null.142%5Ev67%5Econtrol,201%5Ev3%5Econtrol,213%5Ev2%5Et3_control2&utm_term=%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0&spm=1018.2226.3001.41871. param => expression

//Traditional function
const multiply = function ()
{
    return num * num;
}

//Arrow function
const multiply => num * num;

//with param

//Traditional function
const multiply = function (num1, num2)
{
    return num1 * num2
} 

//Arrow function 
const multiply = (num1, num2)=> num1 * num2;
const add10 = (num) => num + 10

2. （param） => expression

//Traditional function
const multiply = function (num1 = 1, num2 =2)
{
    return num1 * num2
} 

//Arrow function 
const multiply = (num1 = 1, num2 = 2)=> num1 * num2;

3. 简介主体

文档中给出了一个具体的例子：

错误示范： 

const func = () => { foo: 1 };
// Calling func() returns undefined!

const func2 = () => { foo: function () {} };
// SyntaxError: function statement requires a name

const func3 = () => { foo() {} };
// SyntaxError: Unexpected token '{'

如果：=> （箭头）后面跟着的标记不是 {} （大括号），那么JS会认为箭头函数具有简洁主体，因此大括号内的语句才会被解析为语句。

正确用法：

const func = () => ({ foo: 1 });

不适用的情况

1. Cannot be used as method

2. No binding of arguments

3. Cannot be used as constructors

4. Cannot be used as generators