JavaScript 函数：用通俗易懂的方式解释给五岁小孩听

目录

什么是函数

函数声明

函数表达式

箭头函数

如果你是编程和 JavaScript 的新手，你可能会发现很难理解函数的概念。

我刚开始学习函数的时候，以为自己完全理解了。但是，当我尝试在一些编程挑战中应用函数时，却反而更加困惑了，不得不反复翻阅笔记才能更深入地理解函数。

我一度开始怀疑自己，觉得我可能无法胜任。但我没有放弃，而是开始深入研究函数，最终理解了它们。

所以这篇文章是写给像我这样的新手看的，希望能用简单的方式理解这个概念！

出发吧！😂

请查看下面的目录，了解我们将在本文中讨论哪些内容。

目录

• 什么是函数
• 参数和实参
• 退货声明
• 调用函数
• 函数声明
• 函数表达式
• 箭头函数

什么是函数

函数是JavaScript应用程序的基本组成部分，也是该语言中最核心的概念之一。

我们来看一台简单的机器。它的功能是什么？它接收输入信号，进行内部处理，然后输出信号。

例如，看看下面这台咖啡机。它使用咖啡粉，进行冲泡，就能做出一杯美味的黑咖啡。

这正是函数的作用！😊

我们将数据传递给一个函数，在函数内部处理该数据或对该数据进行一些操作，然后输出或返回该数据。

最简单的函数形式就是一段简单的代码，我们可以在代码中反复使用。这意味着什么呢？

使用函数，您无需在程序中一遍又一遍地编写相同的代码。相反，一旦创建了函数，您就可以随时重复使用它。有点困惑？我们稍后再讨论。

现在我们来创建一个简单的函数。

function myName() {
    console.log('My name is Sumudu');
}

myName();

所以，我们到底做了什么？

• 我们从function关键字开始。这就是我们声明函数的方式。
• 然后，我们定义了一个函数名，即myName。这是函数的给定名称，该函数会简单地向控制台输出一些内容。
• 然后，我们添加了parenthesis。我们用它parenthesis来添加参数，我们将在本文后面部分对此进行更深入的探讨。
• 然后，我们curly braces创建了一个函数体。所有位于函数体内部的代码curly braces都称为函数体。当我们运行这个函数时，执行的就是函数体内部的代码。
• 要使用此函数，我们只需写出函数名，后跟一个点号parenthesis。这个过程称为“调用”、“运行”或“执行”该函数。

这就是编写 JavaScript 函数的简单方法及其语法！😊

你可能会想，这样我们岂不是要用函数编写更多代码了？没错！

但它的妙处在于，我们可以在程序中需要时反复使用这个函数，而无需重复编写代码。让我们来看一个简单的例子来理解这一点。

假设你想给一个数加十。下面介绍一种不用函数就能实现的方法。

const number = 1 + 10;  
// Answer = 11

现在让我们用函数来实现这个功能。

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

const firstNumber = addTen(1);  // Answer = 11

如您所见，第二个示例中我们编写了更多代码，但当我们想将十加到多个数字上时，编写更简洁的代码会很有帮助。请查看以下示例。

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

const firstNumber = addTen(1); // Answer = 11
const secondNumber = addTen(2); // Answer = 12
const thirdNumber = addTen(3); // Answer = 13
const fourthNumber = addTen(4); // Answer = 14
const fifthNumber = addTen(5); // Answer = 15

希望现在你能明白我们是如何通过函数一次编写代码并多次重复使用的。函数帮助我们减少代码量、重用代码并循环利用代码，这真是太棒了！💃

现在我们来了解一下函数的其他几个组成部分，它们分别是：

• 参数和实参
• 退货声明
• 调用函数

参数和实参

这是我在学习函数时一直搞不明白的地方。我记不住它们之间的区别，所以很纳闷我的函数为什么运行不正常😄

让我们来看一下下图。

如您所见，我们在括号内添加了函数参数。这是执行该函数需要接收的输入值或输入值列表。您可以将其视为一个空占位符，稍后需要将其替换为实际值。

