JavaScript 函数表达式

什么是函数表达式？

在JavaScript中，函数表达式是创建函数的另一种方式。与函数声明不同，函数表达式可以将函数赋值给变量，将它们存储在对象的属性中，作为参数传递给其他函数，甚至立即执行。

函数表达式的基本语法如下：

const myFunction = function(parameters) {
  // 函数体
  return result;
};

备注

函数表达式与函数声明的主要区别在于：函数表达式可以是匿名的，它不会被提升（hoisted），只有在代码执行到它的位置时才会被创建。

函数表达式与函数声明的区别

让我们比较一下函数表达式和函数声明：

函数声明

function sayHello(name) {
  return `Hello, ${name}!`;
}

// 可以在声明前调用
console.log(sayHello("Alex")); // 输出: Hello, Alex!

函数表达式

const sayHi = function(name) {
  return `Hi, ${name}!`;
};

// 只能在定义后调用
console.log(sayHi("Alex")); // 输出: Hi, Alex!

如果你尝试在定义前调用函数表达式，会得到错误：

console.log(sayBye("Alex")); // 错误: sayBye is not defined

const sayBye = function(name) {
  return `Bye, ${name}!`;
};

函数表达式的类型

1. 匿名函数表达式

最常见的函数表达式是匿名的，即没有名称：

const calculate = function(a, b) {
  return a + b;
};

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

2. 命名函数表达式

函数表达式也可以有名称，这在递归或调试时特别有用：

const factorial = function fact(n) {
  if (n <= 1) return 1;
  return n * fact(n - 1);
};

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

注意，函数名fact只在函数内部可见，外部不能直接使用。

3. 箭头函数表达式（ES6）

ES6引入了箭头函数，它是函数表达式的简写形式：

const add = (a, b) => a + b;

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

对于多行函数体，需要使用花括号并明确返回：

const getFullName = (firstName, lastName) => {
  const fullName = `${firstName} ${lastName}`;
  return fullName;
};

console.log(getFullName("John", "Doe")); // 输出: John Doe

函数表达式的应用场景

1. 作为回调函数

函数表达式常用作回调函数，特别是在事件处理和异步操作中：

// 事件监听器
document.getElementById("button").addEventListener("click", function() {
  alert("Button was clicked!");
});

// setTimeout中使用
setTimeout(function() {
  console.log("This message appears after 2 seconds");
}, 2000);

2. 立即执行函数表达式（IIFE）

IIFE是一种在定义后立即执行的函数表达式，用于创建私有作用域：

(function() {
  const privateVar = "I am private";
  console.log(privateVar); // 输出: I am private
})();

// console.log(privateVar); // 错误: privateVar is not defined

3. 函数工厂

函数表达式可以用来创建函数工厂，即返回新函数的函数：

function createMultiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 输出: 10
console.log(triple(5)); // 输出: 15

4. 闭包

函数表达式经常用于创建闭包，这使得函数可以访问其外部函数的变量：

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

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

函数表达式的高级应用

高阶函数

函数表达式使得函数可以作为值传递，这是高阶函数的基础：

// map接收一个函数作为参数
const numbers = [1, 2, 3, 4];
const squared = numbers.map(function(num) {
  return num * num;
});

console.log(squared); // 输出: [1, 4, 9, 16]

// 使用箭头函数可以更简洁
const cubed = numbers.map(num => num * num * num);
console.log(cubed); // 输出: [1, 8, 27, 64]

函数柯里化

使用函数表达式实现柯里化（将接受多个参数的函数转变为接受一个单一参数的函数序列）：

function curry(fn) {
  return function(a) {
    return function(b) {
      return fn(a, b);
    };
  };
}

const add = (a, b) => a + b;
const curriedAdd = curry(add);

console.log(curriedAdd(5)(3)); // 输出: 8

实际案例：创建一个简单的表单验证器

下面是一个使用函数表达式创建表单验证器的实际案例：

// 创建验证器
const createValidator = function() {
  const validators = [];
  
  // 添加验证规则
  return {
    addRule: function(field, validationFn, errorMessage) {
      validators.push({
        field: field,
        validate: validationFn,
        message: errorMessage
      });
    },
    
    // 验证表单
    validate: function(formData) {
      const errors = [];
      
      validators.forEach(function(validator) {
        const value = formData[validator.field];
        if (!validator.validate(value)) {
          errors.push({
            field: validator.field,
            message: validator.message
          });
        }
      });
      
      return {
        isValid: errors.length === 0,
        errors: errors
      };
    }
  };
};

// 使用验证器
const formValidator = createValidator();

// 添加验证规则
formValidator.addRule('username', 
  value => value && value.length >= 3, 
  '用户名至少需要3个字符'
);

formValidator.addRule('email', 
  value => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value), 
  '请输入有效的邮箱地址'
);

// 验证数据
const userData = {
  username: 'ab',
  email: 'invalid-email'
};

const result = formValidator.validate(userData);
console.log(result.isValid); // 输出: false
console.log(result.errors);
// 输出: [
//   { field: 'username', message: '用户名至少需要3个字符' },
//   { field: 'email', message: '请输入有效的邮箱地址' }
// ]

总结

函数表达式是JavaScript中创建和使用函数的强大方式，它提供了灵活性和多种用途：

可以创建匿名函数或命名函数
不会被提升，需要在定义后使用
可以作为值传递给其他函数
用于创建立即执行函数表达式(IIFE)
在闭包、回调和高阶函数中发挥重要作用
ES6中的箭头函数提供了更简洁的函数表达式语法

掌握函数表达式将使你能够编写更灵活、更模块化的JavaScript代码。

练习

创建一个函数表达式，接受一个数字数组并返回所有偶数的新数组。
编写一个IIFE，创建一个计数器并在控制台输出1到5。
使用箭头函数和数组方法filter、map和reduce，创建一个函数表达式，计算一个数字数组中所有正数的平方和。
创建一个函数工厂，根据不同的折扣率生成计算折扣价格的函数。

进一步学习

要更深入地了解JavaScript函数表达式，可以参考：

MDN Web Docs的函数表达式
学习闭包、高阶函数和函数式编程概念
研究更多ES6箭头函数的用法和优势

什么是函数表达式？​

函数表达式与函数声明的区别​

函数声明​

函数表达式​

函数表达式的类型​

1. 匿名函数表达式​

2. 命名函数表达式​

3. 箭头函数表达式（ES6）​

函数表达式的应用场景​

1. 作为回调函数​

2. 立即执行函数表达式（IIFE）​

3. 函数工厂​

4. 闭包​

函数表达式的高级应用​

高阶函数​

函数柯里化​

实际案例：创建一个简单的表单验证器​

总结​

练习​