解释spread语法的好处以及它与ES6中的rest语法有什么不同

在ES6版本的JavaScript中，spread语法作为一个非常强大的功能被引入。我们可以使用spread语法将数组或对象扩展到相同数据类型的变量中。

例如，在ES6中引入spread语法之前，开发者使用for循环将一个数组的所有元素复制到另一个数组。你能通过使用spread语法编写一条线性代码，而不是使用for循环编写5到7行代码，将一个数组的所有元素复制到另一个数组中吗？是的，你没听错!

在这里，我们将学习本教程中spread语法的不同用例。此外，我们还将在本教程的最后学习它与其他语法的区别。

spread语法

JavaScript中的spread synatx是一种语法，它允许一个可迭代的对象，如数组或对象，被扩展为单个变量或元素。

用户可以按照下面的语法，使用spread语法来展开iterable对象。

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

在上面的语法中，我们是将’array’可迭代的所有元素复制到array2变量中。

spread语法的好处

使用spread语法有一些好处或特点-

复制数组或对象。
合并数组或对象，以及
将多个元素作为函数参数传递。

让我们来看看上述每个spread语法特点的不同例子。

示例

使用spread语法复制数组。

我们在这个例子中使用了spread synatx来复制一个数组的元素到另一个数组。你可以看到单行代码将所有数组元素复制到数组2中。

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

示例

使用spread语法合并数组或对象。

我们在数组1内使用spread语法合并数组1和数组2，没有使用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>

示例

使用spread语法将多个元素作为函数参数传递

在这个例子中，我们创建了add()函数，它接收三个值作为参数，并返回所有三个参数的总和。我们已经创建了数组，其中包含三个值。我们使用spread语法将所有数组元素作为参数传递给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>

示例

使用spread synatx复制对象

在下面的例子中，我们已经创建了sample_obj对象，它包含了不同的键值对。使用spread语法，我们将sample_obj的所有键值对复制到copy_object。

由于该对象是可迭代的，我们可以使用spread语法来扩展该对象。

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

rest语法

在JavaScript中，rest语法和spread语法是一样的。我们可以使用rest语法来收集单个数组或iterable中的元素，而不像使用spread语法来扩展。

一般来说，当函数参数的总数没有被定义或传递可选参数时，开发者会使用函数参数的扩散语法。

语法

用户可以按照下面的语法来使用其余语法。

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数组中。

示例

在这个例子中，我们已经创建了字符串数组，并使用spread语法将所有数组元素作为mergeString()函数的参数传递。

使用rest语法，我们在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>

用户可以通过上面的例子清楚地了解休息和spread语法的区别。

ES6中Spread和Rest语法的区别

扩展语法与其余语法不同，后者是用来将多个元素或属性收集到一个数组中。spread语法允许元素的扩展，而其余语法允许元素的集合。

使用spread语法的例子包括将一个数组复制到另一个数组，合并两个数组，将多个数组元素作为函数参数传递，以及将一个对象的属性复制到另一个对象。

使用休止符语法的例子包括收集元素、函数参数，等等。

下表强调了spread语法与ES6中rest语法的不同之处 –

spread语法	rest语法
我们可以使用spread语法来扩展iterable。	我们可以使用rest语法来收集元素，并将所有收集的元素做成可迭代的。
我们可以用它来扩展数组或对象格式的数据。	我们可以按要求的格式收集所有的元素。
我们可以用它来传递函数内部的参数。	我们可以用它来收集函数参数或定义可选参数。