Diperbarui tanggal 4/07/2016

Menampilkan Isi Elemen Array pada Javascript

kategori Javascript / tanggal diterbitkan 3 Juli 2016 / dikunjungi: 26.48rb kali

Untuk dapat menampilkan data dalam suatu array, kita dapat menyebut nama array dengan indeks array. Namun jika kita ingin menampilkan semua isi dalam array tentunya cara tersebut tidaklah efektif. Maka cara yang paling tepat adalah dengan menggunakan perulangan atau looping. Berikut contoh script untuk menampilkan isi array dengan menyebutkan indeks array:

var namahari=new Array('Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu');

document.write(namahari[1]);

Contoh diatas akan menampilkan isi array dengan indeks 1 yaitu Senin.

Untuk dapat menampilkan seluruh isi array, kita dapat menggunakan beberapa cara, diantaranya yaitu:

Menggunakan document.write

 

Dengan menggunakan document.write maka seluruh isi array akan ditampilkan dengan tanda koma sebagai pemisahnya. Contoh

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Nama Hari</title>

</head>

<body>
<script>
var namahari=new Array('Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu');

document.write(namahari);
</script>
</body>
</html>

Script diatas akan menghasilkan tampilan sebagai berikut:

Menggunakan pengulangan for atau while

Penggunaan for atau while untuk menampilkan suatu array memungkinkan kita dapat mengendalikan bagaimana isi dari array tersebut akan ditampilkan. Penggunaan for atau while menuntut kita harus mengetahui berapa banyak jumlah element dalam suatu array. Contoh penggunaan:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Nama Hari</title>

</head>

<body>
<script>
var namahari=new Array('Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu');
var jml_hari=6;
for(i=0; i<=jml_hari; i++){
document.write("Hari ke "+i+" adalah: "+namahari[i]+"<br>");
}

</script>
</body>
</html>

Script diatas akan menghasilkan tampilan sebagai berikut:

Menggunakan For ... in

Penggunaan for ... in merupakan pernyataan khusus yang memudahkan proses pengulangan pada suatu elemen array. Kita tidak perlu mengetahui berapa banyak jumlah elemen dari array yang akan diproses tersebut, dan kita tidak perlu mengetahui indeks dari elemen array tersebut. Berikut contoh penggunaan for ... in

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Nama Hari</title>

</head>

<body>
<script>
var namahari=new Array('Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu');

for(key in namahari){
document.write("Hari ke "+key+" adalah: "+namahari[key]+"<br>");
}

</script>
</body>
</html>

Script diatas akan menghasilkan tampilan yang sama dengan proses pengulangan dengan menggunakan for diatas. Namun pada script dengan menggunakan for ... in kita tidak ditutut untuk mengetahui jumlah elemen array dan jenis indeks array.