如何使用 JavaScript 將陣列元素解壓縮到單獨的變數中？
- 王林轉載
- 2023-09-14 18:05:021207瀏覽
解包陣列元素意味著將陣列元素值指派給新變數。我們可以將每個元素分配給單獨的變量，或者我們可以將一些元素分配給單獨的變量，對於其餘元素，我們可以建立一個新數組。在本教程中，我們將學習使用 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 將陣列元素解壓縮到單獨的變數中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！