使用JavaScript学习计算机科学：第4部分(函数)

介绍

假设您有一个 82 行长且仅包含一系列语句的文件。（我希望这不是真的，但一切皆有可能。）你如何理解程序的作用？您将如何修改或使用它？用这段代码做任何事情会有点困难，因为它没有结构。  

要解决此问题，您可以使用函数。函数是一组执行特定任务的语句。函数允许我们将程序分解为更小的程序，使我们的代码更具可读性、可重用性和可测试性。

内容

• 无效函数

• 值返回函数

• 范围

• 参数

• 模块

虚函数

这种函数列出了程序要执行的步骤。考虑我们正在编写一个程序来让用户登录网站。该程序可能包含以下任务：

• 获取用户名

• 获取密码

• 检查用户名和密码是否存在

• 将用户重定向到他们的仪表板

这些步骤中的每一个都可能包含在登录函数中。这是一个示例函数：

function greet() {
    console.log("Hello, World");
}

这是函数的一般形式：

function functionName() {
    statement;
    statement;
    etc.
}

要执行函数（也称为调用函数或调用函数），请编写调用它的语句。

greet();

这 ()是我们将输入传递给函数的地方。当我们定义函数时，输入被称为参数。当我们调用函数时，输入将是实际值，称为参数。例子：

function greet(name) {
    console.log("Hello, " + name);
}

greet("Alberta");    //Hello Alberta

使用javascript ES6，您可以使用箭头语法定义函数。这是我们使用箭头语法定义的 greet 函数：

let greet = () => console.log("Hello, World");

具有一个参数的函数：

let greet = name => console.log("Hello, " + name);

具有多个参数的函数：

let greet = (fname, lname) => console.log("Hello, " + fname + " " + name);

具有多个语句的函数：

let greet = (fname, lname) => {
    let name =  fname + " " + name;
    console.log("Hello, " + name);
}

因为箭头函数是匿名函数，所以我们通过将函数分配给变量来给函数命名。当您的函数体只有一个语句时，箭头函数会很有用。

值返回函数

这种函数返回一个值。该函数必须以 return 语句结束。此示例返回两个数字的总和。

function add(x, y) {
    return x + y;
}

这是定义返回值函数的一般形式：

function functionName() {
    statement;
    statement;
    etc.
    return expression;
}

表达式的值是函数输出的值。这种函数在存储在变量中时很有用。 

let variableName = functionName();

范围

变量的作用域是程序中可以访问变量的部分。变量可以是局部的或全局的。局部变量的作用域在创建它的函数内部。函数外部的任何代码都不能访问其局部变量。 

此外，当您使用let或const声明变量时，它们具有块范围。块是一组作为一个组一起属于的语句。一个块可以像将我们的代码包装在 花括号中一样简单：

{

let a = 2;

}

该变量a是它所在的块的局部变量。块也可以是循环或 if 语句。例子：  

let a = 1;

if (5 >4){
    let a = 2;
}

console.log(a);     //1

因为我们的控制台语句与我们的第一个变量在同一范围内a，所以它显示该值，即 1。它无法访问 if 块中的变量。现在，考虑这个例子：

let a = 1;

if (5 >4) {
 let a = 2;
 console.log(a);    //2
}

现在将显示 2，因为我们的控制台语句可以访问的变量范围在 if 块内。函数的参数也是局部变量，只能通过函数内部的代码访问。另一方面，全局变量可以被程序文件中的所有语句访问。例子：

let a = 1;

function foo () {
 a = 2;
}

console.log(a);     //1
foo();
console.log(a);     //2

在这个例子中， a是一个全局变量，我们可以在 foo 函数中访问它。第一个控制台语句会显示 1。调用 后foo，将 的值a设置为 2，使第二个控制台语句显示 2。 

全局变量应该很少使用，理想情况下根本不用。因为全局变量可以被程序的任何部分访问，它们冒着以不可预知的方式被改变的风险。在具有数千行代码的大型程序中，它会使程序更难理解，因为您无法轻易看到变量是如何使用的。最好创建和使用局部变量。

但是，如果您需要在程序中的多个位置使用变量，则可以使用全局常量。const 使用关键字 pr event声明变量不会被更改，使其使用起来更安全。您只需要担心在声明它的地方更新常量的值。

参数

回想一下，参数是函数用来接受数据的变量。当函数被调用时，参数被赋予函数参数的值。从 ES6 开始，参数也可以使用 format 指定默认值parameterName=value。在这种情况下，您可以调用不带参数的函数，它将使用默认值。例子：

function greet (name="world") {
 console.log("Hello, " + name);
}

greet();    //Hello World

spread/ rest运算符是 ES6 的新功能，可用于将数组或对象扩展为单独的值，或将函数的参数收集到数组中。这是使用 rest 参数的示例：

function foo(...args) {
    console.log(args);
}

foo( 1, 2, 3, 4, 5);    //[1, 2, 3, 4, 5]

模块

假设现在您有一个包含 1,082 行的文件。（这个我见过，遇到这种事你应该跑。）文件被组织成函数，但很难看出它们之间是如何相互关联的。 

要将相关行为组合在一起，我们应该将代码放在模块中。ES6 中的模块是一个包含相关函数和变量的文件。模块让我们隐藏私有属性并公开我们想在其他文件中使用的公共属性。文件名将是模块的名称。模块也有自己的作用域。要使用模块范围之外的变量，必须将它们导出。未导出的变量将是私有的，只能在模块内访问。  

可以像这样导出单个属性：

export function foo() {
    console.log(“Hello World”);
}

export let bar = 82;

export let baz = [1,2,3];

或者，可以使用一个导出语句导出所有属性：

function foo() {
    console.log("Hello World");
}

let bar = 82;

let baz = [1,2,3];

export { foo, bar, baz };

要使用模块的变量，请将其导入文件。您可以指定要从模块中导入的内容，如下所示：

import { foo, bar, baz } from "foo";

您还可以重命名您的导入：

import { foo as Foo } from "foo";

Foo();

或者您可以导入模块的所有属性：

import * as myModule from "foo";

myModule.foo();

审查

函数允许我们将程序分成更小的程序，以便于管理。这种做法称为模块化。有两种函数：void 函数和值返回函数。void 函数执行其中的语句。一个值返回函数给我们一个值。  

范围是程序中可以访问变量的部分。在函数内部声明的变量，包括函数的参数，都是局部的。块也有作用域，可以在其中创建局部变量。 

未包含在块或模块中的变量将是全局的。如果您需要全局变量，则可以使用全局常量。否则，请尝试将您的代码包含在模块中，因为模块有自己的范围。但更好的是，模块为您提供了代码结构和组织。