suchen
HeimWeb-Frontendjs-TutorialJSON.stringify() & JSON.parse()

JSON

JSON oder JavaScript Object Notation ist ein Textformat zum Speichern und Transportieren komplexer Daten zwischen Systemen. Javascript umfasst einfache Methoden zum Konvertieren von JSON-Text in ein Objekt und von JSON-Objekten in Text.

Dies ist nützlich, wenn ...

JSON.stringify() und JSON.parse() sind integrierte Funktionen, die für JavaScript-Objekte und Strings verwendet werden können, um sie hin und her zu konvertieren.

Hier habe ich ein Array namens Alben mit Albumobjekten, die jeweils zwei Schlüssel enthalten: „Künstler“ und „Titel“.

let albums = [
{
  "artist" : "Herbie Hancock",
  "title" : "Head Hunters",
},
{
  "artist" : "Beastie Boys",
  "title" : "Pauls Boutique"
},
  {
  "artist" : "The Cramps",
  "title" : "Bad Music for Bad People"
}
];

console.log(albums);

Das Protokollieren dieses Codes ergibt die folgende Ausgabe:

// [object Array] (3)
[// [object Object] 
{
  "artist": "Herbie Hancock",
  "title": "Head Hunters"
},// [object Object] 
{
  "artist": "Beastie Boys",
  "title": "Pauls Boutique"
},// [object Object] 
{
  "artist": "The Cramps",
  "title": "Bad Music for Bad People"
}]

Beim Aufruf von console.log(albums); erkennt die Konsole, dass es sich bei albums um ein Array handelt. Es fasst das Array als [Objekt-Array] und jedes darin enthaltene Element als [Objekt-Objekt] zusammen, anstatt standardmäßig jedes Detail zu erweitern. Dies ist die integrierte Abkürzung der Konsole, die angibt, dass jedes Element ein Objekt ist.

JSON.stringify()

JSON.stringify() nimmt ein JavaScript, ein komplexes Array oder Objekt und wandelt es in einen JSON-String um.

Hier konvertiere ich das Alben-Array in einen JSON-String, indem ich die Methode JSON.stringify() für Alben aufrufe:

let albumStrings = JSON.stringify(albums);

console.log(albumStrings);

Das Protokollieren dieses Codes ergibt die folgende Ausgabe:

"[{'artist':'Herbie Hancock','title':'Head Hunters'},{'artist':'Beastie 
Boys','title':'Pauls Boutique'},{'artist':'The Cramps','title':'Bad Music 
for Bad People'}]"

Dadurch erhalten wir ein Array aus drei Objekten mit jeweils zwei Eigenschaften.

Aber was wäre, wenn ich wollte..

Die Funktion JSON.stringify() akzeptiert bis zu drei Parameter:

  1. Wert: der Wert, der in eine JSON-Zeichenfolge (Alben) konvertiert werden soll

  2. Replacer (Optional): eine Funktion, mit der Sie jedes Schlüssel-Wert-Paar (null) ändern können

  3. Platz (optional): die Anzahl der Plätze, die pro Ebene verwendet werden sollen (4)

let albumStringsFormat = JSON.stringify(albums, null, 4);

console.log(albumStringsFormat);

Das Protokollieren dieses Codes ergibt die folgende Ausgabe:

"[
    {
        'artist': 'Herbie Hancock',
        'title': 'Head Hunters'
    },
    {
        'artist': 'Beastie Boys',
        'title': 'Pauls Boutique'
    },
    {
        'artist': 'The Cramps',
        'title': 'Bad Music for Bad People'
    }
]"

Hier können Sie sehen, dass jedes Objekt jetzt

ist

JSON.stringify() & JSON.parse()

JSON.parse()

Als nächstes habe ich eine Reihe von
erstellt

let albumsString = '[{"artist": "Bad Brains", "title": "Bad Brains"}, 
{"artist": "A Tribe Called Quest", "title": "Low End Theory"}, {"artist": 
"Nina Simone", "title": "Wild is the Wind"}]'

console.log(albumsString);

Das Protokollieren dieses Codes ergibt die folgende Ausgabe:

"[{'artist': 'Bad Brains', 'title': 'Bad Brains'}, {'artist': 'A Tribe 
Called Quest', 'title': 'Low End Theory'}, {'artist': 'Nina Simone', 
'title': 'Wild is the Wind'}]"

Wenn ich die Länge protokolliere

console.log(albumsString.length); // length of string
162

Wenn ich eine Länge von 162 erhalte, weil.

Als nächstes analysiere ich das

let albumsObject = JSON.parse(albumsString);

console.log(albumsObject);

Das Protokollieren dieses Codes ergibt die folgende Ausgabe:

// [object Array] (3)
[// [object Object] 
{
  "artist": "Bad Brains",
  "title": "Bad Brains"
},// [object Object] 
{
  "artist": "A Tribe Called Quest",
  "title": "Low End Theory"
},// [object Object] 
{
  "artist": "Nina Simone",
  "title": "Wild is the Wind"
}]

Wenn ich jetzt die Länge des Objekts protokolliere

console.log(albumsObject.length); // length of object
3

Dies protokollieren

console.log(JSON.stringify(albumsObject, null, 4));

Das Protokollieren dieses Codes ergibt die folgende Ausgabe:

"[
    {
        'artist': 'Bad Brains',
        'title': 'Bad Brains'
    },
    {
        'artist': 'A Tribe Called Quest',
        'title': 'Low End Theory'
    },
    {
        'artist': 'Nina Simone',
        'title': 'Wild is the Wind'
    }
]"

JSON.stringify() & JSON.parse()

