Heim Web-Frontend Front-End-Fragen und Antworten JavaScript ändert das JSON-Dateiformat

JavaScript ändert das JSON-Dateiformat

May 09, 2023 pm 02:35 PM

JSON (JavaScript Object Notation) ist ein leichtes Datenaustauschformat, das Daten in Schlüssel-Wert-Paaren organisiert und häufig in der Front-End-Entwicklung verwendet wird. In der tatsächlichen Entwicklung müssen wir manchmal einige Inhalte oder Formate der JSON-Datei ändern. In JS kann die JSON-Änderung durch einige Methoden erreicht werden, und die Bedienung ist sehr einfach.

In diesem Artikel erfahren Sie, wie Sie mit JavaScript das JSON-Dateiformat ändern.

1. JSON in Objekte konvertieren

Wir müssen die Daten im JSON-Format in JS-Objekte konvertieren, bevor wir sie ändern können. JSON-Daten können mit der Methode parse() in Objekte umgewandelt werden, zum Beispiel:

let jsonString = '{"name": "Mandy", "age": 20}';
let jsonObj = JSON.parse(jsonString);
console.log(jsonObj);
Nach dem Login kopieren

Um den obigen Code zu erklären, definieren wir zunächst einen String jsonString, der JSON-Daten enthält, und in der zweiten Zeile rufen wir die Methode JSON.parse() auf Konvertieren Sie jsonString in ein Objekt jsonObj, und schließlich geben wir das konvertierte Objekt aus und die Konsole gibt die folgenden Informationen aus:

{name: "Mandy", age: 20}
Nach dem Login kopieren

2. JSON-Datenattribute ändern

Als nächstes können wir die Attribute in JSON einfach ändern, zum Beispiel wir kann Mandys Alter im obigen Beispiel ändern:

jsonObj.age = 21;
console.log(jsonObj);
Nach dem Login kopieren

Wir müssen nur Punkte oder Klammern verwenden, um auf die Eigenschaften im Objekt zuzugreifen, und dann die Werte neu zuweisen.

3. Konvertieren Sie das geänderte Objekt in einen JSON-String

Nachdem wir die Änderung der JSON-Daten abgeschlossen haben, müssen wir das geänderte Objekt in ein String-Format konvertieren. Dies kann mit der Methode stringify() erreicht werden wie folgt:

let newJsonString = JSON.stringify(jsonObj);
console.log(newJsonString);
Nach dem Login kopieren

Die Methode stringify() akzeptiert ein Objekt als Parameter und konvertiert das Objekt dann in einen String im JSON-Format. Wir können die konvertierte Zeichenfolge erhalten, indem wir die Variable newJsonString neu definieren.

4. Attribute in JSON hinzufügen

Wenn wir der JSON-Datei neue Attribute hinzufügen müssen, ist es einfach, neue Attribute direkt mithilfe von Punkten oder Klammern hinzuzufügen, zum Beispiel:

jsonObj.gender = 'female';
console.log(jsonObj);
Nach dem Login kopieren

Dieser Code wird in JSON ein Geschlecht hinzufügen Attribut in, der Attributwert ist weiblich.

5. JSON-Datenattribute löschen

Wir können den Löschoperator verwenden, um Attribute in JSON zu löschen, zum Beispiel:

delete jsonObj.age;
console.log(jsonObj);
Nach dem Login kopieren

Dieser Code löscht das Altersattribut im jsonObj-Objekt Das Altersattribut wurde gelöscht.

6. JSON-Array-Daten ändern

Zusätzlich zu Objekten kann JSON auch Arrays enthalten. Schauen wir uns an, wie man ein JSON-Array ändert.

Zuerst müssen wir den String des JSON-Arrays in ein JS-Objekt konvertieren, zum Beispiel:

let jsonArrString = '[{"name": "Jack", "age": 25}, {"name": "Lucy", "age": 27}]';
let jsonArray = JSON.parse(jsonArrString);
console.log(jsonArray);
Nach dem Login kopieren

In diesem Code definieren wir einen String jsonArrString, der ein JSON-Array enthält, und verwenden die Methode parse(), um ihn in ihn umzuwandeln ein Objekttyp, das Endergebnis wird ausgegeben:

[{name: "Jack", age: 25}, {name: "Lucy", age: 27}]
Nach dem Login kopieren

Als nächstes können wir die darin enthaltenen Daten entsprechend dem Index des Objekts ändern, zum Beispiel:

jsonArray[0].age = 26;
console.log(jsonArray);
Nach dem Login kopieren

Dieser Code ändert das Altersattribut im ersten Objekt auf 26. Natürlich können Sie auch die Methode push() verwenden, um ein Objekt zum JSON-Array hinzuzufügen. Der Code lautet wie folgt:

jsonArray.push({"name":"Alex","age":30});
console.log(jsonArray);
Nach dem Login kopieren

