Rumah > Artikel > hujung hadapan web > Bagaimana untuk membongkar elemen tatasusunan ke dalam pembolehubah berasingan menggunakan JavaScript?
Bagaimana untuk membongkar elemen tatasusunan ke dalam pembolehubah berasingan menggunakan JavaScript?
- 王林ke hadapan
- 2023-09-14 18:05:021207semak imbas
Menyahbungkus elemen tatasusunan bermakna memberikan nilai elemen tatasusunan kepada pembolehubah baharu. Kita boleh menetapkan setiap elemen kepada pembolehubah yang berasingan atau kita boleh menetapkan beberapa elemen kepada pembolehubah yang berasingan dan untuk elemen yang selebihnya kita boleh mencipta tatasusunan baharu. Dalam tutorial ini, kita akan belajar untuk membongkar elemen tatasusunan ke dalam pembolehubah berasingan menggunakan JavaScript.
Tatabahasa
Pengguna boleh membongkar elemen tatasusunan ke dalam pembolehubah berasingan dengan mengikut sintaks di bawah.
let array = [element1, element2, element3, element4]; let [a, b, c, d] = array;
Dalam sintaks di atas, pembolehubah mengandungi nilai elemen1, b mengandungi nilai elemen2, c mengandungi nilai elemen3, dan pembolehubah d mengandungi nilai elemen4.
Sekarang, kita akan melihat pelbagai contoh membongkar elemen tatasusunan ke dalam pembolehubah berasingan menggunakan JavaScript.
Contoh 1
Dalam contoh di bawah, kami mentakrifkan tatasusunan1 dan memulakannya dengan beberapa nilai angka. Selain itu, kami telah menentukan pembolehubah a, b dan c untuk membongkar elemen tatasusunan. Selepas itu, kami menggunakan sintaks di atas untuk memusnahkan elemen tatasusunan kepada pembolehubah individu.
Dalam output, pengguna boleh memerhatikan nilai awal pembolehubah a, b dan c dan nilai akhir selepas membongkar elemen tatasusunan ke dalamnya.
<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>
Contoh 2
Dalam contoh ini, kami terus membongkar elemen tatasusunan ke dalam pembolehubah berasingan apabila mengisytiharkan pembolehubah baharu. Pengguna boleh memerhatikan cara kami mengisytiharkan berbilang pembolehubah dan membongkar tatasusunan dengan memberikan tatasusunan secara terus kepada pembolehubah dan bukannya memberikan pembolehubah tatasusunan.
<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>
Contoh 3
Dalam contoh di bawah, apabila pengguna mengklik butang, ia memanggil fungsi unpackElements(). Dalam fungsi unpackElements() kita memusnahkan tatasusunan. Selain itu, kami melangkau beberapa elemen dalam tatasusunan apabila membongkar elemen tatasusunan ke dalam pembolehubah yang berasingan.
Pengguna dapat melihat bahawa kita boleh melangkau elemen dalam mana-mana indeks tatasusunan dengan menambah ruang yang dipisahkan dengan koma.
<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>
Contoh 4
Dalam contoh berikut, kita akan belajar untuk menetapkan nilai lalai kepada pembolehubah semasa membongkar elemen tatasusunan. Kami menentukan 500 sebagai nilai lalai untuk semua pembolehubah. Jika tatasusunan mengandungi kurang elemen daripada jumlah pembolehubah, pembolehubah dimulakan dengan nilai lalai.
Dalam output contoh di bawah, kita dapat melihat bahawa nilai d ialah 500, iaitu nilai lalai.
<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>
Kami telah mempelajari tentang penstrukturan tatasusunan, yang telah diperkenalkan dalam JavaScript versi ES6. Kami telah melihat empat contoh yang mewakili kes penggunaan untuk membongkar elemen tatasusunan.
Pengguna belajar untuk melangkau elemen dan memberikan nilai lalai kepada pembolehubah apabila membongkar elemen tatasusunan.
Atas ialah kandungan terperinci Bagaimana untuk membongkar elemen tatasusunan ke dalam pembolehubah berasingan menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!