解釋一下擴展語法的好處以及它與 ES6 中的剩餘語法有何不同？-js教程-PHP中文網

解释一下扩展语法的好处以及它与 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 中展開語法與剩餘語法的不同之處 -

擴充語法	剩餘語法
我們可以使用展開語法來擴充可迭代物件。	我們可以使用剩餘語法來收集元素並使所有收集的元素可迭代。
我們可以使用它以陣列或物件格式擴展資料。	我們可以收集所需格式的所有元素。
我們可以使用它在函數內部傳遞參數。	我們可以用它來收集函數參數或定義可選參數。