解釋一下擴展語法的好處以及它與 ES6 中的剩余語法有何不同？-魔扣目錄

在 JavaScript 的 ES6 版本中，擴展語法作為一項非常強大的功能被引入。我們可以使用擴展語法將數組或對象擴展為相同數據類型的變量。

例如，在 ES6 中引入展開語法之前，開發人員使用 for 循環將一個數組的所有元素復制到另一個數組。您是否可以通過使用擴展語法編寫一個線性代碼而不是使用 for 循環編寫 5 到 7 行代碼來將一個數組的所有元素復制到另一個數組？是的，你沒聽錯！

在這里，我們將在本教程中學習擴展語法的不同用例。此外，我們將在教程末尾了解它與其余語法的不同之處。

傳播語法

JavaScript 中的擴展語法是一種允許將可迭代對象（例如數組或對象）擴展為單個變量或元素的語法。

用戶可以按照下面的語法使用擴展語法來擴展可迭代對象。

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

登錄后復制

在上面的語法中，我們將可迭代的“array”的所有元素復制到 array2 變量。

擴展語法的好處

使用擴展語法有一些好處或功能 –

復制數組或對象，

合并數組或對象，以及

將多個元素作為函數參數傳遞。

讓我們看一下擴展語法上述每個功能的不同示例。

示例

使用展開語法復制數組

在此示例中，我們使用了擴展 synatx 將一個數組的元素復制到另一個數組。您可以看到單線性代碼將所有數組元素復制到 array2 中。

<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>

登錄后復制

示例

使用展開語法合并數組或對象

我們使用 array1 內部的擴展語法合并 array1 和 array2，而不使用 JavaScript 的 concat() 方法。此外，在合并兩個數組時，我們更改了數組元素的順序。

<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>

登錄后復制

示例

使用擴展語法將多個元素作為函數參數傳遞

在此示例中，我們創建了 add() 函數，該函數采用三個值作為參數并返回所有三個參數的總和。我們創建了包含三個值的數組。我們已使用擴展語法將所有數組元素作為參數傳遞給 add() 函數。

<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>

登錄后復制

示例

使用擴展 synatx 復制對象

在下面的示例中，我們創建了sample_obj對象，其中包含不同的鍵值對。使用擴展語法，我們已將sample_obj的所有鍵值對復制到copy_object。

由于對象是可迭代的，我們可以使用擴展語法來擴展對象。

<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>

登錄后復制

剩余語法

在 JavaScript 中，剩余語法的語法與擴展語法相同。我們可以使用剩余語法來收集單個數組或可迭代中的元素，這與使用展開語法擴展不同。

通常，當函數參數總數未定義或傳遞可選參數時，開發人員會對函數參數使用展開語法。

語法

用戶可以按照以下語法來使用其余語法。

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], ...
}

登錄后復制

在上面的語法中，我們收集了 params 數組中的所有函數參數。

示例

在此示例中，我們創建了字符串數組，并使用擴展語法將所有數組元素作為 mergeString() 函數的參數傳遞。

使用其余語法，我們在 params 數組中收集了 mergeString() 函數的所有參數。我們迭代 params 數組并將 params 數組的每個元素連接到 FinalString 變量中。

<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>

登錄后復制

通過上面的例子，用戶可以清楚地理解rest語法和spread語法之間的區別。

ES6 中 Spread 和 Rest 語法之間的差異：

擴展語法與其余語法不同，其余語法用于將多個元素或屬性收集到一個數組中。擴展語法允許元素的擴展，而其余語法則允許元素的集合。

使用擴展語法的示例包括將一個數組復制到另一個數組、合并兩個數組、將多個數組元素作為函數參數傳遞以及將一個對象的屬性復制到另一個對象。

使用剩余語法的示例包括收集元素、函數參數等。

下表重點介紹了 ES6 中展開語法與剩余語法的不同之處 –

擴展語法	剩余語法
我們可以使用展開語法來擴展可迭代對象。	我們可以使用剩余語法來收集元素并使所有收集的元素可迭代。
我們可以使用它以數組或對象格式擴展數據。	我們可以收集所需格式的所有元素。
我們可以使用它在函數內部傳遞參數。	我們可以用它來收集函數參數或定義可選參數。