参数是输入数据对应的函数参数的实际值。因此，在上面的例子中，占位符被实际数据“1”替换。

退货声明

使用return关键字，我们可以让函数返回任何值。有些函数可能不会返回值，但大多数函数都会返回。我们将这个值称为函数的结果。然后，这个返回值可以在代码的后续任何地方使用。

我们来看一个例子。

function addTen(number) {
    console.log(number + 10);
}

addTen(1);  // Answer = 11



function addTwenty(number) {
    return number + 20;
}

const firstNumber = addTwenty(1);  // Answer = 21

在第一个函数中，我们没有返回任何值；我们只是在函数内部记录了一个值。然后，我们调用了该函数，并得到了记录的值为“11”。

在第二个函数中，我们返回了一个值作为函数的结果。然后，我们将该函数存储在另一个变量中firstNumber，并调用了该函数。因此，每次调用该函数时，返回值都将是函数的结果。

你需要记住的一点是，这个return关键字会立即退出函数。它首先返回我们要求它返回的值，在本例中就是 `.` number + 20。之后，函数就执行完毕了！

它不会执行return关键字之后的任何其他代码。例如，在下面的代码中，您可以看到console.log关键字后面有一个 ` return.`。但是，如果您运行这段代码，您会发现代码在关键字之后立即停止，return并且不会执行 ` console.log.`。

function addTen(number) {
    return number + 10;
    console.log("Let's add numbers!")
}

const firstNumber = addTen(1);  // Answer = 11

所以，如果你想运行该函数console.log，你必须把它放在return关键字之前。

调用函数

假设你已经编写了一个函数。那么我们该如何使用这个函数呢？

要使用一个函数，我们只需写出函数名，后面跟一个句点parenthesis。这个过程就叫做“调用”、“运行”或“执行”该函数。

如果你还记得第一个例子，要使用我们创建的函数记录名称，我们使用了函数名称，后面跟着parenthesis我们编写的函数（在函数外部）。

function myName(){
    console.log('My name is Sumudu');
}

myName();

如果你想存储函数返回的值并在以后使用它们，你可以创建一个新变量，并将函数名作为该变量的值，然后将函数名存储在另一个变量中。

让我们来看下面的例子，了解如何做到这一点。

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

const firstNumber = addTen(1);  // Answer = 11

在上述例子中，

• 我们创建了一个名为 .的变量firstNumber。
• 我们将函数名（addTen）作为该变量的值赋给了它。

现在你可以随时使用这个变量来调用该函数了！😊

好了！现在你已经了解了函数的基本组成部分。那么让我们看看下面的图片，回顾一下所有内容，并了解函数的结构！

我希望现在你对函数的工作原理和 Javascript 函数的基本组成部分有了基本的了解。

编写 JavaScript 函数的方法有很多种。接下来的几节我们将介绍三种编写函数的方法。这三种方法分别是：

• 函数声明
• 函数表达式
• 箭头函数

准备好了吗？出发！

函数声明

我们使用function关键字来声明函数，就像声明变量一样😊

所以，我们再声明一个函数，根据出生年份计算年龄。

//Function declaration
function calcAge1(birthyear) {
    return 2021 - birthyear;
}

const age1 = calcAge1(1986);

让我们看看我们都做了些什么，

• 我们function通过输入姓名calcAge1来计算年龄。
• 我们已经将函数参数设为birthyear。这就是我们将要用来计算年龄的输入数据。
• birthyear我们将通过从当前年份中减去该年份来计算年龄，并返回结果。
• 然后，我们将此数据存储function在另一个变量（age1）中并调用该函数，并且我们已将实际数据提供给内部以计算年龄calcAge1。

这就是声明函数的简单方法。希望你明白了！

函数表达式

现在让我们看看如何使用函数表达式来执行相同的功能。

//Function expression
const calcAge2 = function(birthyear) {
    return 2021 - birthyear;
}

const age2 = calcAge2(1986);

之前我们从关键字开始讲解function。但是对于函数表达式，我们需要将函数写成表达式的形式。记住，表达式会产生一个值，所以我们必须创建一个变量来存储这个值。

