JS-Operationsobjekt-Array zum Erreichen von Beispielcode zum Hinzufügen, Löschen, Ändern und Abfragen

1. Einleitung

Kürzlich habe ich einem Freund geholfen, eine einfache Seite zum Hinzufügen, Löschen und Ändern von JSON-Arrays zu erstellen. Dabei musste zufällig JS zum Bedienen von Objekt-Arrays verwendet werden, um die Funktionen zum Hinzufügen, Löschen, Ändern und Abfragen zu implementieren. Ich schätze, dass viele meiner Freunde mit Operationen dieser Art konfrontiert werden, daher zeichne ich sie auf, um sie mit anderen zu teilen.

2. Datenaufbereitung

Hier nehme ich das Studentenobjekt-Array als Beispiel. Tatsächlich ist die Funktionsweise dieses Arrays grundsätzlich dieselbe wie die des JSON-Arrays, Sie müssen es also nur konvertieren. Sie können beispielsweise JSON.parse verwenden, um eine JSON-Zeichenfolge in ein JS-Objekt-Array zu konvertieren.

Testdaten:

// Studentenobjekt-Array var students = [
    {id:1, Name: "张三", Alter: 14},
    {id:2, Name: "Li Si", Alter: 15},
    {id:3, Name: "Wang Wu", Alter: 17},
    {id:4, Name: „Zhao Liu“, Alter: 18}
];

3. Abfragevorgang

Abfrage per Index

console.log(Studenten[1]);

Abfrage nach ID

var ss = Studenten.Filter((p) => {
    gibt p.id == 4 zurück;
});

konsole.log(ss);
console.log(ss[0]); // Drucke das erste Element

Unscharfe Suche nach Namen

4. Neue Operationen hinzufügen

var e = {id:5, Name: "Wang Ba", Alter: 20};
Studenten.push(e);

5. Löschen

// Holen Sie sich den Index basierend auf der ID var e = students.filter((p) => {
    gibt p.id == 4 zurück;
});

var index = studenten.indexOf(e);
//Lösche Studenten entsprechend dem Index.splice(index,1);
console.log(students.length); // 4 übrig

6. Änderungen

// Sie können students[0].name='张三1' direkt entsprechend dem Index ändern.
Studenten[0].Alter=20;
console.log(Studenten[0]);

7. Wie testen?

Hier können Sie das Konsolenfenster im F12-Entwicklertool von Google Chrome verwenden (tatsächlich handelt es sich um eine JS-Ausführungs-Engine). Sie müssen nur den obigen Code nacheinander eingeben und ausführen, um den Effekt zu sehen:

8. Andere Array-Operationen

Hier noch einige weitere Einsatzbefehle, die auch Freunden in Not als Referenz dienen können:

• push() fügt am Ende ein Element hinzu
• unshift() fügt das Element nach vorne hinzu
• pop() entfernt das letzte Element
• shift() entfernt das erste Element
• splice() löscht Elemente, ersetzt Elemente und fügt Elemente ein
• sort() Sortieren eines Arrays
• reverse() Array-Umkehrung
• Vue.set() ändert eines der Elemente im Array

Zusammenfassen

Damit ist der Artikel über die Verwendung von JS zur Manipulation von Objektarrays zum Implementieren von Hinzufügungen, Löschungen, Änderungen und Nachschlagevorgängen abgeschlossen. Weitere Informationen zur Verwendung von JS zur Manipulation von Objektarrays finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!