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

WBOY 转载: 2023-09-19 21:21:03 397浏览

在 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 中展开语法与剩余语法的不同之处 -

扩展语法	剩余语法
我们可以使用展开语法来扩展可迭代对象。	我们可以使用剩余语法来收集元素并使所有收集的元素可迭代。
我们可以使用它以数组或对象格式扩展数据。	我们可以收集所需格式的所有元素。
我们可以使用它在函数内部传递参数。	我们可以用它来收集函数参数或定义可选参数。