Thursday, January 8, 2015

Tutorial Javascript Part 17: Menangani Array

Javascript menyediakan beberapa metod untuk menangani array. Dengan method-method tersebut kita bisa mengurutkan array, mengubah array menjadi string, menambah, menggeser dan mengganti data yang ada pada array. Kita juga bisa menghapus data pada array, menggabungkan dua buah array atau malah memotong array menjadi beberapa bagian.

Mengurutkan Array

Untuk mengurutkan array kita menggunakan method sort. Dengan method sort ini maka isi data dalam array akan diurutkan berdasarkan alphabet (a...z).

Contoh mengurutkan array pada javascript :

 <!DOCTYPE html>    
 <html>    
 <head> </head>  
 <body>    
 <h1>Method Sort Array Javascript</h1>    
 Silahkan klik pada tombol    
 <button onclick="Pesan()">Sort</button>  
 <p id="view"></p>    
 <script type="text/javascript">    
 var buah = ["Pisang", "Jeruk", "Apel", "Semangka"];  
 document.getElementById("view").innerHTML = buah;  
   
 function Pesan()    
 {   
   buah.sort();  
   document.getElementById("view").innerHTML = buah;  
 }  
 </script>    
 </body>    
 </html>   
Note : Selain mengurutkan data didalam array, kita juga bisa membalik urutan data sebuah array dengan method reverse. Untuk mencobanya silahkan ganti perintah buah.sort() pada contoh diatas dengan buah.reverse().

Mengubah Array Menjadi String

Untuk mengubah array menjadi kita menggunakan method valueOf atau toString(). prinsipnya kita mengambil semua data di dalam array lalu mengubahnya menjadi satu kesatuan string.

Contoh mengubah array menjadi string pada javascript :

 <!DOCTYPE html>    
 <html>    
 <head> </head>  
 <body>    
 <h1>Mengubah Array menjadi String pada Javascript</h1>    
 Silahkan klik pada tombol    
 <button onclick="Pesan()">Enter</button>  
 <p id="view"></p>    
 <script type="text/javascript">    
 var buah = ["Pisang", "Jeruk", "Apel", "Semangka"];  
   
 function Pesan()    
 {   
   document.getElementById("view").innerHTML = buah.valueOf();  
 }  
 </script>    
 </body>    
 </html>   
Note: Untuk mencoba method toString, silahkan ganti buah.valueOf() dengan buah.toString. Hasilnya akan sama antara method valueOf() dan toString().

Pop dan Push Array

Adalah cara untuk membuang data pada akhir array (disebut POP) lalu menggantinya dengan data baru (disebut PUSH).

Contoh penggunaan POP dan PUSH pada array javascript :

 <!DOCTYPE html>    
 <html>    
 <head> </head>  
 <body>    
 <h1>Push dan Pop Array Javascript</h1>    
 Silahkan klik pada tombol    
 <button onclick="Pesan()">Enter</button>  
 <p id="view"></p>    
 <script type="text/javascript">    
 var buah = ["Pisang", "Jeruk", "Apel", "Semangka"];  
 document.getElementById("view").innerHTML = buah;  
 function Pesan()    
 {   
   buah.pop();  
   buah.push("Salak");  
   document.getElementById("view").innerHTML = buah;  
 }  
 </script>    
 </body>    
 </html>   
Pada contoh diatas kita mengganti buah Semangka dengan buah Salak.

Shift dan Unshift Array

Adalah cara untuk membuang data pada awal array (disebut SHIFT) lalu menggantinya dengan data baru (disebut UNSHIFT).

Contoh penggunaan SHIFT dan UNSHIFT pada array javascript :

 <!DOCTYPE html>    
 <html>    
 <head> </head>  
 <body>    
 <h1>Shift dan Unshift Array Javascript</h1>    
 Silahkan klik pada tombol    
 <button onclick="Pesan()">Enter</button>  
 <p id="view"></p>    
 <script type="text/javascript">    
 var buah = ["Pisang", "Jeruk", "Apel", "Semangka"];  
 document.getElementById("view").innerHTML = buah;  
 function Pesan()    
 {   
   buah.shift();  
   buah.unshift("Salak");  
   document.getElementById("view").innerHTML = buah;  
 }  
 </script>    
 </body>    
 </html>   
Pada contoh diatas kita mengganti buah Pisang dengan buah Salak.

Mengganti Data pada Array

Untuk mengganti data didalam array kita gunakan nama array dan indeks angka untuk menuju data tersebut lalu menggantinya dengan data baru.

