跳到主要内容

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程序员的重要一步。继续练习和应用这些概念,你将能够构建更复杂、更强大的程序。