Home > Article > Web Front-end > How to unpack array elements into separate variables using JavaScript?
How to unpack array elements into separate variables using JavaScript?
- 王林forward
- 2023-09-14 18:05:021207browse
Unpacking an array element means assigning the array element value to a new variable. We can assign each element to a separate variable or we can assign some elements to a separate variable and for the remaining elements we can create a new array. In this tutorial, we will learn to unpack array elements into separate variables using JavaScript.
grammar
Users can unpack array elements into separate variables according to the following syntax.
let array = [element1, element2, element3, element4]; let [a, b, c, d] = array;
In the above syntax, the a variable contains the value of element1, b contains the value of element2, c contains the value of element3, and the d variable contains the value of element4.
Now, we will look at various examples of unpacking array elements into separate variables using JavaScript.
Example 1
In the example below, we define array1 and initialize it with some numeric values. Additionally, we have defined a, b, and c variables into which to unpack array elements. After that, we use the above syntax to destructure the array elements into individual variables.
In the output, the user can observe the initial values of the a, b and c variables and the final values after unpacking the array elements into them.
<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>
Example 2
In this example, we unpack the array elements directly into separate variables when declaring the new variable. Users can observe how we declare multiple variables and unpack the array by directly assigning the array to the variables instead of assigning the array variable.
<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>
Example 3
In the example below, when the user clicks the button, it calls the unpackElements() function. In the unpackElements() function we destroy the array. Additionally, we are skipping some elements in the array when unpacking the array elements into separate variables.
Users can see that we can skip elements in any array index by adding spaces by comma separation.
<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>
Example 4
In the following example, we will learn to assign default values to variables when unpacking array elements. We specify 500 as the default value for all variables. If the array contains fewer elements than the total number of variables, the variables are initialized with default values.
In the output of the example below, we can see that the value of d is 500, which is the default value.
<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>
We have learned about array destructuring, which was introduced in the ES6 version of JavaScript. We have seen four examples that represent use cases for unpacking array elements.
Users learned to skip elements and assign default values to variables when unpacking array elements.
The above is the detailed content of How to unpack array elements into separate variables using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!