箭头函数是必须要掌握的，今天我们一起来学习一下，它给开发者带来方便的同时，也要留意它的「无能」 。先看一个例子：
const names = ['wsy','suyan','前端小课'];let lengths = names.map(name => name.length);console.log('lengths = ', lengths);
结过如图：
文章插图
先看下它的语法：
1、无参数
function call(callback) {callback();}call(() => {console.log('arrow void');});// 箭头函数类似于下面这个函数call(function () {console.log('void');});2、只有一个参数，无返回值
function call(callback) {callback('前端小课');}call(name => {console.log('arrow', name);});// 箭头函数类似于下面这个函数call(function (name) {console.log(name);});3、只有一个参数，有返回值
function call(callback) {// 返回值为 4let len = callback('前端小课');console.log(len);}// 只有一行表达式省略大括号call(name => name.length);// 类似于这个call(name => {return name.length;});// 箭头函数类似于下面这个函数call(function (name) {return name.length;});4.有多个参数，有返回值
function call(callback) {let len = callback(1, 2, 3);console.log(len); // 6}// 多个个参数，有返回值，只有一行表达式省略大括号call((a, b, c) => a + b + c);// 类似与这个call((a, b, c) => {return a + b + c;});// 箭头函数类似于下面这个函数call(function (a, b, c) {return a + b + c;});从上面这些例子可以知道，每个箭头函数都能写出一个与其功能相同的普通函数，那为什么还用箭头函数？
在 连接你、我、他 —— this 这节课程中使用箭头函数解决了 this 指向的问题 。不知道你们有没有发现当写下面这两个函数的时候，默认使用的是箭头函数：
setTimeout(() => {// 这里是箭头函数}, 100);setInterval(() => {// 这个是箭头函数}, 200);使用箭头函数有几点需要留意：
1、让函数更简短，上面例 3 就是一个很好的例子；
2、没有自己的 this 和 ，比如有如下代码：
let person = {name: 'suyan',showName: function (age) {window.setTimeout(() => {console.log('this = ', this);console.log('arguments = ', arguments);console.log(this.name, age);}, 100);}};person.showName(20);打印结果为：
3、不能作为构造函数；
let Dog = name => {this.name = name;};// 错误 Uncaught TypeError: Dog is not a constructorlet aDog = new Dog('fe');let Dog2 = function (name) {this.name = name;};// 正确let aDog2 = new Dog2('fe');4.箭头函数没有属性：
let Dog = name => {this.name = name;};Dog.prototype; // undefined5.不能通过 call、apply 绑定 this
var name = 'I am widow';let animal = {name: 'animal',showName: age => {console.log('this = ', this);console.log('name | age = ', this.name, age);}};let dog = {name: 'dog'};animal.showName.call(dog, 20);animal.showName.apply(dog, [21]);let bindName = animal.showName.bind(dog, 22);bindName();运行代码，结果如下：
【= 箭头函数 · 方便、快捷，也要小心坑】
- 如何写递归
- vue.js第一次加载会触发哪几个钩子函数
- 巨鲸音乐盒 – 难以拒绝的免费正版音乐诱惑！方便搜索下载正版MP3歌曲的工具
- 旅游通票
- 沈阳代办
- 数学+统计+概率分布 R语言数据处理最基本的函数以及实际小案例
- 关于pytorch中的distributedsampler函数使用
- 三.函数的调用
- 程序员的内功修炼——深入理解函数栈帧
- 杭州市民卡中心