JavaScript 函数是可重用的代码块，用于执行特定任务。函数可以接受参数（输入数据），并且可以返回一个值。JavaScript 提供了多种定义函数的方式，下面将详细介绍这些方式，并给出一些示例。
1. 函数声明
下面是两个使用 JavaScript 函数声明的示例。函数声明是通过 function 关键字定义的，并且它们具有提升（hoisting）特性，这意味着你可以在它们被定义之前调用这些函数。
示例 1: 简单的问候函数
这个例子展示了如何创建一个简单的函数来问候用户，并在控制台打印出问候语。
// 函数声明：greet
function greet(name) {
return `Hello, ${name}!`;
}
// 调用函数
console.log(greet('Alice')); // 输出: Hello, Alice!
在这个例子中，我们定义了一个名为 greet 的函数，它接受一个参数 name，并返回一条包含该名字的问候信息。然后我们在控制台输出了调用此函数的结果。
示例 2: 计算圆的面积
这个例子展示了一个稍微复杂一点的函数，用于根据给定的半径计算圆的面积。
// 函数声明：calculateCircleArea
function calculateCircleArea(radius) {
if (radius < 0) {
return 'Radius cannot be negative.';
}
return Math.PI * radius * radius;
}
// 调用函数并处理不同情况
console.log(calculateCircleArea(5)); // 输出: 78.53981633974483
console.log(calculateCircleArea(-3)); // 输出: Radius cannot be negative.
在这个例子中，我们定义了一个名为 calculateCircleArea 的函数，它接受一个参数 radius，即圆的半径。函数首先检查半径是否为负数，如果是，则返回错误消息；否则，它将计算并返回圆的面积。我们还展示了如何处理不同的输入情况。
这两个例子说明了函数声明的基本用法及其提升特性。你可以在这两个例子的基础上扩展功能，添加更多的逻辑或参数以满足特定的需求。
2. 函数表达式
下面是两个使用 JavaScript 函数表达式的示例。函数表达式是将函数赋值给一个变量、属性或作为另一个函数的参数传递。与函数声明不同，函数表达式不会被提升，因此必须在定义之后调用。
示例 1: 使用匿名函数表达式
这个例子展示了如何创建一个匿名函数表达式，并通过赋值给变量来调用它。
// 函数表达式：greet
const greet = function(name) {
return `Hello, ${name}!`;
};
// 调用函数表达式
console.log(greet('Alice')); // 输出: Hello, Alice!
在这个例子中，我们创建了一个匿名函数，并将其赋值给了名为 greet 的常量。然后我们像调用普通函数一样调用了 greet，并传入了参数 'Alice'，结果是在控制台输出了一条问候信息。
示例 2: 使用命名函数表达式
有时候你可能想要给函数表达式一个名字，这被称为命名函数表达式。命名函数表达式不仅可以在外部通过变量名调用，还可以在函数内部通过名称进行递归调用。
// 命名函数表达式：factorial
const factorial = function fact(n) {
if (n <= 1) {
return 1;
}
return n * fact(n - 1);
};
// 调用命名函数表达式
console.log(factorial(5)); // 输出: 120
在这个例子中，我们创建了一个名为 factorial 的变量，并将其赋值为一个带有名称 fact 的函数表达式。这个函数用于计算阶乘（factorial）。注意，虽然我们通过 factorial 变量调用了函数，但在函数体内部，我们可以使用名称 fact 来实现递归调用。
这两个例子展示了如何使用函数表达式来定义和调用函数。函数表达式特别适合那些需要动态创建函数或者将函数作为参数传递给其他函数的情况。此外，命名函数表达式还提供了更好的调试支持和递归调用的可能性。
3. 箭头函数 (ES6+)
下面是两个使用 JavaScript 箭头函数（Arrow Function）的示例。箭头函数提供了一种更简洁的语法来定义函数，并且在处理 this 关键字时有不同的行为，通常更适合用作短小、简单的函数。
示例 1: 简单的箭头函数
这个例子展示了如何创建一个简单的箭头函数来执行基本操作，比如问候用户。
// 箭头函数：greet
const greet = (name) => {
return `Hello, ${name}!`;
};
// 如果函数体只有一行，可以省略大括号和 return 关键字
const quickGreet = name => `Hi, ${name}!`;
// 调用箭头函数
console.log(greet('Alice')); // 输出: Hello, Alice!
console.log(quickGreet('Bob')); // 输出: Hi, Bob!
在这个例子中，我们定义了两个箭头函数 greet 和 quickGreet。greet 使用了完整的形式，而 quickGreet 展示了当函数体只有一行时如何简化代码。两者都接受一个参数 name 并返回一条问候信息。
示例 2: 使用箭头函数处理数组方法
这个例子展示了如何结合箭头函数与数组的方法（如 map 和 filter），以一种更加简洁的方式进行数据处理。
// 数据集
const numbers = [1, 2, 3, 4, 5, 6];
// 使用箭头函数进行映射操作
const squaredNumbers = numbers.map(num => num * num);
// 使用箭头函数进行过滤操作
const evenNumbers = numbers.filter(num => num % 2 === 0);
// 输出结果
console.log(squaredNumbers); // 输出: [1, 4, 9, 16, 25, 36]
console.log(evenNumbers); // 输出: [2, 4, 6]
在这个例子中，我们首先定义了一个数字数组 numbers。然后，我们使用箭头函数与数组的 map 方法相结合，创建了一个新的数组 squaredNumbers，其中每个元素都是原数组元素的平方。接着，我们使用 filter 方法和箭头函数来筛选出所有的偶数，并将它们存储在 evenNumbers 数组中。
这两个例子展示了箭头函数如何简化代码并提高可读性，特别是在处理简短逻辑或与数组方法结合使用时。箭头函数非常适合用于不需要改变 this 上下文的场景，如回调函数或表达式函数。此外，由于其简洁的语法，箭头函数也常用于需要频繁定义小型函数的地方。
4. 构造函数
下面是两个使用 JavaScript 构造函数的示例。构造函数是一种特殊的函数，主要用于创建和初始化对象实例。它们通常以大写字母开头，并通过 new 关键字来调用。
示例 1: 创建一个简单的 Person 构造函数
这个例子展示了如何定义一个简单的构造函数来创建 Person 对象实例，并为这些实例添加属性和方法。
// 定义构造函数：Person
function Person(name, age) {
this.name = name;
this.age = age;
}
// 为所有 Person 实例添加一个方法 greet
Person.prototype.greet = function() {
console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
};
// 使用 new 关键字创建 Person 的实例
const alice = new Person('Alice', 30);
const bob = new Person('Bob', 25);
// 调用实例的方法
alice.greet(); // 输出: Hello, my name is Alice and I'm 30 years old.
bob.greet(); // 输出: Hello, my name is Bob and I'm 25 years old.
在这个例子中，我们定义了一个名为 Person 的构造函数，它接受两个参数 name 和 age 并将它们赋值给新对象的相应属性。然后，我们在 Person.prototype 上添加了一个 greet 方法，这样所有的 Person 实例都可以访问这个方法。最后，我们使用 new 关键字创建了两个 Person 的实例 alice 和 bob，并调用了它们的 greet 方法。
示例 2: 创建一个更复杂的 Book 构造函数
这个例子展示了如何定义一个更复杂的构造函数 Book，包括初始化属性、添加实例方法以及处理私有变量。
// 定义构造函数：Book
function Book(title, author, year) {
// 公共属性
this.title = title;
this.author = author;
this.year = year;
// 私有变量（闭包中的局部变量）
let publicationYear = year;
// 实例方法
this.getSummary = function() {
return `${this.title} was written by ${this.author} in ${publicationYear}.`;
};
// 修改出版年份的方法（保护私有变量）
this.updateYear = function(newYear) {
publicationYear = newYear;
};
}
// 使用 new 关键字创建 Book 的实例
const book1 = new Book('The Great Gatsby', 'F. Scott Fitzgerald', 1925);
// 调用实例的方法
console.log(book1.getSummary()); // 输出: The Great Gatsby was written by F. Scott Fitzgerald in 1925.
// 更新出版年份
book1.updateYear(1930);
console.log(book1.getSummary()); // 输出: The Great Gatsby was written by F. Scott Fitzgerald in 1930.
在这个例子中，我们定义了一个名为 Book 的构造函数，它不仅设置了公共属性 title、author 和 year，还通过闭包创建了一个私有变量 publicationYear 来存储书籍的实际出版年份。我们为每个 Book 实例添加了两个方法：getSummary 返回书籍的摘要信息，而 updateYear 则允许更新私有变量 publicationYear 的值。这展示了如何在构造函数中实现属性封装和方法定义。
这两个例子说明了如何使用构造函数来创建自定义对象类型，并为其添加属性和方法。构造函数是面向对象编程的基础之一，提供了强大的工具来组织代码和管理复杂的数据结构。
5. 立即执行函数表达式 (IIFE)
立即执行函数表达式（IIFE, Immediately Invoked Function Expression）是一种在定义后立即执行的匿名函数。IIFE 常用于创建独立的作用域，避免全局命名空间污染，并且可以封装变量和函数，使其不会影响或被外部环境所影响。
下面是一个使用 IIFE 的示例，它展示了如何创建一个封闭的作用域来执行一些代码，并返回结果。
示例：使用 IIFE 计算并打印斐波那契数列
// 定义并立即执行的函数表达式 (IIFE)
(function fibonacci(n) {
let result = [];
let a = 0, b = 1;
for (let i = 0; i < n; i++) {
result.push(a);
[a, b] = [b, a + b];
}
console.log(`Fibonacci sequence of ${n} numbers:`, result);
})(10); // 传递参数 10 给 IIFE
解释：
-
定义 IIFE:
- 使用
function关键字定义一个匿名函数。 - 立即将这个匿名函数用括号
()包裹起来，形成一个表达式。 - 在最后添加另一对括号
()来调用这个函数，并可以在此处传递参数。
- 使用
-
函数体:
- 在这个例子中，我们定义了一个简单的循环来生成斐波那契数列，并将结果存储在一个数组
result中。 - 使用解构赋值
[a, b] = [b, a + b]来更新序列中的两个连续数字。
- 在这个例子中，我们定义了一个简单的循环来生成斐波那契数列，并将结果存储在一个数组
-
执行与输出:
- 函数被立即执行，并计算前 10 个斐波那契数。
- 使用
console.log输出这些数到控制台。
这个例子展示了 IIFE 的基本结构和用途。通过将代码封装在一个立即执行的函数中，我们可以确保任何在函数内部声明的变量和函数都不会泄漏到全局作用域中，从而保持代码的干净和模块化。此外，IIFE 还可以在需要时接收参数，如上面的例子所示，使得它可以灵活地根据传入的参数执行不同的逻辑。
另一种 IIFE 的写法
有时你可能会看到 IIFE 写成如下形式，这也是一种有效的写法：
(function() {
console.log('This message will only be shown once.');
})();
这种写法同样有效，但是为了明确地表示函数表达式接受参数，通常推荐使用第一种形式，即在包裹匿名函数的括号内定义参数。
6. 异步函数 (Async/Await)
当然，下面是一个使用 JavaScript 异步函数（async/await）的示例。异步函数允许你以同步的方式编写异步代码，简化了处理 Promise 的复杂性，并且使代码更易读、更易于维护。
示例：使用 async 和 await 模拟数据获取
在这个例子中，我们将创建一个模拟从服务器获取用户数据的过程，并使用 async/await 来处理这个异步操作。
// 模拟API请求的函数，返回一个Promise
function mockApiRequest(userId) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (userId > 0) {
resolve({ id: userId, name: `User ${userId}` });
} else {
reject(new Error('Invalid user ID'));
}
}, 1000); // 模拟网络延迟1秒
});
}
// 定义一个异步函数来获取用户数据
async function fetchUserData(userId) {
try {
console.log('Fetching user data...');
const userData = await mockApiRequest(userId);
console.log('User data received:', userData);
return userData;
} catch (error) {
console.error('Error fetching user data:', error.message);
}
}
// 调用异步函数并处理结果
fetchUserData(1)
.then(user => console.log('Final result:', user))
.catch(error => console.error('Final error:', error));
// 模拟调用带有无效ID的情况
fetchUserData(-1);
解释：
-
mockApiRequest:- 这个函数模拟了一个 API 请求，它接受一个
userId参数，并返回一个Promise。 - 如果
userId大于 0，则在模拟的网络延迟（1秒）后解析为包含用户信息的对象；否则，拒绝该Promise并抛出错误。
- 这个函数模拟了一个 API 请求，它接受一个
-
fetchUserData:- 使用
async关键字定义的异步函数。 - 函数内部使用
await等待mockApiRequest返回的结果。 - 如果
mockApiRequest成功解析，那么它将打印接收到的用户数据，并返回该数据。 - 如果
mockApiRequest抛出错误，则通过catch块捕获错误并打印错误信息。
- 使用
-
调用异步函数:
- 我们调用了
fetchUserData函数两次，一次使用有效的userId（即1），另一次使用无效的userId（即-1）。 - 对于有效的
userId，我们还展示了如何使用.then()方法处理最终结果。 - 对于无效的
userId，我们可以看到错误被捕获并在控制台中输出。
- 我们调用了
这个例子展示了如何使用 async/await 来简化异步编程。它使得异步代码看起来和行为上更像是同步代码，从而提高了代码的可读性和可维护性。同时，通过 try...catch 结构，可以方便地处理可能发生的错误。
函数参数默认值 (ES6+)
从 ES6 开始，JavaScript 支持为函数参数设置默认值。
function multiply(a, b = 1) {
return a * b;
}
console.log(multiply(5)); // 输出: 5
console.log(multiply(5, 3)); // 输出: 15
Rest 参数与 Spread 语法 (ES6+)
Rest 参数允许你表示不确定数量的参数为一个数组，而 Spread 语法则允许你扩展可迭代对象。
function sum(...args) {
return args.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3, 4)); // 输出: 10
const numbers = [1, 2, 3];
console.log(sum(...numbers, 4)); // 输出: 10
这些是 JavaScript 中定义和使用函数的一些基本方式。每种方式都有其适用场景，理解它们的区别和优势可以帮助你写出更加高效、可维护的代码。
