So implementieren Sie das Hinzufügen, Löschen, Ändern und Abfragen in Javascript (Codebeispiel)

Als leistungsstarke Programmiersprache kann JavaScript nicht nur für die interaktive Entwicklung von Webseiten, sondern auch für die Datenverarbeitung, den Betrieb von DOM-Elementen usw. verwendet werden. Darunter sind das Hinzufügen, Löschen, Ändern und Abfragen Funktionen, die wir häufig verwenden. Schauen wir uns den JavaScript-Code an, um das Hinzufügen, Löschen, Ändern und Abfragen zu implementieren.

1. Hinzufügen

Das häufigste Szenario zum Hinzufügen von Daten ist die Formularübermittlung. Beispielsweise müssen wir die vom Benutzer ausgefüllten Formulardaten zu einem Array hinzufügen. Das Folgende ist ein einfacher Formularübermittlungscode:

var form = document.querySelector('form');
var inputs = form.querySelectorAll('input');
var data = [];

form.addEventListener('submit', function(event) {
  event.preventDefault();
  var item = {};
  inputs.forEach(function(input) {
    item[input.name] = input.value;
  });
  data.push(item);
});

Wir erhalten zuerst das Formular und alle darin enthaltenen Eingabefeldelemente und hören dann auf das Übermittlungsereignis des Formulars. In der Ereignisverarbeitungsfunktion erstellen wir ein leeres Objekt, durchlaufen mit forEach alle Eingabefeldelemente, verwenden deren Namensattribute als Attributnamen des Objekts, verwenden deren Wertattribute als Attributwerte und fügen das Objekt schließlich den Daten hinzu Array. Beachten Sie, dass wir die Methode „preventDefault()“ aufrufen müssen, um zu verhindern, dass das Formular automatisch gesendet wird.

2. Löschen

Das Löschen von Daten ist ebenfalls ein sehr häufiges Szenario. Normalerweise löschen wir ein oder mehrere Datenelemente aufgrund einer bestimmten Bedingung. Hier ist ein einfacher Löschcode:

var id = 1; // 删除的数据ID
var index = data.findIndex(function(item) {
  return item.id === id;
});

if (index !== -1) {
  data.splice(index, 1);
}

Wir definieren zuerst die zu löschende Daten-ID und verwenden dann die Methode findIndex, um den Index des ersten Datenelements zu finden, dessen ID dieser ID entspricht (geben Sie -1 zurück, wenn nicht gefunden) . Wenn es gefunden wird, wird die Splice-Methode aufgerufen, um das Datenelement zu löschen.

3. Ändern

Das Ändern von Daten erfordert, dass wir zuerst das zu ändernde Datenelement finden und dann seinen Attributwert aktualisieren. Das Folgende ist ein einfacher Änderungscode:

var id = 1; // 修改的数据ID
var index = data.findIndex(function(item) {
  return item.id === id;
});

if (index !== -1) {
  data[index].name = '新的名称';
}

Wir suchen außerdem zuerst den Datenelement-Index, der der zu ändernden Daten-ID entspricht, und bestimmen dann, ob das Datenelement vorhanden ist. Wenn es vorhanden ist, aktualisieren Sie seinen Namensattributwert auf den neuen Namen.

4. Abfrage

Es gibt viele Möglichkeiten, Daten nach einer bestimmten Bedingung zu filtern. Das Folgende ist ein einfacher Abfragecode:

var query = '张三'; // 查询的条件
var results = data.filter(function(item) {
  return item.name.includes(query);
});

console.log(results);

Wir definieren die abzufragenden Bedingungen Verwenden Sie dann die Filtermethode, um alle Elemente zu filtern, die die Datenelemente der Bedingung erfüllen, und erstellen Sie ein neues Array. Im Beispiel entscheiden wir uns für eine Abfrage basierend auf dem Namensattribut, das die Abfragebedingungen enthält, und geben die Ergebnisse schließlich an die Konsole aus.

Das Obige ist der Code zum Hinzufügen, Löschen, Ändern und Einchecken von JavaScript. Dies sind Funktionen, die in unserer täglichen Entwicklung häufig verwendet werden und eine wichtige Rolle bei der Hintergrundentwicklung und Datenverwaltung von Anwendungen spielen. Ich hoffe, dieser Artikel kann für Sie hilfreich sein.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Hinzufügen, Löschen, Ändern und Abfragen in Javascript (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!