Quel est le but et l'utilisation de « export par défaut » en JavaScript ?

Understanding "export default" in JavaScript

The advent of ES6 introduced a new module system, introducing concepts such as "export default." This article delves into the purpose and usage of this syntax.

Understanding export default

"export default" enables the creation of a default export for a module. This means that when importing the module, developers can access this default export without explicitly specifying the variable name.

For instance, in the provided SafeString.js example:

<code class="javascript">// Build out our basic SafeString type
function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

export default SafeString;</code>

This code defines a SafeString class and exports it as the default export using "export default SafeString."

Alternative Syntax for Default Exports

While "export default" is the preferred syntax for default exports, there are alternative ways to achieve the same result:

• Named Default Exports:

  <code class="javascript">export default {
  name: "John",
  age: 30
  };</code>

  Copier après la connexion

• Class Default Exports:

  <code class="javascript">export default class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  }</code>

  Copier après la connexion

• Function Default Exports:

  <code class="javascript">export default function sayHello() {
  console.log("Hello World!");
  }</code>

  Copier après la connexion

Importing Default Exports

When importing a module with a default export, you can omit the curly braces when using the import statement:

<code class="javascript">import SafeString from "SafeString.js";

// ... use SafeString</code>

Conclusion

"export default" is a powerful feature of the ES6 module system that simplifies the process of exporting and importing default values from modules. Understanding its usage is crucial for effectively leveraging JavaScript modules.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!