JavaScript Array

Array JavaScript digunakan untuk menyimpan beberapa nilai dalam satu variabel.

Menampilkan Array

Dalam tutorial ini kita akan menggunakan script untuk menampilkan array di dalam <p> elemen dengan id = "demo":

<!DOCTYPE html>

<html>

<head>

<title>Belajar JavaScript</title>

</head>

<body>

var kue = ["Donat","Roti","Martabak"];

document.getElementById("demo").innerHTML = kue;

</script>

</body>

</html>

Baris pertama (di script) menciptakan sebuah array bernama kuel.

Baris kedua "menemukan" elemen dengan id = "demo", dan "menampilkan" array dalam "innerHTML" itu.

Coba Sendiri

Buat sebuah array, dan menetapkan nilai untuk itu:

<!DOCTYPE html>

<html>

<head>

<title>Belajar JavaScript</title>

</head>

<body>

var kue = ["Donat","Roti","Martabak"];

document.getElementById("demo").innerHTML = kue[0];

</script>

</body>

</html>

Spasi dan jeda baris yang tidak penting. Deklarasi A dapat span beberapa baris:

<!DOCTYPE html>

<html>

<head>

<title>Belajar JavaScript</title>

</head>

<body>

var kue = ["Donat",

"Roti",

"Martabak"

];

document.getElementById("demo").innerHTML = kue[0];

</script>

</body>

</html>

Jangan pernah menaruh koma setelah elemen terakhir (seperti "Martabak",). Efeknya tidak konsisten di seluruh browser.

Apa Array?

Array adalah variabel khusus, yang dapat menampung lebih dari satu nilai.

Jika Anda memiliki daftar item (daftar nama kue, misalnya), menyimpan kue di variabel tunggal bisa terlihat seperti ini:

var kue1 = "Donat";

var kue2 = "Roti";

var kue3 = "Martabak";

Namun, bagaimana jika Anda ingin loop melalui kue dan menemukan satu tertentu? Dan bagaimana jika kau tidak 3 kue, tapi 300?

Solusinya adalah array!

Array dapat menyimpan banyak nilai di bawah satu nama, dan Anda dapat mengakses nilai dengan mengacu pada nomor indeks.

Membuat Array

Menggunakan sebuah array literal adalah cara termudah untuk membuat Array JavaScript.

Sintaks:

var array-name = [ item1 , item2 , ...];

Contoh:

var kue = ["Donat","Roti","Martabak"];

Menggunakan new JavaScript Keyword

Contoh berikut juga menciptakan Array, dan memberikan nilai untuk itu:

<!DOCTYPE html>

<html>

<head>

<title>Belajar JavaScript</title>

</head>

<body>

var kue = new Array ("Donat","Roti","Martabak");

document.getElementById("demo").innerHTML = kue[0];

</script>

</body>

</html>

Kedua contoh di atas melakukan hal yang sama. Tidak perlu menggunakan new Array ().

Untuk kesederhanaan, mudah dibaca dan kecepatan eksekusi, menggunakan yang pertama (metode literal array).

Mengakses Elemen Array

Anda lihat elemen array dengan mengacu pada nomor indeks.

Pernyataan ini mengakses nilai elemen pertama dalam kue:

var name = kue[0];

Pernyataan ini memodifikasi elemen pertama dalam mobil:

kue[0] = "Donat";

[0] adalah elemen pertama dalam array. [1] adalah yang kedua. Indeks array dimulai dengan 0.

Anda Bisa Memiliki Objek Berbeda dalam Satu Array

Variabel JavaScript dapat benda. Array jenis khusus dari objek.

Jadi, Anda dapat memiliki variabel dari berbagai jenis dalam Array yang sama.

Anda dapat memiliki objek dalam Array. Anda dapat memiliki fungsi dalam Array. Anda dapat memiliki array dalam Array:

myArray[0] = Date.now;

myArray[1] = myFunction;

myArray[2] = myCars;

Array Objects

Array adalah jenis khusus dari objek. Operator typeof di JavaScript mengembalikan "objek" untuk array.

Tapi, JavaScript array digambarkan sebagai array.

Array menggunakan angka untuk mengakses "elemen" nya.

<!DOCTYPE html>

<html>

<head>

<title>Belajar JavaScript</title>

</head>

<body>

var nama = ("Dicky","Andre","Indrawan");

document.getElementById("demo").innerHTML = nama[0];

</script>

</body>

</html>

menggunakan nama untuk mengakses. Dalam contoh ini, nama.firstName mengembalikan Dicky:

<!DOCTYPE html>

<html>

<head>

<title>Belajar JavaScript</title>

</head>

<body>

var nama = {firstName:"Dicky",lastName:"Andre",usia:"19"};

