JavaScript: 导出多个函数反应介绍

在 JavaScript 中，我们可以使用 export 语句来导出函数反应，从而使其在其他文件中可用。一个常见的问题是如何导出多个函数反应，并在其他文件中使用它们。本文将介绍几种常见的方法。

方法一: 导出单个对象

我们可以将多个函数反应封装到一个对象中，并将该对象作为 export 语句的返回值。在导入时，我们可以使用解构赋值来访问这些函数。看下面的代码示例：

// file: utils.js

function add(a, b) {
  return a + b;
}

function substract(a, b) {
  return a - b;
}

export default {
  add,
  substract
};

// file: main.js

import { add, substract } from './utils';

console.log(add(1, 2)); // 输出 3
console.log(substract(2, 1)); // 输出 1

在上面的例子中，我们在 utils.js 文件中封装了两个函数 add() 和 substract()，并将它们作为对象的属性导出。在 main.js 文件中，我们使用解构赋值来访问这些函数。

方法二: 导出多个函数

我们也可以通过在 export 语句中使用花括号来分别导出多个函数。这种方法的缺点是在导入的时候需要使用相同的名称，容易出现命名冲突。看下面的代码示例：

// file: utils.js

export function add(a, b) {
  return a + b;
}

export function substract(a, b) {
  return a - b;
}

// file: main.js

import { add, substract } from './utils';

console.log(add(1, 2)); // 输出 3
console.log(substract(2, 1)); // 输出 1

在上面的例子中，我们在 utils.js 文件中分别导出了两个函数 add() 和 substract()。在 main.js 文件中，我们使用花括号来导入这两个函数，并使用相同的名称来访问它们。

方法三: 导出默认和命名函数

我们可以将一个函数作为默认函数导出，同时将其他函数作为命名函数导出。在导入时，我们可以使用不同的名称来访问这些函数。看下面的代码示例：

// file: utils.js

function add(a, b) {
  return a + b;
}

function substract(a, b) {
  return a - b;
}

export default add;
export { substract };

// file: main.js

import myAdd, { substract as mySubtract } from './utils';

console.log(myAdd(1, 2)); // 输出 3
console.log(mySubtract(2, 1)); // 输出 1

在上面的例子中，我们在 utils.js 文件中将 add() 函数作为默认函数导出，将 substract() 函数作为命名函数导出。在 main.js 文件中，我们使用不同的名称来访问这些函数。注意我们使用了 as 关键字来给命名函数取别名。

总结

本文介绍了三种常见的方法来导出多个函数反应。我们可以将多个函数封装到一个对象中导出，或者分别导出多个函数，或者将一个函数作为默认函数导出，同时将其他函数作为命名函数导出。在导入时，我们可以使用解构赋值或取别名的方式来访问这些函数。