JavaScript的函数——可重用的代码块（function 函数名(参数, …) {}）

2025年10月28日农场开发者 1 浏览

JavaScript的函数——可重用的代码块（function 函数名(参数, …) {}）教程实战篇

想象一下，你有一段代码需要在程序的不同地方多次使用，比如计算商品打折后的价格。如果每次都复制粘贴这段代码，会使程序变得冗长、难以维护，且一旦计算规则改变，你需要修改所有地方。函数就是为了解决这个问题而生的。它允许我们将代码封装成一个独立的、可重复使用的块。

1. 函数是什么？

函数是一段被定义的、可以被多次调用的代码块。你可以把它想象成一个“黑盒子”或一台“咖啡机”：

你给它一些输入（参数），比如咖啡豆和水。
它在内部执行一系列预定义的操作。
它返回一个输出（返回值），比如一杯煮好的咖啡。

2. 函数声明

最基本的定义函数的方式是使用函数声明。

语法：

function 函数名(参数1, 参数2, ...) {
    // 要执行的代码
    return 返回值; // 可选
}

示例：一个简单的打招呼函数

// 定义函数
function sayHello() {
    console.log("Hello, World!");
}

// 调用函数（执行函数内的代码）
sayHello(); // 输出：Hello, World!
sayHello(); // 可以多次调用

3. 函数参数与返回值

参数是函数定义时声变量，用于接收输入值。

返回值是函数执行后返回给调用者的结果。

示例：计算两数之和的函数

// 定义函数，接收两个参数 a 和 b
function add(a, b) {
    let sum = a + b;
    return sum; // 使用 return 语句返回结果
}

// 调用函数，并传入实际的值（称为“实参”）
let result1 = add(5, 3); // 把 5 和 3 传给 a 和 b，并将返回值赋给 result1
console.log(result1); // 输出：8

let result2 = add(10, 20);
console.log(result2); // 输出：30

如果函数没有 return语句，或者 return后没有值，则函数返回 undefined。

4. 函数表达式

另一种定义函数的方式是函数表达式，即将一个匿名函数（没有名字的函数）赋值给一个变量。

const multiply = function(a, b) {
    return a * b;
};

console.log(multiply(4, 5)); // 输出：20

5. 箭头函数（ES6）

箭头函数提供了一种更简洁的函数写法，特别适用于短小的函数表达式。

语法： (参数) => { 函数体 }

如果函数体只有一行且是返回值，可以省略 {}和 return。

// 与上面的 multiply 函数等价
const multiply = (a, b) => a * b;

// 一个参数的箭头函数，可以省略括号
const square = x => x * x;

// 没有参数的箭头函数
const greet = () => console.log("Hi!");

6. 作用域

作用域决定了变量的可访问性。

全局作用域： 在函数和代码块之外声明的变量，可以在脚本的任何地方访问。
局部作用域（函数作用域）： 在函数内部声明的变量，只能在函数内部访问。

let globalVar = "我是全局的"; // 全局变量

function myFunction() {
    let localVar = "我是局部的"; // 局部变量
    console.log(globalVar); // 可以访问全局变量
    console.log(localVar);  // 可以访问局部变量
}

myFunction();
console.log(globalVar); // 可以访问
// console.log(localVar); // 错误！localVar 在函数外无法访问

7. 实战练习

练习：编写一个函数，判断一个数字是否是偶数。

function isEven(number) {
    // 如果数字除以2的余数为0，则是偶数
    if (number % 2 === 0) {
        return true;
    } else {
        return false;
    }
}

// 更简洁的写法
// function isEven(number) {
//     return number % 2 === 0;
// }

// 测试函数
console.log(isEven(4));  // 输出：true
console.log(isEven(7));  // 输出：false
console.log(isEven(0));  // 输出：true

总结

函数是JavaScript的基石。它们通过封装代码逻辑，极大地提高了代码的可复用性、可读性和可维护性。通过以上教程你也已经学会了函数声明、参数、返回值、函数表达式和箭头函数的相关知识。现在是不是对JavaScript有了更深的认识了呢！