document.getElementById("demo").innerHTML = nama["firstName"];

</script>

</body>

</html>

Properti Array dan Metode

sebenarnya dari JavaScript array built-in sifat array dan metode:

var x = kue.length;

var y = kue.sort();

Metode Array akan dibahas dalam bab berikutnya.

Length Properti

Panjang milik array mengembalikan panjang array (jumlah elemen array).

<!DOCTYPE html>

<html>

<head>

<title>Belajar JavaScript</title>

</head>

<body>

var buah = ["Mangga","Manggis","Pepaya","Apel","Semangka"];

document.getElementById("demo").innerHTML = buah.length;

</script>

</body>

</html>

Menambahkan Elemen Array

Cara termudah untuk menambahkan elemen baru ke array menggunakan metode push:

<!DOCTYPE html>

<html>

<head>

<title>Belajar JavaScript</title>

</head>

<body>

var buah = ["Mangga","Manggis","Pepaya","Apel","Semangka"];

document.getElementById("demo").innerHTML = buah;

function Fungsiku(){

buah.push("Lemon");

document.getElementById("demo").innerHTML=buah;

}

</script>

</body>

</html>

Unsur baru juga dapat ditambahkan ke array menggunakan properti length:

<!DOCTYPE html>

<html>

<head>

<title>Belajar JavaScript</title>

</head>

<body>

var buah = ["Mangga","Manggis","Pepaya","Apel","Semangka"];

document.getElementById("demo").innerHTML = buah;

function Fungsiku(){

buah[buah.length] = "Lemon";

document.getElementById("demo").innerHTML=buah;

}

</script>

</body>

</html>

Menambahkan elemen dengan indeks yang tinggi dapat membuat undefined dalam array:

<!DOCTYPE html>

<html>

<head>

<title>Belajar JavaScript</title>

</head>

<body>

var buah = ["Mangga","Manggis","Pepaya","Apel","Semangka"];

document.getElementById("demo").innerHTML = buah;

function Fungsiku(){

buah[10] = "Lemon";

document.getElementById("demo").innerHTML = buah[8];

}

</script>

</body>

</html>

Perulangan Elemen Array

Cara terbaik untuk loop melalui array, adalah menggunakan "for" loop:

<!DOCTYPE html>

<html>

<head>

<title>Belajar JavaScript</title>

</head>

<body>

function Fungsiku(){

var index;

var text = "<ul>";

var buah = ["Mangga","Manggis","Pepaya","Apel","Semangka"];

for (index = 0; index < buah.length; index++) {

text += "<li>" + buah[index] + "</li>";

}

text += "</ul>";

document.getElementById("demo").innerHTML = text;

}

</script>

</body>

</html>

Perbedaan Antara Array dan Objek

Dalam JavaScript, array menggunakan indeks bernomor.

Dalam JavaScript, objek menggunakan nama indeks.

Array adalah jenis khusus dari objek, dengan indeks bernomor.

Ketika Menggunakan Array. Kapan menggunakan Objects.

JavaScript tidak mendukung array asosiatif.
Anda harus menggunakan benda-benda ketika Anda ingin nama elemen menjadi string (teks).
Anda harus menggunakan array ketika Anda ingin nama elemen untuk menjadi nomor.

Hindari new Array ()

Tidak perlu menggunakan built-in array yang konstruktor new Array JavaScript ini ().

Cara Mengenali Array

Sebuah pertanyaan umum adalah: Bagaimana saya tahu jika variabel adalah array?

Masalahnya adalah bahwa JavaScript Operator typeof kembali "objek":

<!DOCTYPE html>

<html>

<head>

<title>Belajar JavaScript</title>

</head>

<body>

var buah = ["Mangga","Manggis","Pepaya","Apel","Semangka"];

document.getElementById("demo").innerHTML = typeof buah;

</script>

</body>

</html>

Kembali Operator typeof keberatan karena array JavaScript adalah obyek.

Untuk mengatasi masalah ini Anda dapat membuat IsArray () fungsi sendiri:

<!DOCTYPE html>

<html>

<head>

<title>Belajar JavaScript</title>

</head>

<body>

var buah = ["Mangga","Manggis","Pepaya","Apel","Semangka"];

document.getElementById("demo").innerHTML = isArray(buah);

function isArray(Arrayku) {

return Arrayku.constructor.toString().indexOf("Array") > -1

}

</script>

</body>

</html>

Fungsi di atas selalu mengembalikan nilai true jika argumen adalah array.

Atau lebih tepatnya: ia mengembalikan true jika prototipe obyek argumen adalah "[objek array]".

Kembali Keatas ⇑

CB Blogger

Tutorial Komputer