Web-Entwicklung mit JavaScript ist ein wesentlicher Bestandteil des modernen Internets. Eine der wichtigsten Funktionen, die JavaScript bietet, ist das Erstellen von Listen. Mit Listen können Sie Daten in einer geordneten Form darstellen, was die Verwendung und Interaktion mit dem Benutzer erleichtert.
Sie können eine Liste in JavaScript auf verschiedene Arten erstellen. Eine der häufigsten ist die Verwendung eines Tags zum Erstellen einer ungeordneten Liste und eines Tags zum Erstellen einzelner Listenelemente. Zum Beispiel:
Mit Tags und können Sie eine Liste erstellen, in der jedes Element als Marker oder Punkt angezeigt wird. Diese Art von Liste eignet sich besonders gut für die Darstellung ungeordneter Informationen.
Darüber hinaus können Sie mit JavaScript auch geordnete Listen erstellen. Dazu wird ein Tag verwendet. Diese Art von Liste beinhaltet das Anordnen von Elementen in der Reihenfolge, normalerweise mit Zahlen. Zum Beispiel:
Mit dem Tag können Sie geordnete Listen erstellen, in denen jedes Element mit seiner Nummer angezeigt wird. Diese Art von Liste ist nützlich, wenn Sie nummerierte Daten oder eine Abfolge von Aktionen darstellen.
Um in JavaScript auf eine Liste zuzugreifen, müssen Sie die getElementById() - oder querySelector() -Methode verwenden, um das entsprechende Listenelement anhand seiner ID oder des CSS-Selektors zu finden.
Zum Beispiel, wenn wir eine Liste mit der ID "myList" haben:
wir können auf diese Liste in JavaScript wie folgt zugreifen:
var list = document.getElementById("myList");// илиvar list = document.querySelector("#myList");
Wenn wir dann Zugriff auf die Liste haben, können wir zusätzliche Operationen durchführen, z. B. das Hinzufügen oder Entfernen von Elementen, das Ändern ihres Inhalts oder Stils usw.
Leere Liste erstellen
Sie können ein Objekt verwenden, um eine leere Liste in JavaScript zu erstellen Array.
Hier ist ein Beispielcode:
let myList = [];
In diesem Beispiel ist die Variable myList enthält eine leere Liste.
Sie können diese Liste verwenden, um Elemente zu speichern, indem Sie sie nach Bedarf hinzufügen und entfernen.
Sie können auch eine leere Liste mit dem Designer erstellen Array:
let myList = new Array();
Beide Optionen sind gleichwertig und können zum Erstellen von Listen in JavaScript verwendet werden.
Elemente zur Liste hinzufügen
Im Folgenden finden Sie Beispielcode, der ein leeres Array erstellt und Elemente hinzufügt:
const myList = [];myList.push('Элемент 1');myList.push('Элемент 2');myList.push('Элемент 3');myList.push('Элемент 4');console.log(myList);
['Element 1', 'Element 2', 'Element 3', 'Element 4']
Also mit der Methode push() und wenn Sie ein Element als Argument angeben, können Sie der Liste in JavaScript neue Elemente hinzufügen.
Elemente aus der Liste entfernen
Sie können die splice() -Methode verwenden, um Elemente aus einer Liste in JavaScript zu entfernen. Mit dieser Methode können Sie den Inhalt eines Arrays ändern, indem Sie Elemente entfernen, hinzufügen oder ersetzen.
Um ein bestimmtes Element aus einer Liste zu entfernen, müssen Sie dessen Index im Array und die Anzahl der Elemente angeben, die entfernt werden sollen. Wenn Sie beispielsweise Elemente mit den Indizes 1 und 2 entfernen möchten, können Sie den folgenden Code verwenden:
let fruits = ['яблоко', 'груша', 'апельсин', 'банан'];fruits.splice(1, 2); // удалить элементы с индексами 1 и 2console.log(fruits); // ['яблоко', 'банан']
In diesem Fall entfernt die splice() -Methode die Elemente 'Birne' und 'Orange' aus dem Fruits-Array, und das Ergebnis ist ein Array, das nur die Elemente 'Apfel' und 'Banane' enthält.
Wenn Sie nur ein Element aus der Liste entfernen möchten, können Sie nur das erste Argument an die splice() -Methode übergeben. Zum Beispiel:
let fruits = ['яблоко', 'груша', 'апельсин', 'банан'];fruits.splice(2, 1); // удалить элемент с индексом 2console.log(fruits); // ['яблоко', 'груша', 'банан']
Daher können Sie die splice() -Methode zum Entfernen von Elementen aus einer Liste in JavaScript verwenden, um die Indizes der zu löschenden Elemente und deren Anzahl anzugeben.
Listenelemente bearbeiten
Um Listenelemente in JavaScript zu ändern, können Sie Methoden verwenden, um mit Listen zu arbeiten.
1. Ändern des Inhalts eines Listenelements:
Um den Inhalt eines Listenelements zu ändern, greifen Sie zuerst mit dem Index auf das gewünschte Listenelement zu. Ändern Sie dann den Inhaltswert dieses Elements.
var myList = ["пункт 1", "пункт 2", "пункт 3"];myList[1] = "новый пункт 2";
Als Ergebnis wird die Liste wie folgt aussehen:
2. Ändern der Reihenfolge von Listenelementen:
Um die Reihenfolge der Listenelemente zu ändern, verwenden Sie Methoden wie sort() oder reverse() .
sort() sortiert die Listenelemente in alphabetischer Reihenfolge:
var myList = ["яблоко", "банан", "груша"];myList.sort();
Als Ergebnis wird die Liste wie folgt aussehen:
reverse() ändert die Reihenfolge der Listenelemente in die entgegengesetzte Reihenfolge:
var myList = ["пункт 1", "пункт 2", "пункт 3"];myList.reverse();
Als Ergebnis wird die Liste wie folgt aussehen:
Das Ändern von Listenelementen in JavaScript ermöglicht es Ihnen, den Inhalt und die Reihenfolge der Elemente zu ändern, was es zu einem sehr flexiblen und praktischen Werkzeug macht.
Liste sortieren
Wenn Sie eine Liste von Elementen haben, müssen Sie sie manchmal nach einem bestimmten Kriterium sortieren. In JavaScript gibt es mehrere Möglichkeiten, eine Liste zu sortieren.
Alphabetisch sortieren
Sie können die sort() -Methode verwenden, um die Liste der Elemente in alphabetischer Reihenfolge zu sortieren. Diese Methode sortiert die Listenelemente nach ihrer Reihenfolge in Unicode. Zum Beispiel:
Sie können den folgenden Code verwenden, um die Liste zu sortieren:
const fruitList = ["Мандаринка", "Апельсин", "Яблоко", "Банан"];fruitList.sort();
Eigene Sortierung
Wenn Sie ein eigenes Sortierkriterium verwenden möchten, können Sie eine Funktion an die sort() -Methode übergeben. Diese Funktion muss zwei Argumente (zwei Listenelemente) annehmen und eine Zahl zurückgeben:
- Eine negative Zahl, wenn das erste Element vor dem zweiten sein muss;
- Eine positive Zahl, wenn das zweite Element vor dem ersten sein muss;
- Null, wenn die Elemente in der aktuellen Reihenfolge belassen werden.
Wenn Sie beispielsweise die Zahlen in aufsteigender Reihenfolge sortieren möchten, können Sie den folgenden Code verwenden:
const numberList = [5, 2, 10, 1, 8];numberList.sort((a, b) => a - b);
Nach dem Sortieren in der Zahlenliste:
Länge der Liste abrufen
Sie können die length-Eigenschaft verwenden, um die Länge der Liste in JavaScript abzurufen. Es gibt die Anzahl der Elemente in der Liste zurück.
Zum Beispiel, wenn wir die folgende Liste haben:
var list = [1, 2, 3, 4, 5];
Um seine Länge zu erhalten, müssen Sie die length-Eigenschaft aufrufen :
var length = list.length;console.log(length); // Output: 5
Es ist auch erwähnenswert, dass die length-Eigenschaft die Anzahl der Listenelemente und nicht den Index des letzten Elements zurückgibt. Zum Beispiel in der folgenden Liste:
var anotherList = ["apple", "banana", "orange"];
Die Länge dieser Liste beträgt 3, obwohl der Index des letzten Elements 2 ist.