白骑士的JavaScript教学语法基础篇之函数 2.4.1 函数的定义与调用

白骑士所长

于 2024-10-10 14:52:31 发布

阅读量383

点赞数 4

分类专栏： JavaScript 教学文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/jeremytc/article/details/142821444

版权

教学同时被 2 个专栏收录

292 篇文章 3 订阅

订阅专栏

JavaScript

18 篇文章 0 订阅

订阅专栏

函数是JavaScript中最重要的基础概念之一，它使代码更具组织性、可读性和复用性。函数是一组封装起来的代码块，可以根据需要执行任意次数。了解如何定义和调用函数，是掌握JavaScript编程的关键步骤。

什么是函数？

函数是一段可以多次执行的代码块，它可以接收输入（参数）、执行特定的操作，并返回输出（返回值）。通过函数，代码得以模块化，使得复杂的问题可以被分解为多个可管理的部分。

定义函数

JavaScript中有多种定义函数的方法，最常见的是使用‘function‘关键字。下面介绍几种常见的函数定义方式。

使用‘function‘关键字定义函数

这是最传统和最常用的定义函数的方式。使用‘function‘关键字可以定义一个具名函数或匿名函数。

基本语法

function functionName(parameters) {
    // 函数体
    // 执行一些操作
    return value; // 可选
}

functionName：函数的名称，用于标识和调用函数。
parameters：传递给函数的参数，可以有多个参数，用逗号分隔。
return：用于返回函数执行的结果。如果省略，函数将返回‘undefined‘。

示例

function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("Alice")); // 输出 "Hello, Alice!"

在这个示例中，定义了一个名为‘greet‘的函数，它接受一个参数‘name‘，并返回一个包含该名称的问候语。调用函数时，将‘"Alice"‘传递给‘name‘，输出‘"Hello, Alice!"‘。

函数表达式

函数表达式允许将一个匿名函数赋值给变量，这样可以更灵活地处理函数，尤其是在需要动态创建或传递函数时。

基本语法

const functionName = function(parameters) {
    // 函数体
    return value; // 可选
};

示例

const square = function(number) {
    return number * number;
};

console.log(square(5)); // 输出 25

在这个示例中，一个匿名函数被赋值给‘square‘变量。调用‘square(5)‘将返回‘25‘。

箭头函数（ES6）

箭头函数是ES6引入的一种更简洁的函数定义方式，尤其适用于编写简短的匿名函数。箭头函数与普通函数在语法和‘this‘绑定方面有一些差异。

基本语法

const functionName = (parameters) => {
    // 函数体
    return value; // 可选
};

如果函数体只有一行语句，并且要返回该语句的值，可以省略‘{}‘和‘return‘关键字。

示例

const add = (a, b) => a + b;
console.log(add(3, 4)); // 输出 7

在这个示例中，‘add‘是一个箭头函数，接受两个参数并返回它们的和。调用‘add(3, 4)‘将返回‘7‘。

调用函数

定义函数后，可以通过函数名和括号来调用它。如果函数定义了参数，调用时应提供相应的值。

基本语法

functionName(arguments);

functionName：要调用的函数的名称。
arguments：传递给函数的实际参数，与定义函数时的参数顺序一致。

示例

function multiply(x, y) {
    return x * y;
}

let result = multiply(3, 7);
console.log(result); // 输出 21

在这个示例中，调用了‘multiply‘函数，传入参数‘3‘和‘7‘，并将返回值存储在变量‘result‘中，最后输出‘21‘。

函数的参数

函数可以接收任意数量的参数，并使用这些参数执行操作。函数参数在调用时按顺序传递，未传递的参数将为‘undefined‘。

示例

function sayHello(firstName, lastName) {
    return "Hello, " + firstName + " " + lastName;
}

console.log(sayHello("John", "Doe")); // 输出 "Hello, John Doe"

在这个示例中，‘sayHello‘函数接受两个参数‘firstName‘和‘lastName‘，并返回完整的问候语。

默认参数

在ES6之前，默认参数通过逻辑运算符来实现，而在ES6之后，可以直接为参数指定默认值。

示例

function greet(name = "Guest") {
    return "Welcome, " + name + "!";
}

console.log(greet()); // 输出 "Welcome, Guest!"
console.log(greet("Alice")); // 输出 "Welcome, Alice!"

在这个示例中，如果调用‘greet‘函数时没有传递参数，‘name‘的默认值将是‘"Guest"‘。

返回值

函数可以返回一个值给调用者，通过‘return‘关键字实现。如果函数没有‘return‘语句，或者‘return‘语句后面没有值，函数将返回‘undefined‘。

示例

function getAge(yearOfBirth) {
    const currentYear = new Date().getFullYear();
    return currentYear yearOfBirth;
}

console.log(getAge(1990)); // 输出当前年份减去1990的年龄

在这个示例中，‘getAge‘函数返回根据出生年份计算的年龄。