Das obige ist der detaillierte Inhalt vonJSON.stringify() & JSON.parse(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
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
JavaScript-Anwendungen: Von Front-End bis Back-EndJavaScript-Anwendungen: Von Front-End bis Back-EndMay 04, 2025 am 12:12 AM

JavaScript kann für die Entwicklung von Front-End- und Back-End-Entwicklung verwendet werden. Das Front-End verbessert die Benutzererfahrung durch DOM-Operationen, und die Back-End-Serveraufgaben über node.js. 1. Beispiel für Front-End: Ändern Sie den Inhalt des Webseitentextes. 2. Backend Beispiel: Erstellen Sie einen Node.js -Server.

Python vs. JavaScript: Welche Sprache sollten Sie lernen?Python vs. JavaScript: Welche Sprache sollten Sie lernen?May 03, 2025 am 12:10 AM

Die Auswahl von Python oder JavaScript sollte auf Karriereentwicklung, Lernkurve und Ökosystem beruhen: 1) Karriereentwicklung: Python ist für die Entwicklung von Datenwissenschaften und Back-End-Entwicklung geeignet, während JavaScript für die Entwicklung von Front-End- und Full-Stack-Entwicklung geeignet ist. 2) Lernkurve: Die Python -Syntax ist prägnant und für Anfänger geeignet; Die JavaScript -Syntax ist flexibel. 3) Ökosystem: Python hat reichhaltige wissenschaftliche Computerbibliotheken und JavaScript hat ein leistungsstarkes Front-End-Framework.

JavaScript -Frameworks: Stromversorgung moderner WebentwicklungJavaScript -Frameworks: Stromversorgung moderner WebentwicklungMay 02, 2025 am 12:04 AM

Die Kraft des JavaScript -Frameworks liegt in der Vereinfachung der Entwicklung, der Verbesserung der Benutzererfahrung und der Anwendungsleistung. Betrachten Sie bei der Auswahl eines Frameworks: 1. Projektgröße und Komplexität, 2. Teamerfahrung, 3. Ökosystem und Community -Unterstützung.

Die Beziehung zwischen JavaScript, C und BrowsernDie Beziehung zwischen JavaScript, C und BrowsernMay 01, 2025 am 12:06 AM

Einführung Ich weiß, dass Sie es vielleicht seltsam finden. Was genau muss JavaScript, C und Browser tun? Sie scheinen nicht miteinander verbunden zu sein, aber tatsächlich spielen sie eine sehr wichtige Rolle in der modernen Webentwicklung. Heute werden wir die enge Verbindung zwischen diesen drei diskutieren. In diesem Artikel erfahren Sie, wie JavaScript im Browser ausgeführt wird, die Rolle von C in der Browser -Engine und wie sie zusammenarbeiten, um das Rendern und die Interaktion von Webseiten voranzutreiben. Wir alle kennen die Beziehung zwischen JavaScript und Browser. JavaScript ist die Kernsprache der Front-End-Entwicklung. Es läuft direkt im Browser und macht Webseiten lebhaft und interessant. Haben Sie sich jemals gefragt, warum Javascr

Node.js Streams mit TypeScriptNode.js Streams mit TypeScriptApr 30, 2025 am 08:22 AM

Node.js zeichnet sich bei effizienten E/A aus, vor allem bei Streams. Streams verarbeiten Daten inkrementell und vermeiden Speicherüberladung-ideal für große Dateien, Netzwerkaufgaben und Echtzeitanwendungen. Die Kombination von Streams mit der TypeScript -Sicherheit erzeugt eine POWE

Python vs. JavaScript: Leistung und EffizienzüberlegungenPython vs. JavaScript: Leistung und EffizienzüberlegungenApr 30, 2025 am 12:08 AM

Die Unterschiede in der Leistung und der Effizienz zwischen Python und JavaScript spiegeln sich hauptsächlich in: 1 wider: 1) Als interpretierter Sprache läuft Python langsam, weist jedoch eine hohe Entwicklungseffizienz auf und ist für eine schnelle Prototypentwicklung geeignet. 2) JavaScript ist auf einen einzelnen Thread im Browser beschränkt, aber Multi-Threading- und Asynchronen-E/A können verwendet werden, um die Leistung in Node.js zu verbessern, und beide haben Vorteile in tatsächlichen Projekten.

Die Ursprünge von JavaScript: Erforschung seiner ImplementierungsspracheDie Ursprünge von JavaScript: Erforschung seiner ImplementierungsspracheApr 29, 2025 am 12:51 AM

JavaScript stammt aus dem Jahr 1995 und wurde von Brandon Ike erstellt und realisierte die Sprache in C. 1.C-Sprache bietet Programmierfunktionen auf hoher Leistung und Systemebene für JavaScript. 2. Die Speicherverwaltung und die Leistungsoptimierung von JavaScript basieren auf C -Sprache. 3. Die plattformübergreifende Funktion der C-Sprache hilft JavaScript, auf verschiedenen Betriebssystemen effizient zu laufen.

Hinter den Kulissen: Welche Sprache macht JavaScript?Hinter den Kulissen: Welche Sprache macht JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript wird in Browsern und Node.js -Umgebungen ausgeführt und stützt sich auf die JavaScript -Engine, um Code zu analysieren und auszuführen. 1) abstrakter Syntaxbaum (AST) in der Parsenstufe erzeugen; 2) AST in die Kompilierungsphase in Bytecode oder Maschinencode umwandeln; 3) Führen Sie den kompilierten Code in der Ausführungsstufe aus.

See all articles

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

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

SublimeText3 Linux neue Version

SublimeText3 Linux neue Version

SublimeText3 Linux neueste Version

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Englische Version

SublimeText3 Englische Version

Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor