資料結構
網路
關係資料庫管理系統(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
