在 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 中展开语法与剩余语法的不同之处 –
|
扩展语法 |
剩余语法 |
|---|---|
|
我们可以使用展开语法来扩展可迭代对象。 |
我们可以使用剩余语法来收集元素并使所有收集的元素可迭代。 |
|
我们可以使用它以数组或对象格式扩展数据。 |
我们可以收集所需格式的所有元素。 |
|
我们可以使用它在函数内部传递参数。 |
我们可以用它来收集函数参数或定义可选参数。 |
结论
JavaScript 中的扩展语法是一种允许将可迭代对象（例如数组或对象）扩展为单个变量或元素的语法。
展开语法与其余语法不同。扩展语法对于执行复制数组、合并数组或对象以及将多个元素作为函数参数传递等任务非常有用。
其余语法对于执行诸如将多个元素或属性收集到数组中之类的任务很有用。
以上就是解释一下扩展语法的好处以及它与 ES6 中的剩余语法有何不同？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 解释一下扩展语法的好处以及它与 ES6 中的剩余语法有何不同？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
