9. 函数（封装重复代码）

函数是 JavaScript 中用于封装重复代码的代码块。本章节将带你学习 JavaScript 的函数，包括函数的声明与调用、函数参数、函数返回值、匿名函数、函数表达式、作用域等。

9.1 什么是函数？为什么要用函数？

函数是一段可重复使用的代码块，用于执行特定的任务。函数可以接受输入参数，并返回输出结果。

为什么要用函数？

• 代码复用：将重复的代码封装到函数中，避免重复编写
• 模块化：将复杂的问题分解为多个小函数，使代码结构更清晰
• 可维护性：函数可以独立测试和维护，提高代码质量
• 可读性：使用有意义的函数名，使代码更易读

示例

// 计算圆的面积
function calculateArea(radius) {
    return 3.14 * radius * radius;
}

// 调用函数
let area = calculateArea(5);
console.log('圆的面积:', area);

// 问候用户
function greet(name) {
    return `Hello, ${name}!`;
}

let message = greet('John');
console.log(message);

9.2 函数声明与调用

函数声明

使用 function 关键字声明函数：

function functionName(parameters) {
    // 函数体
    return result; // 可选
}

函数调用

通过函数名调用函数：

functionName(arguments);

示例

// 声明函数
function add(a, b) {
    return a + b;
}

// 调用函数
let sum = add(5, 3);
console.log('5 + 3 =', sum);

// 声明无参数函数
function sayHello() {
    console.log('Hello!');
}

// 调用无参数函数
sayHello();

9.3 函数参数：形参和实参

• 形参：函数声明时定义的参数，用于接收调用时传入的值
• 实参：函数调用时传入的实际值

示例

// 形参：a, b
function multiply(a, b) {
    return a * b;
}

// 实参：5, 3
let product = multiply(5, 3);
console.log('5 * 3 =', product);

// 多个参数
function greet(name, age) {
    return `Hello, ${name}! You are ${age} years old.`;
}

let message = greet('John', 30);
console.log(message);

默认参数

ES6 引入了默认参数，可以为参数设置默认值：

function greet(name = 'World') {
    return `Hello, ${name}!`;
}

console.log(greet('John'));  // 'Hello, John!'
console.log(greet());  // 'Hello, World!'

function calculateTotal(price, quantity = 1) {
    return price * quantity;
}

console.log(calculateTotal(10));  // 10
console.log(calculateTotal(10, 3));  // 30

剩余参数

使用 ... 语法可以接收任意数量的参数：

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3));  // 6
console.log(sum(1, 2, 3, 4, 5));  // 15

function greet(firstName, ...rest) {
    return `Hello, ${firstName} and ${rest.join(' and ')}!`;
}

console.log(greet('John', 'Jane', 'Bob'));  // 'Hello, John and Jane and Bob!'

9.4 函数返回值：return 的用法

return 语句用于从函数中返回值，并结束函数的执行。

基本用法

function add(a, b) {
    return a + b;
}

let sum = add(5, 3);
console.log(sum);  // 8

function isEven(num) {
    return num % 2 === 0;
}

console.log(isEven(4));  // true
console.log(isEven(5));  // false

提前返回

可以使用 return 语句提前结束函数的执行：

function checkAge(age) {
    if (age < 0) {
        return '年龄不能为负数';
    }
    if (age < 18) {
        return '你是未成年人';
    }
    return '你是成年人';
}

console.log(checkAge(-5));  // '年龄不能为负数'
console.log(checkAge(15));  // '你是未成年人'
console.log(checkAge(20));  // '你是成年人'

无返回值

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

function sayHello() {
    console.log('Hello!');
}

let result = sayHello();
console.log(result);  // undefined

function doNothing() {
    return;
}

let result2 = doNothing();
console.log(result2);  // undefined

9.5 匿名函数与函数表达式

匿名函数

匿名函数是没有名称的函数：

// 匿名函数
function() {
    console.log('Hello!');
}

// 通常作为参数传递
setTimeout(function() {
    console.log('3 秒后执行');
}, 3000);

函数表达式

将匿名函数赋值给变量：

const add = function(a, b) {
    return a + b;
};

console.log(add(5, 3));  // 8

const greet = function(name) {
    return `Hello, ${name}!`;
};

console.log(greet('John'));  // 'Hello, John!'

箭头函数

ES6 引入了箭头函数，是一种更简洁的函数表达式：

// 基本语法
const add = (a, b) => {
    return a + b;
};

// 当只有一个表达式时，可以省略大括号和 return
const add = (a, b) => a + b;

// 当只有一个参数时，可以省略括号
const greet = name => `Hello, ${name}!`;

// 无参数
const sayHello = () => console.log('Hello!');

console.log(add(5, 3));  // 8
console.log(greet('John'));  // 'Hello, John!'
sayHello();  // 'Hello!'

9.6 作用域：全局变量和局部变量

全局作用域

在函数外部声明的变量，在任何地方都可以访问：

let globalVar = '全局变量';

function test() {
    console.log(globalVar);  // 可以访问全局变量
}

test();  // '全局变量'
console.log(globalVar);  // '全局变量'

局部作用域

在函数内部声明的变量，只能在函数内部访问：

function test() {
    let localVar = '局部变量';
    console.log(localVar);  // 可以访问局部变量
}

test();  // '局部变量'
// console.log(localVar);  // 错误：localVar is not defined

块级作用域

使用 let 和 const 声明的变量，具有块级作用域：

if (true) {
    let blockVar = '块级变量';
    console.log(blockVar);  // 可以访问块级变量
}

// console.log(blockVar);  // 错误：blockVar is not defined

for (let i = 0; i < 5; i++) {
    console.log(i);
}

// console.log(i);  // 错误：i is not defined

9.7 实战：封装求和函数 / 判断奇偶函数

实战1：封装求和函数

// 封装求和函数
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

// 测试
console.log(sum(1, 2, 3));  // 6
console.log(sum(1, 2, 3, 4, 5));  // 15
console.log(sum(10));  // 10
console.log(sum());  // 0

实战2：判断奇偶函数

// 封装判断奇偶函数
function isEven(num) {
    return num % 2 === 0;
}

function isOdd(num) {
    return num % 2 !== 0;
}

// 测试
console.log(isEven(4));  // true
console.log(isEven(5));  // false
console.log(isOdd(4));  // false
console.log(isOdd(5));  // true

// 使用函数
function printEvenNumbers(arr) {
    console.log('偶数：');
    arr.forEach(num => {
        if (isEven(num)) {
            console.log(num);
        }
    });
}

printEvenNumbers([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

小结

通过本章节的学习，你已经掌握了：

• 什么是函数，以及为什么要使用函数
• 函数的声明与调用
• 函数参数：形参和实参，默认参数，剩余参数
• 函数返回值：return 的用法
• 匿名函数与函数表达式，箭头函数
• 作用域：全局变量和局部变量，块级作用域
• 如何封装函数解决实际问题

在后续的章节中，我们将学习 JavaScript 的复合数据类型，包括数组、对象和字符串等。