跳到主要内容

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;
};

主要区别:

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

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

最佳实践

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

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

    // 不好的命名
    function calc(p, t) {
    return p * (1 + t);
    }
  2. 一个函数只做一件事:每个函数应该只负责一个功能,这使得代码更容易理解和维护。

  3. 避免副作用:尽量避免在函数内部修改外部变量或状态。

  4. 合理使用返回值:明确函数的返回值,避免隐式返回undefined

总结

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

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

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

练习题

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

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

更多资源

继续学习JavaScript函数的高级主题:

  • 箭头函数
  • 闭包
  • 高阶函数
  • 纯函数与副作用

通过理解和应用函数声明,你已经迈出了成为JavaScript高手的重要一步!