Dieser Code fügt dem JSON-Array ein Objekt hinzu, das die Attribute „Name“ und „Alter“ enthält.

7. Zusammenfassung

Anhand der obigen Einführung können wir feststellen, dass es sehr praktisch ist, JavaScript zum Ändern des JSON-Dateiformats zu verwenden. Es ist zu beachten, dass wir den JSON-String in ein Objekt konvertieren müssen, bevor wir ihn ändern. Das geänderte Objekt muss auch über die Methode stringify() in das String-Format konvertiert werden.

Kurz gesagt, für Front-End-Entwickler ist es sehr wichtig, mit der Funktionsweise von JSON vertraut zu sein. Dadurch können wir Daten besser verwalten und pflegen und es wird auch eine große Rolle in der tatsächlichen Entwicklung spielen.

Das obige ist der detaillierte Inhalt vonJavaScript ändert das JSON-Dateiformat. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was ist Useffizität? Wie verwenden Sie es, um Nebenwirkungen auszuführen? Was ist Useffizität? Wie verwenden Sie es, um Nebenwirkungen auszuführen? Mar 19, 2025 pm 03:58 PM

In dem Artikel wird die Verwendung von UseEffect in React, einen Haken für die Verwaltung von Nebenwirkungen wie Datenabrufen und DOM -Manipulation in funktionellen Komponenten erläutert. Es erklärt die Verwendung, gemeinsame Nebenwirkungen und Reinigung, um Probleme wie Speicherlecks zu verhindern.

Erklären Sie das Konzept des faulen Ladens. Erklären Sie das Konzept des faulen Ladens. Mar 13, 2025 pm 07:47 PM

Lazy Ladeverzögerung des Ladens von Inhalten bis zur Bedarf, Verbesserung der Webleistung und Benutzererfahrung durch Reduzierung der anfänglichen Ladezeiten und des Serverlasts.

Was sind Funktionen höherer Ordnung in JavaScript und wie können sie verwendet werden, um prägnanter und wiederverwendbarer Code zu schreiben? Was sind Funktionen höherer Ordnung in JavaScript und wie können sie verwendet werden, um prägnanter und wiederverwendbarer Code zu schreiben? Mar 18, 2025 pm 01:44 PM

Funktionen höherer Ordnung in JavaScript verbessern die Übersichtlichkeit, Wiederverwendbarkeit, Modularität und Leistung von Code durch Abstraktion, gemeinsame Muster und Optimierungstechniken.

Wie funktioniert das Currying in JavaScript und wie hoch sind ihre Vorteile? Wie funktioniert das Currying in JavaScript und wie hoch sind ihre Vorteile? Mar 18, 2025 pm 01:45 PM

In dem Artikel wird das Currying in JavaScript, einer Technik, die Multi-Argument-Funktionen in Einzelargument-Funktionssequenzen verwandelt. Es untersucht die Implementierung von Currying, Vorteile wie teilweise Anwendungen und praktische Verwendungen, Verbesserung des Code -Lesens

Wie funktioniert der React -Versöhnungsalgorithmus? Wie funktioniert der React -Versöhnungsalgorithmus? Mar 18, 2025 pm 01:58 PM

Der Artikel erläutert den Versöhnungsalgorithmus von React, der das DOM effizient aktualisiert, indem virtuelle DOM -Bäume verglichen werden. Es werden Leistungsvorteile, Optimierungstechniken und Auswirkungen auf die Benutzererfahrung erörtert.

Wie verbinden Sie React -Komponenten mit Connect () an den Redux -Store? Wie verbinden Sie React -Komponenten mit Connect () an den Redux -Store? Mar 21, 2025 pm 06:23 PM

In Artikel werden die Verbindungskomponenten an Redux Store mit Connect () verbinden, wobei MapStatetoprops, MapDispatchtoprops und Leistungsauswirkungen erläutert werden.

Was ist usecontext? Wie verwenden Sie es, um den Zustand zwischen Komponenten zu teilen? Was ist usecontext? Wie verwenden Sie es, um den Zustand zwischen Komponenten zu teilen? Mar 19, 2025 pm 03:59 PM

Der Artikel erläutert den Usecontext in React, was das staatliche Management durch Vermeidung von Prop -Bohrungen vereinfacht. Es wird von Vorteilen wie zentraler Staat und Leistungsverbesserungen durch reduzierte Neulehre erörtert.

Wie verhindern Sie das Standardverhalten bei Ereignishandlern? Wie verhindern Sie das Standardverhalten bei Ereignishandlern? Mar 19, 2025 pm 04:10 PM

In Artikeln werden das Standardverhalten bei Ereignishandlern mithilfe von PURDDEFAULT () -Methoden, seinen Vorteilen wie verbesserten Benutzererfahrungen und potenziellen Problemen wie Barrierefreiheitsproblemen verhindern.

See all articles