JavaScript ist eine der beliebtesten Programmiersprachen, die zum Erstellen interaktiver Webseiten verwendet wird. Häufig müssen Sie den Inhalt eines Arrays auf einer Seite anzeigen, um die Daten für Benutzer visuell darzustellen.
Um zu beginnen, müssen Sie eine Schaltfläche im HTML-Code mit einem Element erstellen button:
Dann erstellen wir eine JavaScript-Funktion, die beim Klicken auf die Schaltfläche ausgelöst wird:
Als nächstes müssen Sie der Schaltfläche einen Ereignishandler hinzufügen, der die printArray-Funktion aufruft, wenn Sie auf die Schaltfläche klicken:
Wenn Sie nun auf die Schaltfläche "Push Me" klicken, wird die printArray-Funktion aufgerufen und der Inhalt des Arrays wird auf die Seite ausgegeben.
Wie gebe ich ein JavaScript-Array über eine Schaltfläche aus
Wenn Sie ein JavaScript-Array auf Knopfdruck ausgeben möchten, müssen Sie JavaScript verwenden, um das Ereignis zu behandeln und die Array-Elemente in das HTML-Element einzufügen. Hier ist ein Beispielcode:
In diesem Beispiel erstellen wir ein myArray, eine Schaltfläche mit der ID "display-button" und eine Liste mit der ID "array-list". Dann fügen wir der Schaltfläche einen click-Ereignishandler hinzu, der eine for-Schleife auslöst, um jedes Element des Arrays zu durchlaufen. Innerhalb der Schleife erstellen wir ein Listenelement (li), setzen seinen Inhalt auf ein Array-Element und fügen es mit der ID "array-list" zur Liste (ul) hinzu. Auf diese Weise wird jedes Element des Arrays bei jedem Klick auf die Schaltfläche zur Liste hinzugefügt.
Schritt 1: Schreiben von HTML-Markup
Schritt 2: Erstellen und Füllen eines Arrays in JavaScript
var numbers = [1, 2, 3, 4, 5];
Dieser Code erstellt ein Numbers-Array, in dem die Zahlen 1 bis 5 gespeichert werden.
Wenn Sie ein Array von Strings erstellen möchten, können Sie den folgenden Code verwenden:
var fruits = ["яблоко", "банан", "апельсин"];
Dieser Code erstellt ein Array von Fruits, in dem die Namen verschiedener Früchte gespeichert werden.
Sie können auch ein leeres Array erstellen und es einzeln mit Elementen füllen. Dazu müssen Sie nur leere eckige Klammern und die push() -Methode verwenden. Der folgende Code erstellt beispielsweise ein leeres Array und füllt es mit mehreren Elementen:
var emptyArray = [];emptyArray.push("элемент 1");emptyArray.push("элемент 2");emptyArray.push("элемент 3");
Als Ergebnis enthält die Variable emptyArray ein Array mit drei Elementen.
Erstellen Sie eine Tabelle mit dem Tag "table" und geben Sie ihr das Attribut "id" an, damit wir aus JavaScript-Code darauf zugreifen können:
Innerhalb der Funktion "displayArray" erstellen wir eine Variable "table", die auf die erstellte Tabelle verweist:
var table = document.getElementById("arrayTable");
Dann werden wir alle Elemente des Arrays mit einer "for" -Schleife durchlaufen und Zeilen und Zellen für jedes Element erstellen:
var row = table.insertRow(i);
var cell = row.insertCell(0);
Schließlich rufen wir diese Funktion auf, wenn Sie auf eine Schaltfläche klicken und ihr ein Array als Argument übergeben:
Wenn wir nun auf die Schaltfläche klicken, wird eine Tabelle mit den Array-Elementen auf der Seite erstellt.
Schritt 4: Programmieren der Taste, um die Funktion aufzurufen
- Suchen Sie im HTML-Code nach der Schaltfläche, mit der die Funktion aufgerufen wird. Meistens handelt es sich um ein Element , aber es kann auch ein anderes HTML-Element mit dem Attribut onclick geben.
- Fügen Sie der Schaltfläche ein onclick-Attribut hinzu und geben Sie darin den Namen der Funktion an, die Sie beim Klicken auf die Schaltfläche aufrufen möchten.
Hier ist ein Beispiel für den Button-Code und die entsprechende JavaScript-Funktion:
function printArray() Schritt 5: Binden Sie eine Funktion an eine Schaltfläche
Binden Sie die printArray-Funktion an die Schaltfläche:
Beachten Sie, dass Sie anstelle des onclick-Attributs eine moderne Methode zum Binden einer Funktion mit JavaScript verwenden können. Betrachten Sie dies im nächsten Schritt.
Schritt 6: Testen des Ergebnisses
1. Die join() -Methode
Mit der join() -Methode können Sie alle Elemente eines Arrays in einer Zeile kombinieren, indem Sie sie durch ein bestimmtes Trennzeichen trennen. Um beispielsweise die Elemente eines Arrays durch Kommas getrennt auszugeben, können Sie den folgenden Code verwenden:
let fruits = ['яблоко', 'банан', 'груша'];let result = fruits.join(', ');2. Die Methode slice()
Mit der slice() -Methode können Sie einen Teil eines Arrays auswählen und daraus ein neues Array erstellen. Es nimmt zwei Argumente an: die Anfangs- und Endindizes der Elemente, die hervorgehoben werden sollen. Wenn Sie beispielsweise nur die ersten beiden Elemente eines Arrays ausgeben möchten, können Sie den folgenden Code verwenden:
let fruits = ['яблоко', 'банан', 'груша', 'апельсин', 'лимон'];let result = fruits.slice(0, 2);3. Concat() -Methode
Mit der concat() -Methode können Sie mehrere Arrays zu einem neuen Array kombinieren. Es nimmt eine beliebige Anzahl von Argumenten an, bei denen es sich um Arrays oder Elemente handelt, und gibt ein neues Array zurück. Um beispielsweise zwei Arrays zu kombinieren, können Sie den folgenden Code verwenden:
let fruits1 = ['яблоко', 'банан', 'груша'];let fruits2 = ['апельсин', 'лимон'];let result = fruits1.concat(fruits2);4. Reverse() -Methode
Mit der reverse() -Methode können Sie die Reihenfolge der Elemente in einem Array in umgekehrter Reihenfolge ändern. Wenn Sie beispielsweise die Elemente eines Arrays in umgekehrter Reihenfolge ausgeben möchten, können Sie den folgenden Code verwenden:
let fruits = ['яблоко', 'банан', 'груша'];fruits.reverse();Schritt 8: Überprüfen, ob Elemente im Array vorhanden sind
Sie können einen bedingten Ausdruck verwenden, um die Länge eines Arrays zu überprüfen. Zum Beispiel:
if (массив.length === 0) <> else <>
Hier ist ein Array.length ist eine Eigenschaft eines Arrays, die seine Länge zurückgibt.
Wenn die Länge des Arrays Null ist, ist das Array leer. In diesem Fall können Sie eine entsprechende Meldung anzeigen. Andernfalls können Sie den Inhalt des Arrays auf einer Seite ausgeben.
