这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战
箭头函数
ES2015的标准增加了：arrow-functions即箭头函数，这篇文章我们就来了解一下什么是箭头函数。
箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。
如何使用
函数参数
- 函数无参数 如果函数没有参数，必须要用圆括号，使用如下：
() => { dosomething }
- 函数有且仅有一个参数 如果函数有且仅有一个参数，我们可以选择用圆括号或者不用，使用如下：
(singleParam) => { dosomething }
或
singleParam => { dosomething }
- 函数有
>=两个参数 如果函数有大于或等于两个参数，必须要用圆括号，使用如下：
(param1,param2,...,paramN) => { dosomething }
- 支持剩余参数和默认参数 箭头函数支持剩余参数和默认参数，使用如下：
const getUserMsg = (name = '也笑', age, ...rest) => {
console.log(name, age, rest);
}
getUserMsg(undefined, 812, '183cm', '80kg'); // 也笑 812 [ '183cm', '80kg' ]
函数体语句
这里不关注参数的多少，主要是函数体的语句，所以下面的例子都是以一个参数的箭头函数为例。
- 没有
{}包裹
const getName = name => name;
//等价于
const getName = name => { return name };
getName('也笑'); // 也笑
如果没有{}包裹等价于有{}包裹且有return。
- 有
{}包裹 此种情况就和平时写的函数没有什么区别了，正常使用即可。
const getNameLength = name => {
// dosomthing
return name.length
};
getNameLength('也笑'); // 2
- 有
()包裹 加括号的函数体返回对象字面量表达式，比如我们定义的函数想返回一个对象，使用如下：
const getUserMsg = name => ({ name });
getUserMsg('也笑'); // { name: '也笑' }
注意事项
我们需要注意的是：箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this，也就说this指向能继承到this所在的环境。
总结
- 当箭头函数的函数体只有一个
return语句时，可以省略return关键字和方法体的花括号。 - 当箭头函数只有一个参数时，可以省略参数的圆括号。
- 在箭头函数中使用
this，要注意它的指向
如果你想了解ES的其他特性，请移步到 ES2015+碎片化学习，每天都在向前走一步，这是所有文章的目录入口。
