解包數組元素意味著將數組元素值分配給新變量。我們可以將每個元素分配給單獨的變量，或者我們可以將一些元素分配給單獨的變量，對于其余元素，我們可以創建一個新數組。在本教程中，我們將學習使用 JavaScript 將數組元素解包到單獨的變量中。
語法
用戶可以按照以下語法將數組元素解包到單獨的變量中。
let array = [element1, element2, element3, element4]; let [a, b, c, d] = array;
登錄后復制
在上述語法中，a 變量包含 element1 的值，b 包含 element2 的值，c 包含 element3 的值，d 變量包含 element4 的值。
現在，我們將了解使用 JavaScript 將數組元素解包到單獨變量中的各種示例。
示例 1
在下面的示例中，我們定義了 array1 并使用一些數值對其進行了初始化。此外，我們還定義了 a、b 和 c 變量來將數組元素解壓到其中。之后，我們使用上面的語法將數組元素解構為單獨的變量。
在輸出中，用戶可以觀察 a、b 和 c 變量的初始值以及將數組元素解壓到其中后的最終值。
<html>
<body>
<h2>Unpacking the array elements <i> to separate variables </i> using JavaScript. </h2>
<div id = "output"> </div>
<script>
var output = document.getElementById('output');
let array1 = [10, 20, 30];
let a = 40;
let b = 100;
let c = 50;
output.innerHTML += "The elements of the array1 are " + array1 + " <br/>";
output.innerHTML += "The initial values of the a, b, and c variables are a : " + a + " b : " + b + " c : " + c + " <br>";
[a, b, c] = array1;
output.innerHTML += "The values of the a, b, and c variables after unpacking the array elements are a : " + a + " b : " + b + " c : " + c + " <br>";
</script>
</body>
</html>
登錄后復制
示例 2
在此示例中，我們在聲明新變量時直接將數組元素解包到單獨的變量中。用戶可以觀察我們如何聲明多個變量并通過直接將數組分配給變量而不是分配數組變量來解壓數組。
<html>
<body>
<h2>Unpacking the array elements <i> to separate variables </i> using JavaScript. </h2>
<div id = "output"> </div>
<script>
var output = document.getElementById('output');
let [var1, var2, var3] = ["Hi", "Hello", "Welcome"];
output.innerHTML += "The values of the var1, var2, and var3 variables after unpacking the array elements are var1 : " + var1 + ", var2 : " + var2 + ", var3 : " + var3 + " <br>";
</script>
</body>
</html>
登錄后復制
示例 3
在下面的示例中，當用戶單擊按鈕時，它將調用 unpackElements() 函數。在 unpackElements() 函數中，我們破壞了數組。此外，我們在將數組元素解包到單獨的變量中時跳過了數組中的一些元素。
用戶可以看到我們可以通過逗號分隔添加空格來跳過任何數組索引中的元素。
<html>
<body>
<h2>Skipping some array elements while unpacking them <i> into separate variables </i> using JavaScript. </h2>
<div id = "output"> </div>
<button onclick="unpackElements()">Unpack array elements</button>
<script>
var output = document.getElementById('output');
function unpackElements() {
let a, b, c, d;
output.innerHTML += "The initial values of a, b, c, d variables are a : " + a + ", b : " + b + ", c : " + c + ", d : " + d + "<br/>";
// Skipping the elements
[a, , b, , c, , d] = [10, 20, 30, 40, 50, 60, 70, 80, 90];
output.innerHTML += "The values of the a, b, c, and d variables after unpacking the array elements are a : " + a + ", b : " + b + ", c : " + c + ", d : " + d + "<br/>";
}
</script>
</body>
</html>
登錄后復制
示例 4
在下面的示例中，我們將學習在解包數組元素時為變量分配默認值。我們指定 500 作為所有變量的默認值。如果數組包含的元素少于變量總數，則變量將使用默認值進行初始化。
在下面示例的輸出中，我們可以看到 d 的值為 500，這是默認值。
<html>
<body>
<h3>Assigning the default values to the variables while unpacking array elements <i> to separate variables </i> using JavaScript </h3>
<div id = "output"> </div>
<button onclick="unpackElements()">Unpack array elements</button>
<script>
var output = document.getElementById('output');
function unpackElements() {
let a, b, c, d;
output.innerHTML += "The initial values of a, b, c, d variables are a : " + a + ", b : " + b + ", c : " + c + ", d : " + d + "<br/>";
// Skipping the elements
[a = 500, , b = 500, , c = 500, , d = 500] = [10, 20, 30, 40, 50];
output.innerHTML += "The values of the a, b, c, and d variables after unpacking the array elements are a : " + a + ", b : " + b + ", c : " + c + ", d : " + d + "<br/>";
}
</script>
</body>
</html>
登錄后復制
我們已經學習了數組解構，這是在 JavaScript 的 ES6 版本中引入的。我們已經看到了四個代表數組元素解包用例的示例。
用戶學會了在解壓數組元素時跳過元素并為變量分配默認值。
以上就是如何使用 JavaScript 將數組元素解壓到單獨的變量中？的詳細內容，更多請關注www.92cms.cn其它相關文章！
