通过滑梯演示讲解 JavaScript 的箭头函数

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

如果您使用 JavaScript 已有几年时间，那么您可能对这种语法很熟悉：

function addTen(num){
  return num + 10;
});

console.log(addTen(10));
//20

这种函数语法在 ES5（ECMAScript 5）中很流行。

这种语法的一个主要优点是：它包含了“function”这个词，所以很明显你是在编写一个函数！

一个函数显然可以接受 0 个或多个参数，并且每次被调用时都会执行一组特定的语句。

但随后，JavaScript 世界在 2015 年随着 ES6 的发布而向前迈进了一大步。

现在，与上面相同的函数可以这样写：

let addTen = (num) => num + 10;

console.log(addTen(10));
//20

现在，ES6 中没有function关键字，也没有 return 语句！ES6 中的函数更加简洁明了。

所以，由于那些明显的线索都被移除了，你可能很难理解箭头函数的各个部分。

幸运的是，正如你很快就会通过一些动画看到的那样，一旦你学会以新的方式可视化箭头“=>”，箭头函数就很容易理解了。

所以，箭头函数就像水滑梯一样。为了更好地理解本教程，了解map 函数和作用域可能会有所帮助。

箭头函数可视化

让我们更深入地了解一下addTen函数。

let addTen = (num) => num + 10;

console.log(addTen(10));
//20

该函数将转换一个参数，并输出加上 10 后的该参数。

转变是通过那个细微的“=>”箭头实现的。

也可以用 return 语句来写：

let addTen = (num) => {return num + 10};

console.log(addTen(10));
//20

我喜欢在脑海中把那个箭头想象成一根滑管，以此来展示实际发生的情况。我的意思是：

等号就像滑梯，箭头就像着陆垫。

箭头函数遵循以下模式：

（参数）=> {语句}

所以让我们用 addTen 函数示例将这些添加到图表中。

最后我们需要展示的是参数（本例中为 10）如何向下传递，并在函数语句中可用。以下是具体步骤。

就这么简单！

现在，我们来看一个有两个不同参数的例子。以下是我们的新函数：

let multiply = (num1, num2) => {return num1 * num2};

console.log(multiply(2, 10));
//20

在这种情况下，我们只需将两个参数相乘。它们将一起沿滑梯下降。就像这样：

还有一个例子你应该了解——将 map() 方法与箭头函数结合使用。

map() 方法会将数组中的每个元素按顺序传递给箭头函数。

我们来看一个例子——假设你有一个数字数组，你想求出每个数字的平方根。

这是代码。

let nums = [1, 4, 9];

let squares = nums.map((num) => {
  return Math.sqrt(num);
});

console.log (squares)
// [1, 2, 3]

你需要对 map 方法有所了解才能理解这一点。不过，你可能还会注意到它简洁的语法——map() 方法比编写 for() 循环要简洁得多。

这段代码执行的操作如下：

1. nums数组中有三个元素，因此num参数向下移动 3 次。
2. Math.sqrt() 方法每次都取该数的平方根。
3. 每次都将结果存储在squares数组中。

箭头函数与传统函数的区别

你可能会想……这仅仅是语法上的区别吗？

实际上，传统的 ES5 函数和 ES6 函数在一个重要的方面有所不同。

最大的变化在于箭头函数没有自己的作用域。因此，如果你尝试使用`this`关键字，你会惊讶地发现它指向的并不是箭头函数的作用域。

回到我们之前的幻灯片比喻，这意味着幻灯片顶部和底部的内容相同。如果我们使用 ES5 函数，那么幻灯片顶部和底部的内容就会不同。

要在代码中快速识别这一点，只需查找`function`关键字。如果看到它，则表示正在创建一个新的作用域。如果没有看到，则假定您正在使用封闭函数的作用域。

对更多图文教程感兴趣？

如果您想阅读更多关于 HTML、CSS 和 JavaScript 的可视化教程，请访问CodeAnalogies 主网站，那里有 50 多个教程。