資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 將陣列元素解包到單獨的變數中？
陣列元素解包意味著將陣列元素值分配給新的變數。我們可以將每個元素分配給單獨的變數，或者可以將某些元素分配給單獨的變數，對於其餘元素，我們可以建立一個新的陣列。在本教程中，我們將學習如何使用 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 版本中引入的。我們已經看到了四個代表陣列元素解包用例的示例。
使用者學習瞭如何在解包陣列元素時跳過元素併為變數分配預設值。
817 次檢視
