极客教程解释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语法来收集元素，并将所有收集的元素做成可迭代的。 |
| 我们可以用它来扩展数组或对象格式的数据。 | 我们可以按要求的格式收集所有的元素。 |
| 我们可以用它来传递函数内部的参数。 | 我们可以用它来收集函数参数或定义可选参数。 |
结论
JavaScript中的spread语法是一种允许可迭代对象，如数组或对象，被扩展为单个变量或元素的语法。
spread语法与其他语法不同。spread语法在执行复制数组、合并数组或对象以及传递多个元素作为函数参数等任务时是一个有用的功能。
其余的语法对于执行诸如将多个元素或属性收集到一个数组中的任务非常有用。