Maison  >  Article  >  interface Web  >  A quoi sert l'importation comme dans es6

A quoi sert l'importation comme dans es6

WBOY
WBOYoriginal
2022-04-25 17:19:544510parcourir

Dans es6, import as est utilisé pour combiner le contenu exporté par plusieurs exportations en un seul objet et le renvoyer ; la modularisation d'ES6 est divisée en deux modules : export et import. Cette méthode peut envelopper tous les contenus d'exportation dans l'objet spécifié. La syntaxe pour "importer * comme objet depuis...".

A quoi sert l'importation comme dans es6

L'environnement d'exploitation de ce tutoriel : système Windows 10, ECMAScript version 6.0, ordinateur Dell G3.

À quoi sert l'importation comme dans es6

ES6, javascript prend en charge le module pour la première fois. La modularisation d'ES6 est divisée en deux modules : export et import. Dans les projets, nous voyons souvent une utilisation de import * comme obj from. Cette méthode d'écriture enveloppe toutes les sorties dans des objets obj.

import * as xxx from 'xxx' : combinera le contenu exporté par plusieurs exports en un seul objet et le renverra

import xxx from 'xxx' : (export default Din) n'exportera cet objet par défaut que comme un seul objet

Exemple 1

// index.js
export function fn1(data){
  console.log(1)
}
export function fn2(data){
  console.log(2)
}
import * as Fn from './index.js'
Fn.fn1()  // 1
Fn.fn2()  // 2

Exemple 2

let myName = "Jon";
let myAge = 18;
let myfn = function(){
    return "我是"+myName+"!今年"+myAge+"岁了"
}
export {
    myName as name,
    myAge as age,
    myfn as fn
}

Le code reçu

import {fn,age,name} from "./test.js";
console.log(fn()); //我是Jon!今年19岁了
console.log(age); //19
console.log(name); //Jon

ou écrit comme

import * as info from "./test.js"; //通过*来批量接收,as 来指定接收的名字
console.log(info.fn()); //我是Jon!今年18岁了
console.log(info.age); //18
console.log(info.name); //Jon

Exemple 3

Renommer l'exportation et l'importation, si les noms de variables dans plusieurs fichiers importés sont les mêmes, c'est-à-dire qu'il y aura un problème de conflit de nom. Afin de résoudre ce problème, ES6 fournit une méthode pour renommer. Vous pouvez le faire lorsque vous importez le nom.

/*************test1.js*****************/
export let myName = "我来自test1.js";
/*************test2.js*****************/
export let myName = "我来自test2.js";
 
/*************index.js****************/
import {myName as name1} from "./test1.js";
import {myName as name2} from "./test2.js";
console.log(name1); //我来自test1.js
console.log(name2); //我来自test2.js

【Recommandations associées : tutoriel vidéo javascript, front-end web

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn