JavaScript 函数声明

函数是JavaScript中最基本也是最重要的构建块之一。它们允许我们封装一系列语句，使代码更具可读性、可复用性和可维护性。在JavaScript中，函数声明是定义函数的最常见方式之一。

什么是函数声明？

函数声明（Function Declaration）是创建命名函数的一种方式，它使用function关键字，后跟函数名称和一组圆括号，圆括号内可以包含参数，函数体则被包含在花括号内。

基本语法

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

让我们来看一个简单的例子：

javascript
function sayHello() {
  console.log("Hello, world!");
}

// 调用函数
sayHello(); // 输出: Hello, world!

函数声明的特点

1. 函数提升（Hoisting）

JavaScript引擎在执行代码之前会先处理所有的函数声明，这意味着你可以在定义函数之前调用它：

javascript
// 可以在声明前调用
welcomeMessage(); // 输出: Welcome to JavaScript!

function welcomeMessage() {
  console.log("Welcome to JavaScript!");
}

备注

虽然函数声明会被提升，但变量声明的函数表达式却不会被完全提升。我们将在后续内容中详细介绍函数表达式。

2. 参数与返回值

函数可以接受参数（输入）并返回值（输出）：

javascript
function addNumbers(a, b) {
  return a + b;
}

let sum = addNumbers(5, 3);
console.log(sum); // 输出: 8

如果没有显式的return语句，函数会返回undefined：

javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
  // 没有return语句
}

let result = greet("Alice"); // 输出: Hello, Alice!
console.log(result); // 输出: undefined

3. 函数作用域

函数内部声明的变量在函数外部不可访问：

javascript
function createMessage() {
  let message = "Function scopes are powerful!";
  console.log(message);
}

createMessage(); // 输出: Function scopes are powerful!
// console.log(message); // 错误: message is not defined

参数处理

JavaScript函数参数非常灵活，下面介绍几种常见的参数处理方式：

1. 默认参数

ES6引入了默认参数值，当调用函数时没有提供参数或提供了undefined时，默认值会生效：

javascript
function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}

greet("John"); // 输出: Hello, John!
greet(); // 输出: Hello, Guest!

2. 不定参数

通过使用剩余参数语法（rest parameters），可以处理任意数量的参数：

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

console.log(sum(1, 2)); // 输出: 3
console.log(sum(1, 2, 3, 4, 5)); // 输出: 15

3. 参数解构

可以使用解构赋值来获取对象或数组参数中的特定属性：

javascript
function displayUserInfo({ name, age, city = "Unknown" }) {
  console.log(`${name} is ${age} years old and lives in ${city}`);
}

const user = {
  name: "Alex",
  age: 28
};

displayUserInfo(user); // 输出: Alex is 28 years old and lives in Unknown

实际应用案例

让我们通过一些实际示例来看看函数声明的应用：

案例1: 计算器功能

javascript
function calculator(num1, num2, operation = "add") {
  switch (operation.toLowerCase()) {
    case "add":
      return num1 + num2;
    case "subtract":
      return num1 - num2;
    case "multiply":
      return num1 * num2;
    case "divide":
      if (num2 === 0) {
        return "Cannot divide by zero";
      }
      return num1 / num2;
    default:
      return "Unknown operation";
  }
}

console.log(calculator(10, 5, "add")); // 输出: 15
console.log(calculator(10, 5, "subtract")); // 输出: 5
console.log(calculator(10, 5, "multiply")); // 输出: 50
console.log(calculator(10, 5, "divide")); // 输出: 2
console.log(calculator(10, 0, "divide")); // 输出: Cannot divide by zero

案例2: 用户数据验证

javascript
function validateUserData(userData) {
  const errors = [];
  
  if (!userData.username || userData.username.length < 3) {
    errors.push("Username must be at least 3 characters long");
  }
  
  if (!userData.email || !userData.email.includes('@')) {
    errors.push("Please enter a valid email address");
  }
  
  if (!userData.password || userData.password.length < 8) {
    errors.push("Password must be at least 8 characters long");
  }
  
  return {
    isValid: errors.length === 0,
    errors
  };
}

const user = {
  username: "jo",
  email: "john.doe@example",
  password: "pass"
};

const validationResult = validateUserData(user);
console.log(validationResult);
/* 输出: 
{
  isValid: false,
  errors: [
    'Username must be at least 3 characters long',
    'Please enter a valid email address',
    'Password must be at least 8 characters long'
  ]
}
*/

函数声明与函数表达式的比较

函数声明不是在JavaScript中定义函数的唯一方式。另一种常见的方式是函数表达式：

javascript
// 函数声明
function multiply(a, b) {
  return a * b;
}

// 函数表达式
const divide = function(a, b) {
  return a / b;
};

主要区别：

提升：函数声明会被完全提升，而函数表达式只有变量声明部分会被提升。
使用场景：函数表达式可以是匿名的，也可以作为参数传递给其他函数。

提示

如果你需要在代码中较早地使用函数，选择函数声明；如果你需要将函数作为值使用（如回调函数），函数表达式可能更合适。

最佳实践

使用有意义的函数名：函数名应当简洁明了地描述函数的作用。

javascript
// 好的命名
function calculateTotalPrice(price, taxRate) {
  return price * (1 + taxRate);
}

// 不好的命名
function calc(p, t) {
  return p * (1 + t);
}

一个函数只做一件事：每个函数应该只负责一个功能，这使得代码更容易理解和维护。
避免副作用：尽量避免在函数内部修改外部变量或状态。
合理使用返回值：明确函数的返回值，避免隐式返回undefined。

总结

JavaScript函数声明是定义函数的基础方式，具有以下特点：

使用function关键字定义
支持函数提升
可以接受参数并返回值
创建自己的作用域

掌握函数声明是成为熟练JavaScript开发者的重要一步。通过合理地组织和使用函数，你可以编写出更加模块化、可维护和高效的代码。

练习题

为了巩固你的知识，尝试完成以下练习：

编写一个函数isPalindrome，用于检查一个字符串是否是回文（正读和反读都一样）。
创建一个createCounter函数，该函数返回当前计数并每次调用时递增。
编写一个formatName函数，接受名和姓作为参数，并以"姓, 名"的格式返回完整名称。

什么是函数声明？​

基本语法​

函数声明的特点​

1. 函数提升（Hoisting）​

2. 参数与返回值​

3. 函数作用域​

参数处理​

1. 默认参数​

2. 不定参数​

3. 参数解构​

实际应用案例​

案例1: 计算器功能​

案例2: 用户数据验证​

函数声明与函数表达式的比较​

最佳实践​

总结​

练习题​

更多资源​