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)和递归
- 在实际开发中,函数被广泛用于表单验证、功能封装和定时任务等场景
练习题
- 编写一个函数,接收一个数组,返回数组中的最大值。
- 创建一个函数,检查给定的字符串是否是回文(正着读和倒着读都一样)。
- 实现一个函数,计算斐波那契数列的第n项(使用递归和循环两种方式)。
进一步学习资源
通过掌握函数基础,你已经迈出了成为JavaScript程序员的重要一步。继续练习和应用这些概念,你将能够构建更复杂、更强大的程序。