Objekt in Abfragezeichenfolge

JavaScriptJavaScriptBeginner
Jetzt üben

This tutorial is from open-source community. Access the source code

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

Einführung

In diesem Lab werden wir untersuchen, wie man mithilfe von JavaScript aus den Schlüssel-Wert-Paaren eines Objekts einen Abfragezeichenfolge erstellt. Wir werden die Array.prototype.reduce()-Methode auf Object.entries() anwenden, um die Abfragezeichenfolge zu erstellen, und basierend auf der Länge der queryString das passende Symbol ermitteln. Am Ende dieses Labs werden Sie in der Lage sein, effizient eine Abfragezeichenfolge für Ihre Webanwendungen zu generieren.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") javascript/AdvancedConceptsGroup -.-> javascript/template_lit("Template Literals") subgraph Lab Skills javascript/variables -.-> lab-28524{{"Objekt in Abfragezeichenfolge"}} javascript/data_types -.-> lab-28524{{"Objekt in Abfragezeichenfolge"}} javascript/arith_ops -.-> lab-28524{{"Objekt in Abfragezeichenfolge"}} javascript/comp_ops -.-> lab-28524{{"Objekt in Abfragezeichenfolge"}} javascript/obj_manip -.-> lab-28524{{"Objekt in Abfragezeichenfolge"}} javascript/higher_funcs -.-> lab-28524{{"Objekt in Abfragezeichenfolge"}} javascript/destr_assign -.-> lab-28524{{"Objekt in Abfragezeichenfolge"}} javascript/template_lit -.-> lab-28524{{"Objekt in Abfragezeichenfolge"}} end

Umwandlung eines Objekts in eine Abfragezeichenfolge

Um ein Objekt in eine Abfragezeichenfolge umzuwandeln, verwenden Sie die Funktion objectToQueryString(), die aus den Schlüssel-Wert-Paaren des angegebenen Objekts eine Abfragezeichenfolge generiert.

Die Funktion funktioniert wie folgt:

  • Sie verwendet Array.prototype.reduce() auf Object.entries(), um die Abfragezeichenfolge aus queryParameters zu erstellen.
  • Sie bestimmt das Symbol als entweder ? oder & basierend auf der Länge von queryString.
  • Sie konkateniert val nur dann an queryString, wenn es sich um einen String handelt.
  • Sie gibt die queryString oder einen leeren String zurück, wenn queryParameters falsch ist.

Hier ist der Code für die Funktion objectToQueryString():

const objectToQueryString = (queryParameters) => {
  return queryParameters
    ? Object.entries(queryParameters).reduce(
        (queryString, [key, val], index) => {
          const symbol = queryString.length === 0 ? "?" : "&";
          queryString +=
            typeof val === "string" ? `${symbol}${key}=${val}` : "";
          return queryString;
        },
        ""
      )
    : "";
};

Beispielverwendung der Funktion objectToQueryString():

objectToQueryString({ page: "1", size: "2kg", key: undefined }); // gibt '?page=1&size=2kg' zurück

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Objekt in Abfragezeichenfolge" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.