• 首先，我们创建一个变量来存储函数（calcAge2），这将是实际的函数。
• 然后，我们像之前一样编写函数，这次省略了函数名。这样它就以匿名函数的形式调用。但你也可以使用函数名。
• 接下来，我们添加函数参数、函数体，然后调用该函数。

是的，就这么简单！

好了！现在你可能想知道函数声明和函数表达式之间到底有什么区别或重要性。

这两者之间有一个主要区别。那就是，我们实际上可以在代码中定义函数之前调用函数声明。我们称之为函数提升。

函数声明会被提升，但表达式不会！

下面的代码中，我在函数声明和函数表达式之前就调用了该函数。因此，如果您运行这段代码，cosole.log将会为“calcAge2”函数产生错误。试试看！

`

//Function declaration
const age1 = calcAge1(1986);

function calcAge1(birthyear) {
    return 2021 - birthyear;
}


//Function expression
const age2 = calcAge2(1986);

const calcAge2 = function(birthyear) {
    return 2021 - birthyear;
}

console.log(age1, age2);

`

您可以点击此处了解更多关于JavaScript 提升的信息。

好的，让我们深入了解箭头函数吧！

箭头函数

现代 JavaScript 中还有另一种声明函数的方法，那就是使用箭头函数，它看起来就像一个箭头：() => {}

箭头函数实际上更简洁、编写速度更快。让我们看看之前用过的例子，并将其转换为箭头函数。

`

//Arrow function
const calcAge3 = birthyear => 2021 - birthyear;

const age3 = calcAge3(1998);

`

让我们看看我们都做了些什么，

• 我们创建了一个变量（calcAge3）来存储函数，就像以前一样，因为箭头函数也是一个函数表达式。
• 然后，我们添加了，birthyear因为我们想要计算出生年份。
• 然后，我们添加了一个箭头（=>），这就是我们称之为它的原因arrow function。
• 然后，我们只需写出我们想要返回的内容（2021 - birthyear）。
• 然后，我们调用了与之前相同的函数。

如您所见，这段代码编写起来更加简便快捷。原因之一是，我们不再需要像curly braces之前那样使用 `like` 来定义函数体的代码块。另一个原因是，return这里的 `like` 实际上是隐式执行的；它会自动返回值，而无需显式定义return关键字。

所以这其实只是最简单的形式！

但是，当我们需要返回多个参数或多个结果时，这种形式将会改变，并且变得更加复杂。

现在让我们来看一个更复杂的例子，其中我们需要使用多个参数和代码。

假设我们需要检查我还需要多少年才能退休。为此，我需要我的出生年份和姓名作为参数。然后，我需要检查我当前的年龄，并将其与退休年龄（65岁）进行比较。最后，返回一个结果，说明我还需要多少年才能退休。

`

const yearsToRetirement = (birthyear, firstName) => {
    const age = 2021 - birthyear;
    const retirement = 60 - age;
    return `${firstName} will be retired in ${retirement} years!`;
}

const retirement = yearsToRetirement(1986, 'Sumudu');
console.log(retirement);

`

所以在这里，我们用 `<div>` 包裹了参数parenthesis，并用 `<div>` 包裹了代码curly braces。这和我们在函数声明和表达式中所做的一样。这就是简单箭头函数和复杂箭头函数之间唯一的区别。

我希望现在你能理解如何编写简单和复杂的箭头函数。

为了回顾并更好地理解这三种函数之间的区别，请参考以下代码。

`

//Function declaration
function calcAge1(birthyear) {
    return 2021 - birthyear;
}


//Function expression
const calcAge2 = function(birthyear) {
    return 2021 - birthyear;
}


//Arrow function
const calcAge3 = birthyear => 2021 - birthyear;

`

以上就是 JavaScript 函数的基础知识。当然，函数的内容远不止这些基本概念，但只要掌握了这些基础知识，其他内容就很容易理解了。

让我们为所有读到最后并努力理解这个复杂概念的读者鼓掌。

希望这篇文章能帮助你解开所有关于函数的疑问！

学习愉快！🤗