JavaScript的数组里放函数再调用

JavaScript的数组可以存储函数，并允许在之后调用这些函数。这是因为在JavaScript中，函数作为一等公民，可以像任何其他值一样被存储、传递和操作。您可以通过简单地将函数定义作为数组元素进行存储，然后使用数组索引访问并执行这些函数来实现这一点。这种方法在编写事件处理器、回调函数以及管理函数队列等场景中非常有用。例如，您可以创建一个函数数组，如let funcArray = [function(){ console.log('Hello') }, function(){ console.log('World') }];，然后通过funcArray[0]()来调用数组中的第一个函数。

一、创建并存储函数

JavaScript中，声明函数与声明其他类型的变量并没有太大的区别。您可以将一个函数直接分配给数组的一个位置，就像为数组添加字符串或数字一样。

const functionArray = [];
// 定义第一个函数
functionArray[0] = function() {
  console.log('第一个函数被调用。');
};
// 定义第二个函数
functionArray[1] = function() {
  console.log('第二个函数被调用。');
};

在上面的代码中，我们定义了一个空数组functionArray并向其添加了两个匿名函数。每个函数当被调用时，会打印出一个简单的消息。

二、调用数组中的函数

要调用存储在数组中的函数，您可以使用数组索引来引用并执行。

// 调用第一个函数
functionArray[0]();
// 调用第二个函数
functionArray[1]();

通过在函数名后面添加一对圆括号()可以执行函数。在这个示例中，functionArray[0]()即调用数组中索引为0的第一个函数。

三、实际应用场景

在实际开发中，将函数存储在数组中的做法可以帮助您管理代码、增强代码可重用性和模块化。

举例来说，如果您正在编写一个处理多个步骤的过程，每个步骤都需要执行特定的函数，您就可以将这些步骤函数存储在一个数组中：

const steps = [
  function step1() {
    console.log('执行步骤 1');
  },
  function step2() {
    console.log('执行步骤 2');
  },
  function step3() {
    console.log('执行步骤 3');
  }
];
for (let i = 0; i < steps.length; i++) {
  steps[i]();
};

这段代码建立了一个包含三个步骤的数组steps，然后通过一个for循环依次调用每个步骤。这种分步管理的方式可以使您的代码更加清晰、组织有序。

四、高级应用：回调函数和事件处理

将函数存放在数组中，最常见的应用场景是回调函数的管理和事件处理。

例如，在Node.js中，您或许需要在服务器启动后运行多个初始化回调函数：

const startupTasks = [
  function callback1() {
    console.log('初始化数据库。');
  },
  function callback2() {
    console.log('初始化缓存。');
  },
  function callback3() {
    console.log('启动日志服务。');
  }
];
function runStartupTasks(callbacks) {
  callbacks.forEach(callback => {
    callback();
  });
}
// 在服务器启动后执行
runStartupTasks(startupTasks);

这个startupTasks数组包含了多个初始化任务，在服务器成功启动后，通过runStartupTasks函数一一执行。使用数组来管理回调让您可以灵活的添加或移除任务，而不需要修改runStartupTasks的内部实现。

类似的，您也可以在浏览器中使用函数数组来管理事件监听器。这样做可以让您根据需要绑定或解绑事件处理函数：

const button = document.getElementById('myButton');
const buttonClickHandlers = [
  function eventHandler1() {
    console.log('按钮被点击：处理器 1');
  },
  function eventHandler2() {
    console.log('按钮被点击：处理器 2');
  }
];
// 添加事件监听
buttonClickHandlers.forEach(handler => {
  button.addEventListener('click', handler);
});
// 根据需要移除特定的事件监听
button.removeEventListener('click', buttonClickHandlers[0]);

五、函数数组与高阶函数

在JavaScript中，高阶函数（即接受函数作为参数或返回函数的函数）也经常与函数数组结合使用。例如，假设您有一个执行多个验证规则的场景：

const validationRules = [
  function rule1(value) {
    return value > 0;
  },
  function rule2(value) {
    return value < 100;
  },
  function rule3(value) {
    return Number.isInteger(value);
  }
];
function validateValue(value, rules) {
  return rules.every(rule => rule(value));
}
// 使用验证规则校验值
const isValueValid = validateValue(50, validationRules);
console.log(`值的有效性：${isValueValid}`);