Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Das import Statement wird verwendet um Funktionen, Objekte und Primitives zu importieren die von einem externen Modul, einem anderen Script, etc. exportiert wurden.

Hinweis: Zur Zeit wird dieses Feature nicht von jedem Browser nativ unterstützt. Viele Transpiler implementieren es, wie beispielsweise der Traceur CompilerBabel oder Rollup.

Syntax

import name from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as alias from "module-name";
import defaultMember from "module-name";
import "module-name";
name
Name des Objekts, das die importierten Daten empfängt
member, memberN
Namen der exportierten Member, die importiert werden
defaultMember
Name des exportierten Defaults, das importiert wird
alias, aliasN
Name des Objekts, das die importierte Property empfängt
module-name
Der Name des Moduls das importiert wird. Dies ist ein Dateiname.

Beschreibung

Der name Parameter ist der Name des Objekts, das die exportierten Member empfängt. Die member Parameter legen einzelne Einheiten fest, während der name Parameter alles importiert. name kann auch eine Funktion sein, wenn dass Modul nur eine Einheit hat. Es folgen ein paar Beispiele für die Syntax:

Importieren der gesamten Inhalte des Moduls. Dies fügt myModule mit gegebener Reichweite mit allen exportierten Verbindungen von "my-module.js" ein.

import * as myModule from "my-module";

Einfügen einer einzelnen Einheit eines Moduls. Dies fügt myMember mit gegebener Reichweite ein.

import {myMember} from "my-module";

Einfügen von mehreren Einheiten eines Moduls. Dies fügt foo und bar mit gegebener Reichweite ein.

import {foo, bar} from "my-module";

Einfügen und Vergeben eines Alias. Dies fügt shortName mit gegebener Reichweite ein.

import {reallyReallyLongModuleMemberName as shortName} from "my-module";

Einfügen und Vergeben von mehreren Alias

import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module";

fügt ein ganzes Modul ein, dessen Variablen und Funktionen nicht aufgerufen werden können.

import "my-module";

Defaults importieren

Ein Standardexport ist möglich (egal, ob es sich um ein Objekt, eine Funktion, eine Klasse oder anderes handelt). Dementsprechend ist es auch möglich einen Standard-import zu benutzen, um diese Standards zu importieren.

Die einfachste Version importiert die Standards direkt:

import myModule from "my-module";

Man kann diese Syntax auch benutzen, um die oben genannten imports durchzufüren. In diesem Fall müssen die Standards aber wie folgt definiert werden:

import myDefault, * as myModule from "my-module";
// myModule wird als namespace benutzt

oder

import myDefault, {foo, bar} from "my-module";
// spezifische Imports nach Namen

Beispiele

Importieren einer weiteren Datei um AJAX JSON-Anfragen zu bearbeiten:

// --file.js--
function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () { 
    callback(this.responseText) 
  };
  xhr.open("GET", url, true);
  xhr.send();
}

export function getUsefulContents(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));
}

// --main.js--
import { getUsefulContents } from "file";
getUsefulContents("http://www.example.com", data => {
  doSomethingUseful(data);
});

Spezifikationen

Spezifikation Status Kommentar
ECMAScript 2015 (6th Edition, ECMA-262)
Die Definition von 'Imports' in dieser Spezifikation.
Standard Initiale Definition
ECMAScript 2017 Draft (ECMA-262)
Die Definition von 'Imports' in dieser Spezifikation.
Entwurf  

Browserkompatibilität

Feature Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
Basic support Nicht unterstützt Nicht unterstützt [1] Nicht unterstützt Build 14342 Nicht unterstützt Nicht unterstützt
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Nicht unterstützt 36.0 Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt

[1] Siehe Bug 568953.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: BennyAlex, Marzelpan, schlagi123, Breaker222, Simmarith, matbad
 Zuletzt aktualisiert von: BennyAlex,