JavaScript-Zuordnung zu JSON

Migel Hewage Nimesha 12 Oktober 2023
  1. die map()-Funktion in JavaScript
  2. Verwenden Sie eine Karte in JavaScript
  3. Verwenden Sie die Methode JSON.stringify() in Map to JSON
  4. Verwenden Sie die object.fromEntries()-Methode in Map to JSON
  5. Konvertieren Sie eine Karte in einen JSON-String
  6. Abschluss
JavaScript-Zuordnung zu JSON

JavaScript Object Notation (JSON) ist ein textbasiertes Format zur allgemeinen Darstellung strukturierter Daten. In JavaScript können wir unseren Code vereinfachen, indem wir die Funktion map() verwenden.

die map()-Funktion in JavaScript

Eine Sammlung von Schlüssel/Wert-Paaren, bekannt als map(), kann beliebige Daten verwenden und erinnert sich an die Reihenfolge, in der sie eingefügt werden.

Eine so tolle neue Syntax ist eine map(). Es ist ein hervorragendes Werkzeug, um jedes Element in einem JavaScript-Array zu ändern.

Es wird verwendet, um alle Arrays zu durchlaufen. Abhängig von den Ergebnissen kann es aus kürzlich fertiggestellten Elementen erstellen oder Elemente eines Arrays ändern, um einen neuen Bereich zu bilden.

Die Schlüssel in allem können eine map() sein, einschließlich Arrays, Objekte und Ganzzahlen.

Unterhalb des Beispiels können die Werte firstName und middleName mit der Methode map() kombiniert werden, um das Array zu durchlaufen.

let users = [
  {firstName: 'Bob', middleName: 'Mel', lastName: 'Lee'},
  {firstName: 'Joanna', middleName: 'Kaccy', lastName: 'Smith'},
  {firstName: 'Peter', middleName: 'Jone', lastName: 'Steward'}
];

let Fullnames = users.map(function(element) {
  return `${element.firstName} ${element.middleName} ${element.lastName}`;
})

console.log(Fullnames);

Hier ist die Ausgabe des obigen Codes:

Kartenbeispiel

Mit map() können Sie neue und bestehende Schnittstellen hinzufügen oder löschen und deren Wert abrufen. Die Syntax der map-Methode ist unten.

arr.map(function(element, index, array) {}, this);

Jedes Element des Arrays ruft die Callback-Funktion auf, die immer das aktuelle Element, den Index des aktuellen Elements und das gesamte Array-Objekt übergibt.

Verwenden Sie eine Karte in JavaScript

Sie können eine Zuordnung verwenden, um die Ausgaben zu sammeln und einem neuen Array hinzuzufügen. Eine ähnliche Aufgabe kann entweder mit einer for-Schleife oder mit Verschachtelung in JavaScript erreicht werden.

Aber wir können Funktionen erstellen, die einfacher zu lesen sind, indem wir eine map()-Funktion verwenden.

Mit der neuen map()-Syntax kann die map() gebaut, initialisiert und dann mit Werten ergänzt werden.

Wir können eine neue map() erstellen, genannt firstMap.

let firstMap = new Map()

Die Ausgabe ist eine leere Karte.

neue Karte

Wenn Sie einer map()-Funktion einen Wert verleihen möchten, sollten Sie ein Map-Objekt erstellen, indem Sie eine new Map() verwenden.

Verwenden Sie beispielsweise die neue Karte favCharacter, um ein Kartenobjekt zu erstellen. Unten ist eine Diskussion darüber.

let favCharacter = new Map([
  ['Brett Lee', 'Australian'], ['Muttiah Muralitharan', 'SriLankan'],
  ['Chris Gayle', 'West Indian'], ['Wasim Akram', 'Pakistan']
]);
console.log(favCharacter);

Hier ist die Ausgabe des obigen Codes:

neues Kartenobjekt

Geschäfte mit den Namen und Nationalitäten weltberühmter Cricketspieler auf diesen Kartenobjekten in diesem Beispiel. Wir können eine Ausgabe ähnlich der oben gezeigten erhalten, indem wir console.log(favCharacter); verwenden.

Verwenden Sie die Methode JSON.stringify() in Map to JSON

Zuerst können wir eine map() mit Schlüsseln und Werten als Strings erstellen. Die Methode Map.forEach verwendet sie, um die Karte zu durchlaufen, was einen Aufruf für jedes Element beinhaltet.

Danach erstellt ein Objekt die Schlüssel und Werte und fügt sie hinzu. Zuletzt gibt das Objekt die Methode JSON.stringify() im JSON-Format zurück.

let detail = new Map()
detail.set('Name', 'Lora');
detail.set('Country', 'England');
detail.set('Age', '24');
let jsonObject = {};
detail.forEach((value, key) => {jsonObject[key] = value});
console.log(JSON.stringify(jsonObject))

Hier ist die Ausgabe des obigen Codes:

stringify

Verwenden Sie die object.fromEntries()-Methode in Map to JSON

Die Methode Object.fromEntries() verwendet, um die Eingabezuordnung abzurufen und sie in ein JSON-Objekt mit Schlüsseln und Werten zu konvertieren. Die Methode fromEntries in einer Objektklasse wurde in ES6 eingeführt.

Unten sehen wir ein Beispiel für diese Methode.

let detail = new Map()
detail.set('Name', 'Lora');
detail.set('Country', 'England');
detail.set('Age', '24');
const result = Object.fromEntries(detail);
console.log(result)

Hier ist die Ausgabe des obigen Codes:

fromEntries

Konvertieren Sie eine Karte in einen JSON-String

Ebenso können wir mit Object.fromEntries() eine Karte in einen JSON-String und ein JavaScript-Objekt umwandeln. Übergeben Sie dieses Objekt dann als Argument an die JavaScript-Methode JSON.stringify().

Syntax:

var obj = Object.fromEntries(details);
var jsonString = JSON.stringify(obj);

Mit dieser Syntax können wir eine JavaScript-Karte in einen JSON-String konvertieren. Sie können sehen, wie diese Syntax im folgenden Beispiel funktioniert.

<!DOCTYPE html>
<html lang="en">
<body>
    <pre id="output"></pre>
    <script>
        var detail = new Map([['Name', 'James'],['Country', 'America'],['Age', 23]]);
        var obj = Object.fromEntries(detail);
        var jsonString = JSON.stringify(obj);
        document.getElementById('output').innerHTML += jsonString;
    </script>
</body>
</html>

Hier ist die Ausgabe des obigen Codes:

zu JSON-String zuordnen

Abschluss

In diesem Artikel wurde beschrieben, wie Sie eine JavaScript-Karte in JSON konvertieren. Wir haben mehrere Methoden besprochen, die verwendet werden können.

Hauptsächlich haben wir gelernt, wie man die Methoden JSON.stringify() und Object.fromEntries() von JavaScript verwendet, um eine Karte in einen JSON-String umzuwandeln.

Migel Hewage Nimesha avatar Migel Hewage Nimesha avatar

Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.

Verwandter Artikel - JavaScript Map