在 JavaScript 的 ES6 版本中，擴(kuò)展語(yǔ)法作為一項(xiàng)非常強(qiáng)大的功能被引入。我們可以使用擴(kuò)展語(yǔ)法將數(shù)組或?qū)ο髷U(kuò)展為相同數(shù)據(jù)類型的變量。
例如，在 ES6 中引入展開語(yǔ)法之前，開發(fā)人員使用 for 循環(huán)將一個(gè)數(shù)組的所有元素復(fù)制到另一個(gè)數(shù)組。您是否可以通過使用擴(kuò)展語(yǔ)法編寫一個(gè)線性代碼而不是使用 for 循環(huán)編寫 5 到 7 行代碼來將一個(gè)數(shù)組的所有元素復(fù)制到另一個(gè)數(shù)組？是的，你沒聽錯(cuò)！
在這里，我們將在本教程中學(xué)習(xí)擴(kuò)展語(yǔ)法的不同用例。此外，我們將在教程末尾了解它與其余語(yǔ)法的不同之處。
傳播語(yǔ)法
JavaScript 中的擴(kuò)展語(yǔ)法是一種允許將可迭代對(duì)象（例如數(shù)組或?qū)ο螅U(kuò)展為單個(gè)變量或元素的語(yǔ)法。
用戶可以按照下面的語(yǔ)法使用擴(kuò)展語(yǔ)法來擴(kuò)展可迭代對(duì)象。
let array = [10, 40, 7, 345]; let array2 = [...array];
登錄后復(fù)制
在上面的語(yǔ)法中，我們將可迭代的“array”的所有元素復(fù)制到 array2 變量。
擴(kuò)展語(yǔ)法的好處
使用擴(kuò)展語(yǔ)法有一些好處或功能 –
復(fù)制數(shù)組或?qū)ο螅?/p>
合并數(shù)組或?qū)ο螅约?/p>
將多個(gè)元素作為函數(shù)參數(shù)傳遞。
讓我們看一下擴(kuò)展語(yǔ)法上述每個(gè)功能的不同示例。
示例
使用展開語(yǔ)法復(fù)制數(shù)組
在此示例中，我們使用了擴(kuò)展 synatx 將一個(gè)數(shù)組的元素復(fù)制到另一個(gè)數(shù)組。您可以看到單線性代碼將所有數(shù)組元素復(fù)制到 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>
登錄后復(fù)制
示例
使用展開語(yǔ)法合并數(shù)組或?qū)ο?/i>
我們使用 array1 內(nèi)部的擴(kuò)展語(yǔ)法合并 array1 和 array2，而不使用 JavaScript 的 concat() 方法。此外，在合并兩個(gè)數(shù)組時(shí)，我們更改了數(shù)組元素的順序。
<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>
登錄后復(fù)制
示例
使用擴(kuò)展語(yǔ)法將多個(gè)元素作為函數(shù)參數(shù)傳遞
在此示例中，我們創(chuàng)建了 add() 函數(shù)，該函數(shù)采用三個(gè)值作為參數(shù)并返回所有三個(gè)參數(shù)的總和。我們創(chuàng)建了包含三個(gè)值的數(shù)組。我們已使用擴(kuò)展語(yǔ)法將所有數(shù)組元素作為參數(shù)傳遞給 add() 函數(shù)。
<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>
登錄后復(fù)制
示例
使用擴(kuò)展 synatx 復(fù)制對(duì)象
在下面的示例中，我們創(chuàng)建了sample_obj對(duì)象，其中包含不同的鍵值對(duì)。使用擴(kuò)展語(yǔ)法，我們已將sample_obj的所有鍵值對(duì)復(fù)制到copy_object。
由于對(duì)象是可迭代的，我們可以使用擴(kuò)展語(yǔ)法來擴(kuò)展對(duì)象。
<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>
登錄后復(fù)制
剩余語(yǔ)法
在 JavaScript 中，剩余語(yǔ)法的語(yǔ)法與擴(kuò)展語(yǔ)法相同。我們可以使用剩余語(yǔ)法來收集單個(gè)數(shù)組或可迭代中的元素，這與使用展開語(yǔ)法擴(kuò)展不同。
通常，當(dāng)函數(shù)參數(shù)總數(shù)未定義或傳遞可選參數(shù)時(shí)，開發(fā)人員會(huì)對(duì)函數(shù)參數(shù)使用展開語(yǔ)法。
語(yǔ)法
用戶可以按照以下語(yǔ)法來使用其余語(yǔ)法。
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], ...
}
登錄后復(fù)制
在上面的語(yǔ)法中，我們收集了 params 數(shù)組中的所有函數(shù)參數(shù)。
示例
在此示例中，我們創(chuàng)建了字符串?dāng)?shù)組，并使用擴(kuò)展語(yǔ)法將所有數(shù)組元素作為 mergeString() 函數(shù)的參數(shù)傳遞。
使用其余語(yǔ)法，我們?cè)?params 數(shù)組中收集了 mergeString() 函數(shù)的所有參數(shù)。我們迭代 params 數(shù)組并將 params 數(shù)組的每個(gè)元素連接到 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>
登錄后復(fù)制
通過上面的例子，用戶可以清楚地理解rest語(yǔ)法和spread語(yǔ)法之間的區(qū)別。
ES6 中 Spread 和 Rest 語(yǔ)法之間的差異：
擴(kuò)展語(yǔ)法與其余語(yǔ)法不同，其余語(yǔ)法用于將多個(gè)元素或?qū)傩允占揭粋€(gè)數(shù)組中。擴(kuò)展語(yǔ)法允許元素的擴(kuò)展，而其余語(yǔ)法則允許元素的集合。
使用擴(kuò)展語(yǔ)法的示例包括將一個(gè)數(shù)組復(fù)制到另一個(gè)數(shù)組、合并兩個(gè)數(shù)組、將多個(gè)數(shù)組元素作為函數(shù)參數(shù)傳遞以及將一個(gè)對(duì)象的屬性復(fù)制到另一個(gè)對(duì)象。
使用剩余語(yǔ)法的示例包括收集元素、函數(shù)參數(shù)等。
下表重點(diǎn)介紹了 ES6 中展開語(yǔ)法與剩余語(yǔ)法的不同之處 –
|
擴(kuò)展語(yǔ)法 |
剩余語(yǔ)法 |
|---|---|
|
我們可以使用展開語(yǔ)法來擴(kuò)展可迭代對(duì)象。 |
我們可以使用剩余語(yǔ)法來收集元素并使所有收集的元素可迭代。 |
|
我們可以使用它以數(shù)組或?qū)ο蟾袷綌U(kuò)展數(shù)據(jù)。 |
我們可以收集所需格式的所有元素。 |
|
我們可以使用它在函數(shù)內(nèi)部傳遞參數(shù)。 |
我們可以用它來收集函數(shù)參數(shù)或定義可選參數(shù)。 |
結(jié)論
JavaScript 中的擴(kuò)展語(yǔ)法是一種允許將可迭代對(duì)象（例如數(shù)組或?qū)ο螅U(kuò)展為單個(gè)變量或元素的語(yǔ)法。
展開語(yǔ)法與其余語(yǔ)法不同。擴(kuò)展語(yǔ)法對(duì)于執(zhí)行復(fù)制數(shù)組、合并數(shù)組或?qū)ο笠约皩⒍鄠€(gè)元素作為函數(shù)參數(shù)傳遞等任務(wù)非常有用。
其余語(yǔ)法對(duì)于執(zhí)行諸如將多個(gè)元素或?qū)傩允占綌?shù)組中之類的任務(wù)很有用。
以上就是解釋一下擴(kuò)展語(yǔ)法的好處以及它與 ES6 中的剩余語(yǔ)法有何不同？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
