tutorial pengembangan web terbaru
 

JavaScript array

❮ Sebelumnya Berikutnya Bab ❯

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" :

Contoh

<p id="demo"></p>

<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

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

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

Cobalah sendiri

Buat sebuah array, dan menetapkan nilai-nilai untuk itu:

Contoh

var cars = ["Saab", "Volvo", "BMW"];
Cobalah sendiri "

Spasi dan jeda baris yang tidak penting. Sebuah deklarasi dapat span beberapa baris:

Contoh

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];
Cobalah sendiri "

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

Apa Array?

Array adalah variabel khusus, yang dapat menyimpan lebih dari satu nilai pada suatu waktu.

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

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

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

Solusinya adalah array!

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

Membuat Array

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

Sintaksis:

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

Contoh:

var cars = ["Saab", "Volvo", "BMW"];

Menggunakan JavaScript Kata Kunci baru

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

Contoh

var cars = new Array("Saab", "Volvo", "BMW");
Cobalah sendiri "

Kedua contoh di atas melakukan hal yang sama. Tidak perlu menggunakan new Array() .
Untuk kesederhanaan, mudah dibaca dan kecepatan eksekusi, menggunakan yang pertama (array metode literal).

Akses Elemen Array

Anda lihat elemen array dengan mengacu padanomor indeks.

Pernyataan ini mengakses nilai elemen pertama dalam mobil:

var name = cars[0];

Pernyataan ini memodifikasi elemen pertama dalam mobil:

cars[0] = "Opel";

[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 objek. Array jenis khusus dari objek.

Karena ini, 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. The typeof operator dalam JavaScript mengembalikan "object" untuk array.

Tapi, array JavaScript yang digambarkan sebagai array.

Array menggunakan numbers untuk mengakses nya "elements" . Dalam contoh ini, person[0] mengembalikan John :

Array:

var person = ["John", "Doe", 46];
Cobalah sendiri "

Objek menggunakan nama untuk mengakses nya "anggota". Dalam contoh ini, person.firstName mengembalikan John :

Obyek:

var person = {firstName:"John", lastName:"Doe", age:46};
Cobalah sendiri "

Array Properties dan Metode

Kekuatan yang nyata dari array JavaScript yang built-in array properti dan metode:

contoh

var x = cars.length;         // The length property returns the number of elements in cars
var y = cars.sort();         // The sort() method sort cars in alphabetical order

metode Array akan dibahas dalam bab berikutnya.

Panjang Properti

The length milik array mengembalikan panjang array (jumlah elemen array).

Contoh

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // the length of fruits is 4
Cobalah sendiri "

Properti panjang selalu salah satu lebih dari indeks array tertinggi.

Menambahkan Elemen Array

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

Contoh

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // adds a new element (Lemon) to fruits
Cobalah sendiri "

Unsur baru juga dapat ditambahkan ke array menggunakan length properti:

Contoh

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // adds a new element (Lemon) to fruits
Cobalah sendiri "

PERINGATAN !

Menambahkan elemen dengan indeks yang tinggi dapat membuat terdefinisi "holes" dalam array:

Contoh

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[10] = "Lemon";                // adds a new element (Lemon) to fruits
Cobalah sendiri "

Looping Elemen Array

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

Contoh

var fruits, text, fLen, i;

fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
    text += "<li>" + fruits[i] + "</li>";
}
Cobalah sendiri "

Array asosiatif

Banyak bahasa pemrograman mendukung array dengan nama indeks.

Array dengan nama indeks yang disebut array asosiatif (atau hash).

JavaScript tidak mendukung array dengan nama indeks.

Dalam JavaScript, array selalu menggunakan indeks bernomor.

Contoh

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length will return 3
var y = person[0];             // person[0] will return "John"
Cobalah sendiri "

PERINGATAN !!
Jika Anda menggunakan indeks bernama, JavaScript akan mendefinisikan array ke objek standar.
Setelah itu, semua metode array dan properti akan menghasilkan hasil yang salah.

Contoh:

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length will return 0
var y = person[0];             // person[0] will return undefined
Cobalah sendiri "

Perbedaan Antara Array dan Objek

Dalam JavaScript, array menggunakan indeks bernomor.

Dalam JavaScript, objek menggunakan bernama 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 untuk 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 JavaScript untuk new Array() .

Gunakan [] gantinya.

Kedua pernyataan yang berbeda baik membuat array kosong baru bernama poin:

var points = new Array();         // Bad
var points = [];                  // Good 

Kedua pernyataan yang berbeda baik membuat array baru yang berisi 6 nomor:

var points = new Array(40, 100, 1, 5, 25, 10)  // Bad
var points = [40, 100, 1, 5, 25, 10];          // Good
Cobalah sendiri "

The new kata kunci hanya memperumit kode. Hal ini juga dapat menghasilkan beberapa hasil yang tak terduga:

var points = new Array(40, 100);  // Creates an array with two elements (40 and 100)

Bagaimana jika saya menghapus salah satu elemen?

var points = new Array(40);       // Creates an array with 40 undefined elements !!!!!
Cobalah sendiri "

Cara Mengenali Array

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

Masalahnya adalah bahwa operator JavaScript typeof mengembalikan "objek":

var fruits = ["Banana", "Orange", "Apple", "Mango"];

typeof fruits;             // returns object
Cobalah sendiri "

Pengembalian Operator typeof keberatan karena array JavaScript adalah obyek.

Solusi 1:

Untuk mengatasi masalah ini ECMAScript 5 mendefinisikan metode baru Array.isArray() :

Array.isArray(fruits);     // returns true
Cobalah sendiri "

Masalah dengan solusi ini adalah bahwa ECMAScript 5 tidak didukung di browser lama.

Solusi 2:

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

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}
Cobalah sendiri "

Fungsi di atas selalu mengembalikan true jika argumen adalah array.

Atau lebih tepatnya: ia mengembalikan true jika objek prototipe mengandung kata "Array".

Solusi 3:

The instanceof Operator mengembalikan true jika sebuah objek dibuat oleh konstruktor diberikan:

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits instanceof Array     // returns true
Cobalah sendiri "

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »


❮ Sebelumnya Berikutnya Bab ❯