Heim > Web-Frontend > js-Tutorial > Meine Reaktionsreise: Tag 18

Meine Reaktionsreise: Tag 18

Patricia Arquette
Freigeben: 2024-12-15 07:58:14
Original
949 Leute haben es durchsucht

My React Journey: Day 18

JSON und Datenmanipulation

JSON (JavaScript Object Notation) ist ein leichtes Datenformat, das für den Datenaustausch zwischen einem Server und einer Webanwendung verwendet wird. Es wird in verschiedenen Programmiersprachen umfassend unterstützt und ist eine Schlüsselkomponente in der modernen Webentwicklung.

Hauptfunktionen von JSON:
1.Struktur:

  • Daten werden als Schlüssel-Wert-Paare in einem Objekt oder als Wertearray gespeichert.
  • Beispiel (Objekt):
{
  "name": "Damilare",
  "age": 30,
  "isEmployed": true,
  "hobbies": ["Singing", "Reading", "Coding"]
}
Nach dem Login kopieren
  • Beispiel (Array):
["Dee", "Fred", "Inioluwa", "Iteoluwa"]
Nach dem Login kopieren

2.Datenaustausch:

  • JSON wird häufig zum Senden und Empfangen von Daten zwischen einem Server und einem Client verwendet.

Konvertieren zwischen JSON und JavaScript

  1. JavaScript in JSON konvertieren Verwenden Sie JSON.stringify(), um ein JavaScript-Objekt oder -Array in einen JSON-String zu konvertieren.

Beispiel: JavaScript-Array zu JSON

const names = ["Dee", "Fred", "Inioluwa", "Iteoluwa"];
const jsonString = JSON.stringify(names);

console.log(names);       // Original JS array
console.log(jsonString);  // JSON string
Nach dem Login kopieren

Beispiel: JavaScript-Objekt zu JSON

const person = {
    name: "Damilare",
    age: 30,
    isEmployed: true,
    hobbies: ["Singing", "Reading", "Coding", "Helping"]
};
const jsonString = JSON.stringify(person);

console.log(person);      // Original JS object
console.log(jsonString);  // JSON string

Nach dem Login kopieren

2. Konvertieren Sie JSON in JavaScript
Verwenden Sie JSON.parse(), um einen JSON-String in ein JavaScript-Objekt oder -Array zu konvertieren.

Beispiel: JSON-String zu JavaScript-Array

const jsonArray = `["Dee", "Fred", "Inioluwa", "Iteoluwa"]`;
const jsArray = JSON.parse(jsonArray);

console.log(jsonArray);   // JSON string
console.log(jsArray);     // JS array
Nach dem Login kopieren

Beispiel: JSON-String zu JavaScript-Objekt

const jsonObject = `{
    "name": "Damilare",
    "age": 30,
    "isEmployed": true,
    "hobbies": ["Singing", "Reading", "Coding", "Helping"]
}`;
const jsObject = JSON.parse(jsonObject);

console.log(jsonObject);  // JSON string
console.log(jsObject);    // JS object
Nach dem Login kopieren

JSON-Dateien abrufen und bearbeiten
JSON-Daten können dynamisch von einem Server oder einer lokalen Datei abgerufen und bearbeitet werden.

1. JSON-Dateien abrufen
Verwenden Sie die fetch()-API, um JSON-Daten anzufordern.

Beispiel: JSON-Datei abrufen

fetch("people.json")
    .then(response => response.json()) // Convert response to JS object/array
    .then(data => console.log(data));  // Log the JSON data
Nach dem Login kopieren

2. Iterieren durch JSON-Daten
Wenn es sich bei dem abgerufenen JSON um ein Array von Objekten handelt, können Sie Methoden wie .forEach() verwenden, um jedes Element zu durchlaufen.

Beispiel: Iterieren durch abgerufene JSON-Daten

fetch("people.json")
    .then(response => response.json())
    .then(people => {
        people.forEach(person => {
            console.log(person.name); // Access properties of each object
        });
    });
Nach dem Login kopieren

Anwendungsfälle von JSON in Anwendungen:
1.Konfigurationsdateien:

  • JSON wird zum Speichern von App-Einstellungen verwendet (z. B. config.json).

2.APIs:

  • REST-APIs geben üblicherweise JSON als Antwortformat zurück.

3.Datenspeicherung:

  • Lightweight-Datenbanken (z. B. Firebase, MongoDB) basieren auf JSON-ähnlichen Strukturen.

4.Datenaustausch:

  • JSON wird für die Kommunikation zwischen Frontend und Backend verwendet.

Reflexion

Was ich gelernt habe:

  • So konvertieren Sie JavaScript-Objekte/Arrays in JSON und umgekehrt.
  • Verwenden von fetch() zum Anfordern von JSON-Daten aus einer externen Datei oder API.
  • Iterierung durch JSON-Daten mit .forEach().

Tägliches Wachstum ist süß, auch wenn es zusätzliche Disziplin erfordert.

Tag 18 am Boden zerstört

Das obige ist der detaillierte Inhalt vonMeine Reaktionsreise: Tag 18. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage