Erklären Sie die Vorteile der erweiterten Syntax und wie sie sich vom Rest der Syntax in ES6 unterscheidet?-js-Tutorial-php.cn

解释一下扩展语法的好处以及它与 ES6 中的剩余语法有何不同？

In der ES6-Version von JavaScript wurde die erweiterte Syntax als sehr leistungsstarke Funktion eingeführt. Wir können die Erweiterungssyntax verwenden, um ein Array oder Objekt in eine Variable desselben Datentyps zu erweitern.

Vor der Einführung der Spread-Syntax in ES6 verwendeten Entwickler beispielsweise for-Schleifen, um alle Elemente eines Arrays in ein anderes Array zu kopieren. Können Sie alle Elemente eines Arrays in ein anderes kopieren, indem Sie einen linearen Code mit erweiterter Syntax schreiben, anstatt 5 bis 7 Codezeilen mit einer for-Schleife zu schreiben? Ja, Sie haben es richtig gehört!

In diesem Tutorial lernen wir verschiedene Anwendungsfälle der Erweiterungssyntax kennen. Außerdem werden wir am Ende des Tutorials sehen, wie es sich vom Rest der Syntax unterscheidet.

Propagationsgrammatik

Die Erweiterungssyntax in JavaScript ist eine Syntax, die es ermöglicht, ein iterierbares Objekt (z. B. ein Array oder Objekt) in eine einzelne Variable oder ein einzelnes Element zu erweitern.

Benutzer können die Erweiterungssyntax verwenden, um iterierbare Objekte gemäß der folgenden Syntax zu erweitern.

let array = [10, 40, 7, 345];
let array2 = [...array];

Nach dem Login kopieren

In der obigen Syntax kopieren wir alle Elemente des iterierbaren „Arrays“ in die Variable array2.

Vorteile der erweiterten Syntax

Die Verwendung der erweiterten Syntax bietet einige Vorteile oder Funktionen -

Kopieren Sie ein Array oder Objekt,
Arrays oder Objekte kombinieren und
Übergeben Sie mehrere Elemente als Funktionsparameter.

Sehen wir uns verschiedene Beispiele für jede der oben genannten Funktionen der erweiterten Syntax an.

Beispiel

Array mit Spread-Syntax kopieren

In diesem Beispiel verwenden wir erweiterte Synatx, um die Elemente eines Arrays in ein anderes Array zu kopieren. Sie können sehen, dass der einzelne lineare Code alle Array-Elemente in Array2 kopiert.

<html>
   <body>
      <h2>Using the spread syntax to copy one array to another</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         let array1 = [10, 40, 7, 345];
         output.innerHTML += "Original array: " + array1 + "</br>";
         
         // copy array using spread syntax
         let array2 = [...array1];
         output.innerHTML += "Copied array: " + array2 + "</br>";
      </script>
   </body>
</html>

Nach dem Login kopieren

Beispiel

Verwenden Sie die Spread-Syntax, um Arrays oder Objekte zusammenzuführen

Wir führen Array1 und Array2 mithilfe der erweiterten Syntax in Array1 zusammen, anstatt die concat()-Methode von JavaScript zu verwenden. Außerdem ändern wir beim Zusammenführen zweier Arrays die Reihenfolge der Array-Elemente.

<html>
<body>
   <h2>Using the spread syntax to <i> copy one array to another</i></h2>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
      let array = [10, 40, 7, 345];
      output.innerHTML += "Array 1: " + array + "</br>";
      let array2 = ["Hi, Hello"];
      output.innerHTML += "Array 2: " + array2 + "</br>";
      array = [...array2, ...array];
      output.innerHTML += "After merging the array2 and array1: " + array + "<br/>";
   </script>
</body>
</html>

Nach dem Login kopieren

Beispiel

Verwenden Sie erweiterte Syntax, um mehrere Elemente als Funktionsargumente zu übergeben

In diesem Beispiel haben wir die Funktion add() erstellt, die drei Werte als Parameter akzeptiert und die Summe aller drei Parameter zurückgibt. Wir erstellen ein Array mit drei Werten. Wir haben eine erweiterte Syntax verwendet, um alle Array-Elemente als Parameter an die Funktion add() zu übergeben.

<html>
   <body>
      <h2>Using the spread syntax</h2>
      <p> Passing multiple array elements as a function argument </p>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
      
         // function to get a sum of 3 values
         function add(param1, param2, param3) {
            return param1 + param2 + param3;
         }
         let values = [50, 54, 72];
      
         // passed array values using the spread syntax
         let result = add(...values);
         output.innerHTML += "The sum of 3 array values: " + result + "</br>";
      </script>
   </body>
</html>

Nach dem Login kopieren

Beispiel

Objekte mit erweiterter Synatx kopieren

Im folgenden Beispiel haben wir ein Objekt „sample_obj“ erstellt, das verschiedene Schlüssel-Wert-Paare enthält. Mit erweiterter Syntax haben wir alle Schlüssel-Wert-Paare von „sample_obj“ nach „copy_object“ kopiert.

Da Objekte iterierbar sind, können wir Objekte mithilfe der Extend-Syntax erweitern.

<html>
   <body>
      <h2>Using the spread syntax to <i>create a copy of the object.</i></h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         let sample_obj = {
            name: "Shubham",
            age: 22,
            hobby: "writing",
         };
         let copy_object = {
            ...sample_obj,
         };
         output.innerHTML += "The values of the copy_object are " + copy_object.name + " , " +copy_object.age + " , " + copy_object.hobby +  "</br>";
      </script>
   </body>
</html>

Nach dem Login kopieren

Verbleibende Syntax

In JavaScript ist die Syntax für die Restsyntax dieselbe wie die erweiterte Syntax. Im Gegensatz zur Erweiterung mithilfe der Spread-Syntax können wir die Rest-Syntax verwenden, um Elemente in einem einzelnen oder iterierbaren Array zu sammeln.

Normalerweise verwenden Entwickler die Erweiterungssyntax für Funktionsparameter, wenn die Gesamtzahl der Funktionsparameter undefiniert ist oder optionale Parameter übergeben werden.

Grammatik

Benutzer können den Rest der Syntax gemäß der folgenden Syntax verwenden.

function func(...params){
   
   //params are the array of all arguments passed while calling the function
   
   //users can access the params like params[0], params[1], params[2], ...
}

Nach dem Login kopieren

In der obigen Syntax haben wir alle Funktionsparameter im params-Array gesammelt.

Beispiel

In diesem Beispiel haben wir ein Array aus Strings erstellt und alle Array-Elemente mithilfe erweiterter Syntax als Argumente an die Funktion mergeString() übergeben.

Mit der restlichen Syntax sammeln wir alle Parameter der Funktion mergeString() im Array params. Wir durchlaufen das params-Array und verketten jedes Element des params-Arrays in der FinalString-Variable.

<html>
   <body>
      <h2>Using the rest syntax to collect function parameters</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         
         // used the rest syntax to collect params
         function mergeString(...params) {
            let finalString = "";
            
            // Iterating through the array of params
            for (let param of params) {
               finalString += param;
               output.innerHTML += "Parameter: " + param + "<br>";
            }
            output.innerHTML += "The string after merging: " + finalString;
         }
         let strings = ["Welcome", "to", "the", "TutorialsPoint!"];
         
         // used the spread syntax to pass all elements of // the strings array as an argument.
         mergeString(...strings);
      </script>
   </body>
</html>

Nach dem Login kopieren

Anhand des obigen Beispiels können Benutzer den Unterschied zwischen Rest-Syntax und Spread-Syntax klar verstehen.

Unterschiede zwischen Spread- und Rest-Syntax in ES6:

Die erweiterte Syntax unterscheidet sich vom Rest der Syntax, die zum Sammeln mehrerer Elemente oder Attribute in einem Array verwendet wird. Die Erweiterungssyntax ermöglicht die Erweiterung von Elementen, während der Rest der Syntax Sammlungen von Elementen ermöglicht.

Beispiele für die Verwendung der erweiterten Syntax sind das Kopieren eines Arrays in ein anderes, das Zusammenführen zweier Arrays, die Übergabe mehrerer Array-Elemente als Funktionsargumente und das Kopieren von Eigenschaften eines Objekts in ein anderes.

Beispiele für die Verwendung der Rest-Syntax umfassen das Sammeln von Elementen, Funktionsparametern usw.

Die folgende Tabelle zeigt die Unterschiede zwischen Spread-Syntax und Rest-Syntax in ES6 -

Erweiterte Syntax	Verbleibende Syntax
Wir können iterierbare Objekte mithilfe der Erweiterungssyntax erweitern.	Wir können die Restsyntax verwenden, um Elemente zu sammeln und alle gesammelten Elemente iterierbar zu machen.
Wir können damit Daten im Array- oder Objektformat erweitern.	Wir können alle Elemente im gewünschten Format sammeln.
Wir können es verwenden, um Parameter innerhalb der Funktion zu übergeben.	Wir können damit Funktionsparameter sammeln oder optionale Parameter definieren.

Fazit

Die Erweiterungssyntax in JavaScript ist eine Syntax, die es ermöglicht, ein iterierbares Objekt (z. B. ein Array oder Objekt) in eine einzelne Variable oder ein einzelnes Element zu erweitern.

Die Expand-Syntax unterscheidet sich vom Rest. Die erweiterte Syntax ist nützlich für Aufgaben wie das Kopieren von Arrays, das Zusammenführen von Arrays oder Objekten und das Übergeben mehrerer Elemente als Funktionsargumente.

Die verbleibende Syntax ist nützlich für die Ausführung von Aufgaben wie das Sammeln mehrerer Elemente oder Attribute in einem Array.

Das obige ist der detaillierte Inhalt vonErklären Sie die Vorteile der erweiterten Syntax und wie sie sich vom Rest der Syntax in ES6 unterscheidet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!