Contoh mengganti data Array pada javascript :

 <!DOCTYPE html>    
 <html>    
 <head> </head>  
 <body>    
 <h1>Mengganti Data pada Array Javascript</h1>    
 Silahkan klik pada tombol    
 <button onclick="Pesan()">Enter</button>  
 <p id="view"></p>    
 <script type="text/javascript">    
 var buah = ["Pisang", "Jeruk", "Apel", "Semangka"];  
 document.getElementById("view").innerHTML = buah;  
 function Pesan()    
 {   
   buah[2]="Salak";  
   document.getElementById("view").innerHTML = buah;  
 }  
 </script>    
 </body>    
 </html>   
Pada contoh diatas kita mengganti buah Apel (indeks 2) dengan buah Salak.

Menghapus data pada Array

Untuk menghapus data pada array kita gunakan perintah delete diikuti nama array beserta indeks data yang akan dihapus.

Contoh menghapus data Array pada javascript :

 <!DOCTYPE html>    
 <html>    
 <head> </head>  
 <body>    
 <h1>Menghapus Data pada Array Javascript</h1>    
 Silahkan klik pada tombol    
 <button onclick="Pesan()">Enter</button>  
 <p id="view"></p>    
 <script type="text/javascript">    
 var buah = ["Pisang", "Jeruk", "Apel", "Semangka"];  
 document.getElementById("view").innerHTML = buah;  
 function Pesan()    
 {   
   delete buah[1];  
   document.getElementById("view").innerHTML = buah;  
 }  
 </script>    
 </body>    
 </html>   
Pada contoh diatas kita menghapus buah Jeruk (indeks 1).

Menyisipkan data ke dalam Array

Untuk menyisipkan data didalam array kita gunakan  method Splice.

Contoh menyisipkan data ke dalam array pada javascript :

 <!DOCTYPE html>    
 <html>    
 <head> </head>  
 <body>    
 <h1>Menyisipkan data dalam Array pada Javascript</h1>    
 Silahkan klik pada tombol    
 <button onclick="Pesan()">Enter</button>  
 <p id="view"></p>    
 <script type="text/javascript">    
 var buah = ["Pisang", "Jeruk", "Apel", "Semangka"];  
 document.getElementById("view").innerHTML = buah;  
 function Pesan()    
 {   
   buah.splice(2, 0, "Salak", "Nangka");  
   document.getElementById("view").innerHTML = buah;  
 }  
 </script>    
 </body>    
 </html>   
Note: parameter pertama (2) merupakan posisi dimana data baru ditempatkan dan parameter kedua (0) merupakan jumlah data yang akan dihapus. Dengan mengeset parameter pertama dengan nol dan engeset parameter kedua dengan satu maka kita bisa menghapus data dalam array tanpa meninggalkan lubang.

Menggabungkan Array

Untuk menggabungkan dua buah array kita gunakan method concat. Hasil penggabungan disimpan dalam array baru. Penggabungan array tidak terbatas hanya dua saja namun bisa banyak.

Contoh menggabungkan array pada javscript :

 <!DOCTYPE html>    
 <html>    
 <head> </head>  
 <body>    
 <h1>Menggabungkan dua Array pada Javascript</h1>    
 Silahkan klik pada tombol    
 <button onclick="Pesan()">Enter</button>  
 <p id="view"></p>    
 <script type="text/javascript">    
 var buah = ["Pisang", "Jeruk", "Apel", "Semangka"];  
 var sayur = ["Kangkung","Bayam","Terong"];  
 document.getElementById("view").innerHTML = buah;  
 function Pesan()    
 {   
   var belanja=buah.concat(sayur);  
   document.getElementById("view").innerHTML = belanja;  
 }  
 </script>    
 </body>    
 </html>   
Pada contoh diatas kita menggabungkan array buah dengan array sayur lalu menyimpannya dalam array belanja.

Memotong Array

Untuk memotong array kita gunakan method slice(). Ada dua parameter padamethod slice, yang pertama merupakan posisi awal data yang akan diambil lalu parameter kedua merupakan posisi setelah data terakhir yang akan diambl.

Contoh memotong Array pada javascript :

 <!DOCTYPE html>    
 <html>    
 <head> </head>  
 <body>    
 <h1>Memotong Array pada Javascript</h1>    
 Silahkan klik pada tombol    
 <button onclick="Pesan()">Enter</button>  
 <p id="view"></p>    
 <script type="text/javascript">    
 var buah = ["Pisang", "Jeruk", "Apel", "Semangka"];  
 document.getElementById("view").innerHTML = buah;  
 function Pesan()    
 {   
   var buah1=buah.slice(1,3);  
   document.getElementById("view").innerHTML = buah1;  
 }  
 </script>    
 </body>    
 </html>    
Pada contoh diatas kita mengambil buah Jeruk dan Apel dari Array.

Lihat indeks artikel Tutorial Javascript Dasar >>

Referensi :

0 komentar

Post a Comment