跳到主要内容

JavaScript 函数基础

什么是JavaScript函数？​

函数是JavaScript中的基础构建块，它是一组可重复使用的代码指令，用于执行特定任务。函数就像一个小型程序，可以在需要时被调用执行。理解并熟练使用函数是成为优秀JavaScript开发者的关键一步。

函数的主要优势包括：

  • 代码复用：编写一次，多次使用
  • 模块化：将复杂的程序分解为小型、可管理的部分
  • 可维护性：易于修改和测试独立的功能单元
  • 抽象：隐藏实现细节，提供简洁接口

函数的声明方式​

在JavaScript中，有多种方式可以声明函数。下面我们将介绍常见的几种方法：

1. 函数声明​

函数声明是定义函数最常见和最直接的方式：

javascript
function sayHello(name) {
  return "你好，" + name + "！";
}

// 调用函数
console.log(sayHello("小明")); // 输出: 你好，小明！

函数声明的特点是函数提升，即使你在调用函数之后才声明它，代码也能正常工作：

javascript
console.log(add(5, 3)); // 输出: 8

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

2. 函数表达式​

函数表达式将函数赋值给一个变量：

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

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

与函数声明不同，函数表达式不会被提升，必须先定义再使用。

3. 箭头函数 (ES6)​

箭头函数是ES6引入的一种更简洁的函数写法：

javascript
const divide = (a, b) => {
  return a / b;
};

// 如果函数体只有一行，可以省略return和大括号
const square = x => x * x;

console.log(divide(10, 2)); // 输出: 5
console.log(square(4)); // 输出: 16

箭头函数有特殊的this绑定规则，不会创建自己的this上下文，它继承了定义时所在作用域的this。

函数参数​

函数可以接收参数，这使得函数更加灵活和可复用。

基本参数​

javascript
function greet(firstName, lastName) {
  return `你好，${firstName} ${lastName}！`;
}

console.log(greet("张", "三")); // 输出: 你好，张 三！

默认参数 (ES6)​

javascript
function greetWithDefault(name = "访客") {
  return `欢迎，${name}！`;
}

console.log(greetWithDefault()); // 输出: 欢迎，访客！
console.log(greetWithDefault("李四")); // 输出: 欢迎，李四！

剩余参数 (Rest Parameters)​

剩余参数允许函数接收不确定数量的参数：

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

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

返回值​

函数可以通过return语句返回值。如果没有明确的返回值，函数会默认返回undefined。

javascript
function calculateArea(radius) {
  return Math.PI * radius * radius;
}

const area = calculateArea(5);
console.log(area); // 输出: 约为78.54...

function logMessage(message) {
  console.log(message);
  // 没有return语句
}

const result = logMessage("测试");
console.log(result); // 输出: undefined
提示

函数执行到return语句后就会立即结束，后面的代码不会被执行。

函数作用域​

JavaScript中的函数创建了自己的作用域。在函数内部定义的变量在函数外部无法访问。

javascript
function showScope() {
  const localVar = "我是局部变量";
  console.log(localVar); // 可以访问
}

showScope();
// console.log(localVar); // 错误: localVar未定义

但是函数可以访问外部作用域中的变量：

javascript
const globalVar = "我是全局变量";

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

accessGlobal(); // 输出: 我是全局变量

立即执行函数表达式 (IIFE)​

IIFE(Immediately Invoked Function Expression)是一种在定义后立即执行的函数：

javascript
(function() {
  const privateVar = "不能从外部访问";
  console.log("函数立即执行！");
})();

// console.log(privateVar); // 错误: privateVar未定义

IIFE常用于创建私有作用域，防止变量污染全局命名空间。

函数递归​

递归是函数调用自身的过程。递归需要有一个终止条件，以防止无限递归。

javascript
function factorial(n) {
  // 基础情况（终止条件）
  if (n <= 1) {
    return 1;
  }
  // 递归调用
  return n * factorial(n - 1);
}

console.log(factorial(5)); // 输出: 120 (5*4*3*2*1)

递归的流程图示：

实际应用案例​

1. 创建表单验证函数​

javascript
function validateEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

function validatePassword(password) {
  return password.length >= 8;
}

function validateForm(email, password) {
  const errors = [];
  
  if (!validateEmail(email)) {
    errors.push("邮箱格式不正确");
  }
  
  if (!validatePassword(password)) {
    errors.push("密码长度至少需要8个字符");
  }
  
  return {
    isValid: errors.length === 0,
    errors: errors
  };
}

// 使用示例
const result1 = validateForm("user@example.com", "password123");
console.log(result1); // {isValid: true, errors: []}

const result2 = validateForm("invalid-email", "123");
console.log(result2); // {isValid: false, errors: ["邮箱格式不正确", "密码长度至少需要8个字符"]}

2. 创建计算器功能​

javascript
const calculator = {
  add: function(a, b) {
    return a + b;
  },
  subtract: function(a, b) {
    return a - b;
  },
  multiply: function(a, b) {
    return a * b;
  },
  divide: function(a, b) {
    if (b === 0) {
      return "错误：不能除以零";
    }
    return a / b;
  },
  power: function(a, b) {
    return Math.pow(a, b);
  }
};

console.log(calculator.add(10, 5));      // 输出: 15
console.log(calculator.subtract(10, 5)); // 输出: 5
console.log(calculator.multiply(10, 5)); // 输出: 50
console.log(calculator.divide(10, 5));   // 输出: 2
console.log(calculator.power(10, 2));    // 输出: 100

3. 定时器函数​

javascript
function countdown(seconds) {
  // 显示初始秒数
  console.log(seconds);
  
  const timer = setInterval(() => {
    // 减少秒数
    seconds--;
    
    if (seconds > 0) {
      // 显示剩余秒数
      console.log(seconds);
    } else {
      // 倒计时结束，清除定时器
      clearInterval(timer);
      console.log("倒计时结束！");
    }
  }, 1000); // 每1000毫秒（1秒）执行一次
}

// 开始倒计时5秒
// countdown(5);
// 注意: 在实际运行中，会每秒显示一次倒计时数字

总结​

JavaScript函数是代码复用和模块化的重要工具。主要要点包括：

  • 函数可以通过多种方式声明：函数声明、函数表达式和箭头函数
  • 函数可以接收参数，包括默认参数和剩余参数
  • 函数可以返回值，如果没有明确的返回语句则返回undefined
  • 函数创建自己的作用域，内部变量在外部不可见
  • 高级函数概念包括立即执行函数表达式(IIFE)和递归
  • 在实际开发中，函数被广泛用于表单验证、功能封装和定时任务等场景

练习题​

  1. 编写一个函数，接收一个数组，返回数组中的最大值。
  2. 创建一个函数，检查给定的字符串是否是回文（正着读和倒着读都一样）。
  3. 实现一个函数，计算斐波那契数列的第n项（使用递归和循环两种方式）。

进一步学习资源​

  • MDN Web文档: 函数
  • JavaScript.info: 函数基础
  • 《JavaScript高级程序设计》第3章：函数

通过掌握函数基础，你已经迈出了成为JavaScript程序员的重要一步。继续练习和应用这些概念，你将能够构建更复杂、更强大的程序。