函数是 JavaScript 中最重要的组成部分之一，它用于封装可重用的代码逻辑，使得代码更加模块化。定义函数有多种方式，包括使用 函数声明、函数表达式 和 箭头函数。

1. 函数声明

函数声明是一种最常见的函数定义方式，使用 function 关键字，后跟函数名称、参数和函数体。

语法：

function functionName(parameter1, parameter2) {
  // 函数体
  return result;  // 可选
}

示例：

function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("Alice"));  // 输出: Hello, Alice!

• 注意：函数声明可以在调用之前使用，因为 JavaScript 会对函数声明进行“提升”（Hoisting），即在执行之前将函数声明提到作用域的顶部。

2. 函数表达式

函数表达式是将函数作为表达式赋值给变量的方式。它和函数声明的区别在于，函数表达式是匿名的，且只能在定义之后调用。

语法：

const functionName = function(parameter1, parameter2) {
  // 函数体
  return result;  // 可选
};

示例：

const greet = function(name) {
  return "Hello, " + name + "!";
};

console.log(greet("Bob"));  // 输出: Hello, Bob!

• 函数表达式不会被提升。只有在函数表达式定义后，才能调用该函数。

3. 箭头函数

箭头函数（Arrow Function）是 JavaScript ES6 引入的一种简洁的函数定义方式。它通过 => 语法来定义函数。箭头函数比传统的函数表达式更加简洁，并且有一些独特的特点（比如没有自己的 this）。

语法：

const functionName = (parameter1, parameter2) => {
  // 函数体
  return result;  // 可选
};

示例：

const greet = (name) => {
  return "Hello, " + name + "!";
};

console.log(greet("Charlie"));  // 输出: Hello, Charlie!

• 简化语法：如果箭头函数只有一个表达式，且直接返回值，则可以省略 return 和大括号。

const greet = name => "Hello, " + name + "!";
console.log(greet("David"));  // 输出: Hello, David!

• 没有 this 绑定：箭头函数不具有自己的 this，它会继承外部函数的 this。

4. 带默认参数的函数

函数可以为参数设置默认值。当调用函数时，如果没有传入相应的参数，则会使用默认值。

语法：

function functionName(parameter1 = defaultValue) {
  // 函数体
}

示例：

function greet(name = "Guest") {
  return "Hello, " + name + "!";
}

console.log(greet("Eve"));  // 输出: Hello, Eve!
console.log(greet());       // 输出: Hello, Guest!

• 注意：默认参数必须放在参数列表的末尾。如果有多个参数带有默认值，它们必须按照从右到左的顺序排列。

5. 函数参数的解构赋值

函数参数也可以使用解构赋值的语法，直接从对象或数组中提取值。

示例：

• 对象解构：

function greet({name, age}) {
  return `Hello, ${name}. You are ${age} years old.`;
}

const user = { name: "Frank", age: 30 };
console.log(greet(user));  // 输出: Hello, Frank. You are 30 years old.

• 数组解构：

function sum([a, b]) {
  return a + b;
}

console.log(sum([5, 3]));  // 输出: 8

6. 匿名函数

匿名函数是没有名字的函数，通常用于函数表达式、回调函数等场景。箭头函数就是匿名函数的一种形式。

示例：

setTimeout(function() {
  console.log("This is an anonymous function!");
}, 1000);

• 箭头函数的匿名形式：

setTimeout(() => {
  console.log("This is an anonymous arrow function!");
}, 1000);

7. 递归函数

递归函数是指在函数内部调用自身。递归通常用于解决一些具有重复结构的问题，如树形结构的遍历、分治法等。

示例：计算阶乘

function factorial(n) {
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}

console.log(factorial(5));  // 输出: 120

• 注意：递归函数必须有一个退出条件（基准条件），否则会导致无限递归。

8. 高阶函数

高阶函数是指接收函数作为参数，或者返回一个函数的函数。高阶函数在 JavaScript 中非常常见，如数组的 map()、filter()、reduce() 方法。

示例：

function greet(name) {
  return "Hello, " + name;
}

function processUser(callback) {
  const user = "Alice";
  return callback(user);
}

console.log(processUser(greet));  // 输出: Hello, Alice

9. 返回函数

函数可以返回另一个函数，这种方式通常用于创建封闭的作用域或实现函数工厂。

示例：

function outer() {
  let counter = 0;
  return function() {
    counter++;
    return counter;
  };
}

const increment = outer();
console.log(increment());  // 输出: 1
console.log(increment());  // 输出: 2

• 注意：outer() 中的 counter 变量是“封闭”在返回的函数中的，因此每次调用 increment() 时，counter 的值会增加。

总结

• 函数声明：使用 function 关键字来定义函数，适用于常规函数。
• 函数表达式：将函数赋值给变量，可以用于动态定义函数，且没有提升特性。
• 箭头函数：简洁的函数定义方式，适合用于简短的回调函数。
• 默认参数和解构赋值：可以为函数参数设置默认值，或者使用解构赋值提取对象/数组中的数据。
• 递归和高阶函数：递归函数是函数调用自身，高阶函数是接收或返回函数的函数。

通过熟悉这些不同类型的函数定义，你可以更加灵活和高效地编写 JavaScript 代码。更多详细内容请关注其他相关文章。