数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究解释ES6中扩展运算符的优势及其与剩余运算符的区别？
在JavaScript的ES6版本中，扩展运算符被引入作为一个非常强大的特性。我们可以使用扩展运算符将数组或对象扩展到相同数据类型的变量中。
例如，在ES6引入扩展运算符之前，开发人员使用for循环将一个数组的所有元素复制到另一个数组。你能否使用扩展运算符编写一行线性代码将一个数组的所有元素复制到另一个数组，而不是使用for循环编写5到7行代码？是的，你没听错！
在本教程中，我们将学习扩展运算符的不同用例。此外，我们还将在教程最后学习它与剩余运算符的不同之处。
扩展运算符
JavaScript中的扩展运算符是一种语法，它允许将可迭代对象（例如数组或对象）扩展成单个变量或元素。
用户可以按照以下语法使用扩展运算符来扩展可迭代对象。
let array = [10, 40, 7, 345]; let array2 = [...array];
在上述语法中，我们将‘array’可迭代对象的所有元素复制到array2变量。
扩展运算符的优势
使用扩展运算符有一些好处或特性：
复制数组或对象；
合并数组或对象；以及
将多个元素作为函数参数传递。
让我们看看扩展运算符的每个特性的不同示例。
示例
使用扩展运算符复制数组
在这个例子中，我们使用了扩展运算符将数组的元素复制到另一个数组。您可以看到一行代码将所有数组元素复制到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>
示例
使用扩展运算符复制对象
在下面的例子中，我们创建了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()函数的参数传递。
使用剩余运算符，我们将mergeString()函数的所有参数收集到params数组中。我们遍历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>
通过以上示例，用户可以清楚地理解剩余运算符和扩展运算符之间的区别。
ES6中扩展运算符和剩余运算符的区别
扩展运算符与剩余运算符不同，剩余运算符用于将多个元素或属性收集到数组中。扩展运算符允许扩展元素，而剩余运算符允许收集元素。
使用扩展运算符的示例包括将一个数组复制到另一个数组、合并两个数组、将多个数组元素作为函数参数传递以及将一个对象的属性复制到另一个对象。
使用剩余运算符的示例包括收集元素、函数参数等。
下表重点介绍了ES6中扩展运算符与剩余运算符的不同之处：
扩展运算符 |
剩余运算符 |
|---|---|
我们可以使用扩展运算符来扩展可迭代对象。 |
我们可以使用剩余运算符来收集元素并使所有收集的元素成为可迭代对象。 |
我们可以使用它来扩展数组或对象格式的数据。 |
我们可以以所需的格式收集所有元素。 |
我们可以使用它来传递函数内部的参数。 |
我们可以使用它来收集函数参数或定义可选参数。 |
结论
JavaScript中的扩展运算符是一种语法，它允许将可迭代对象（例如数组或对象）扩展成单个变量或元素。
扩展运算符与剩余运算符不同。扩展运算符是用于执行诸如复制数组、合并数组或对象以及将多个元素作为函数参数传递等任务的有用功能。
剩余运算符对于执行诸如将多个元素或属性收集到数组中之类的任务很有用。
浏览量：179
