Разница между экспортом и экспортом по умолчанию на примере

Экспорт функциональности из модуля является фундаментальной концепцией многих языков программирования. В JavaScript два распространенных способа экспорта кода из модуля — это использование операторов export и export default. Хотя они служат одинаковой цели, между ними есть важные различия. Давайте подробно рассмотрим каждый из них.

Экспорт. Оператор export используется для явного экспорта одного или нескольких именованных объектов (переменных, функций или классов) из модуля. Это позволяет вам выборочно отображать определенные элементы кода для использования другими модулями. Вот пример:

// module.js export
const PI = 3.14159;
export function add(a, b) {
  return a + b;
}
export class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

В приведенном выше примере у нас есть модуль с именем module.js, который экспортирует константу PI, функцию add и класс Person. Эти сущности можно импортировать и использовать в другом модуле с помощью оператора import.

// main.js
import { PI, add, Person } from './module.js';
console.log(PI); // Output: 3.14159
console.log(add(2, 3)); // Output: 5
const person = new Person('John');
person.sayHello(); // Output: Hello, John!

Используя именованный экспорт, мы явно указываем, какие объекты мы хотим импортировать из модуля.

Экспорт значения по умолчанию. Оператор export default используется для экспорта одного значения или объекта по умолчанию из модуля. В отличие от export, для каждого модуля может быть только один экспорт по умолчанию. Вот пример:

// module.js
const PI = 3.14159;
function add(a, b) {
  return a + b;
}
class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}
export default Person;

В приведенном выше примере оператор export default используется для экспорта класса Person в качестве экспорта по умолчанию из модуля.

// main.js
import Person from './module.js';
const person = new Person('John');
person.sayHello(); // Output: Hello, John!

При импорте экспорта по умолчанию вы можете выбрать любое имя для импортируемого объекта. В этом случае мы используем Person.

Важно отметить, что export и export default не взаимозаменяемы. Выбор между ними зависит от конкретного варианта использования и желаемого синтаксиса импорта.

Подводя итог различиям:

export разрешает несколько именованных экспортов на модуль, а export default разрешает только один экспорт по умолчанию на модуль.
Именованные экспорты импортируются с использованием их конкретных имен, заключенных в фигурные скобки, в то время как экспорты по умолчанию могут быть импортированы с использованием любого имени по вашему выбору.
Именованные экспорты обычно используются, когда модуль экспортирует несколько функций, в то время как экспорт по умолчанию часто используется для основных функций или классов модуля.

В заключение, export и export default — это мощные механизмы для предоставления кода из модуля. Понимание их различий и правильного использования необходимо для создания модульного и многократно используемого кода в JavaScript.

Вот несколько дополнительных высококачественных руководств, которые вы можете изучить:

Разница между экспортом и экспортом по умолчанию на примере

Вопросы по теме