ES6 | Importar y exportar – Barcelona Geeks

El ES6 es un estándar de JavaScript. Con la ayuda de ES6, podemos crear módulos en JavaScript. En un módulo, también puede haber clases, funciones, variables y objetos. Para que todo esto esté disponible en otro archivo, podemos usar export e import . La exportación y la importación son las palabras clave utilizadas para exportar e importar uno o más miembros en un módulo.

Exportar: puede exportar una variable usando la palabra clave export delante de esa declaración de variable. También puede exportar una función y una clase haciendo lo mismo.

Sintaxis para variable:
```
export let variable_name;
```

Sintaxis para la función:

export function function_name() {
  // Statements
}

Sintaxis para la clase:

export class Class_Name {
  constructor() {
    // Statements
  }
}

Ejemplo 1: Cree un archivo llamado export.js y escriba el siguiente código en ese archivo.

export let num_set = [1, 2, 3, 4, 5];
  
export default function hello() {
    console.log("Hello World!");
}
  
export class Greeting {
    constructor(name) {
        this.greeting = "Hello, " + name;
    }
}

Ejemplo 2: En este ejemplo, exportamos especificando los miembros del módulo al final del archivo. También podemos usar alias mientras exportamos usando la palabra clave as .

let num_set = [1, 2, 3, 4, 5];
  
export default function hello() {
    console.log("Hello World!");
}
  
class Greeting {
    constructor(name) {
        this.greeting = "Hello, " + name;
    }
}
  
export { num_set, Greeting as Greet };

Nota: Aquí debe especificarse una exportación predeterminada.

Importar: puede importar una variable utilizando la palabra clave de importación . Puede especificar uno de todos los miembros que desea importar desde un archivo JavaScript.

Sintaxis:

import member_to_import from “path_to_js_file”;

// You can also use an alias while importing a member.
import Greeting as Greet from "./export.js";

// If you want to import all the members but don’t
// want to Specify them all then you can do that using
// a ' * ' star symbol.
import * as exp from "./export.js";

Ejemplo 1: Cree un archivo llamado import.html y escriba el siguiente código en ese archivo.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Import in ES6</title>
    </head>
    <body>
        <script type="module">
  
            // Default member first
            import hello, { num_set, Greeting } from "./export.js";
            console.log(num_set);
            hello();
            let g = new Greeting("Aakash");
            console.log(g.greeting);
        </script>
    </body>
</html>

Ejemplo 2:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Import in ES6</title>
    </head>
    <body>
        <script type="module">
            import * as exp from "./export.js";
  
            // Use dot notation to access members
            console.log(exp.num_set);
            exp.hello();
            let g = new exp.Greeting("Aakash");
            console.log(g.greeting);
        </script>
    </body>
</html>

Salida: La salida será la misma, importando el mismo archivo.

Nota: Primero se debe importar el miembro predeterminado y luego los miembros no predeterminados entre llaves.

Publicación traducida automáticamente

Artículo escrito por aakashpawar1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta