跳到主要内容

JavaScript 函数和函数表达式

提示
  1. 函数的基本概念：JavaScript中的函数是执行特定任务的代码块，用户可以定义自己的函数。
  2. 函数的声明与调用：函数使用function关键字声明，然后通过函数名进行调用。函数可以有参数和返回值。
  3. 函数表达式的使用：函数也可以定义为表达式，并存储在变量中。这些函数可以是匿名的，并通过变量名调用。

JavaScript 函数​

函数是执行特定任务的代码块。

假设您需要创建一个程序来创建一个圆并对其上色。您可以创建两个函数来解决这个问题：

  • 一个用于绘制圆的函数
  • 一个用于上色的函数

将复杂问题分解为更小的部分，可以使您的程序易于理解和重用。

JavaScript 还有大量内置函数。例如，Math.sqrt() 是用于计算数字的平方根的函数。

在本教程中，您将学习用户自定义函数。

声明一个函数​

声明函数的语法是：

function 函数名称() {
  // 函数体
}
  • 使用 function 关键字声明函数。
  • 命名函数的基本规则与命名变量类似。为函数写一个描述性的名称更好。例如，如果函数用于加两个数字，您可以将函数命名为 add 或 addNumbers。
  • 函数体写在 {} 内。

例如，

// 声明一个名为 greet() 的函数
function greet() {
  console.log("你好");
}

调用一个函数​

在上面的程序中，我们声明了一个名为 greet() 的函数。要使用该函数，我们需要调用它。

这是调用上述 greet() 函数的方式。

// 函数调用
greet();

JavaScript 函数的工作原理

示例 1：显示文本​

// 显示文本的程序
// 声明一个函数
function greet() {
  console.log("你好！");
}

// 调用函数
greet();

输出

你好！

函数参数​

函数也可以带参数声明。参数是在声明函数时传递的值。

带参数的 JavaScript 函数的工作原理

示例 2：带参数的函数​

// 显示文本的程序
// 声明一个函数
function greet(name) {
  console.log("Hello " + name + ":)");
}

// 变量名称可以不同
let name = prompt("输入一个名字：");

// 调用函数
greet(name);

输出

输入一个名字：Simon
Hello Simon :)

在上述程序中，greet 函数带有一个 name 参数声明。提示用户输入一个名字。然后调用函数时，向函数传递了一个参数。

注意：在声明函数时传递的值称为参数。调用函数时传递的值称为参数。

示例 3：两数相加​

// 使用函数的程序，两数相加
// 声明一个函数
function add(a, b) {
  console.log(a + b);
}

// 调用函数
add(3, 4);
add(2, 9);

输出

7;
11;

在上述程序中，add 函数用于找出两个数字的和。

  • 该函数带有两个参数 a 和 b 声明。
  • 使用函数名称和传递两个参数 3 和 4 在一个，2 和 9 在另一个中调用函数。

注意您可以根据需要多次调用函数。您可以编写一个函数，然后使用不同的参数多次调用它。

函数返回​

可以使用 return 语句将值返回给函数调用。

return 语句表示函数已结束。return 之后的任何代码都不会执行。

如果没有返回值，则函数返回一个 undefined 值。

带返回语句的 JavaScript 函数的工作原理

示例 4：两个数字之和​

// 程序以添加两个数字
// 声明一个函数
function add(a, b) {
  return a + b;
}

// 从用户那里获取输入
let number1 = parseFloat(prompt("Enter first number: "));
let number2 = parseFloat(prompt("Enter second number: "));

// 调用函数
let result = add(number1, number2);

// 显示结果
console.log("The sum is " + result);

输出

Enter first number: 3.4
Enter second number: 4
The sum is 7.4

在上面的程序中，数字之和通过函数使用return语句返回。并且该值存储在 result 变量中。

使用函数的好处​

  • 函数使代码可重用。您可以声明一次并多次使用它。
  • 函数使程序变得更容易，因为每个小任务都被分解成一个函数。
  • 函数提高了可读性。

函数表达式​

在 Javascript 中，函数也可以定义为表达式。例如，

// 程序找出一个数字的平方
// 函数在变量内声明
let x = function (num) {
  return num * num;
};
console.log(x(4));

// 可以用作其他变量的变量值
let y = x(3);
console.log(y);

输出

16;
9;

在上面的程序中，变量 x 用于存储函数。这里的函数被当作一个表达式。并且通过变量名调用函数。

上面的函数称为匿名函数。

注意： 在 ES2015 中，JavaScript 表达式被写作箭头函数。您将在后续教程中学习它们。

最后于 更新