Array JavaScript

Array JavaScript digunakan untuk menyimpan banyak nilai dalam satu variabel.

Contoh

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

Coba Sendiri

Apa itu array?

Array adalah variabel khusus yang dapat menyimpan lebih dari satu nilai dalam sekali.

Jika Anda memiliki daftar proyek (contoh, daftar merek mobil), menyimpan merek mobil dalam satu variabel seperti ini:

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

Namun, apabila Anda ingin mengelilingi semua mobil dan mencari nilai yang khusus? Apabila bukan merek mobil tiga tapi tiga ratus?

Solusi adalah array!

Array dapat menyimpan banyak nilai dalam satu nama, dan nilai dapat diakses melalui indeks.

Membuat array

Menggunakan teks array adalah metode paling sederhana untuk membuat array JavaScript.

Grammar:

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

Contoh

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

Coba Sendiri

Spasi dan baris kosong tidak penting. Pernyataan dapat melintasi baris:

Contoh

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

Coba Sendiri

Jangan tulis koma setelah elemen terakhir (contoh "BMW",).

Mungkin ada masalah kompatibilitas antar peramban.

dengan kata kunci JavaScript new

Contoh di bawah ini juga akan membuat array dan memberikannya nilai:

Contoh

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

Coba Sendiri

Dua contoh di atas ber efek yang sama. Tidak perlu menggunakan new Array().

Dengan pertimbangan kecepatan, keterbacaan, dan kecepatan eksekusi, silakan gunakan metode pertama (metode teks array).

mengakses elemen array

Kami melaluiNomor indeks (tanda bawah)untuk merujuk elemen array.

Perintah ini mengakses nilai elemen pertama di cars:

var name = cars[0];

Perintah ini mengubah elemen pertama di cars:

cars[0] = "Opel";

Contoh

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];

Coba Sendiri

[0] adalah elemen pertama di dalam array. [1] adalah kedua. Indeks array dimulai dari 0.

Mengubah elemen array

Perintah ini mengubah nilai elemen pertama di cars:

cars[0] = "Opel";

Contoh

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

Coba Sendiri

Mengakses array penuh

Dengan JavaScript, Anda dapat mengakses array penuh melalui referensi nama array:

Contoh

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

Coba Sendiri

Array adalah objek

Array adalah tipe objek khusus. Dalam JavaScript, gunakan array untuk typeof Operator akan mengembalikan "object".

Namun, array JavaScript paling baik untuk dijelaskan dengan array.

Penggunaan arrayangkauntuk mengakses "elemen". Dalam contoh ini,person[0] Kembalikan Bill:

Array:

var person = ["Bill", "Gates", 62];

Coba Sendiri

Objek menggunakanNamauntuk mengakses "anggota". Dalam contoh ini,person.firstName Kembalikan Bill:

Objek:

var person = {firstName:"Bill", lastName:"Gates", age:19};

Coba Sendiri

Elemen array dapat berupa objek

Variabel JavaScript dapat berupa objek. Array adalah tipe objek khusus.

Demi itu, Anda dapat menempatkan tipe variabel yang berbeda di dalam array yang sama.

Anda dapat menyimpan objek di array. Anda dapat menyimpan fungsi di array. bahkan Anda dapat menyimpan array di dalam array:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Properti dan metode array

Kekuatan sebenarnya dari array JavaScript tersembunyi di properti dan metode array:

Contoh

var x = cars.length;   // Properti length mengembalikan jumlah elemen
var y = cars.sort();   // Metode sort() mengurutkan array

Kami akan belajar tentang metode array di bab berikutnya.

properti length

length properti ini mengembalikan panjang array (jumlah elemen array).

Contoh

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // Panjang fruits adalah 4

Coba Sendiri

length properti selalu lebih besar daripada indeks terbesar array (indeks bawah).

mengakses elemen array pertama

Contoh

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

Coba Sendiri

mengakses elemen array terakhir

Contoh

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

Coba Sendiri

mengelilingi elemen array

Cara paling aman untuk mengelilingi array adalah menggunakan "for"Perulangan: "

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>";
}

Coba Sendiri

Anda juga dapat menggunakan Array.forEach() Fungsi:

Contoh

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
  text += "<li>" + value + "</li>";
}

Coba Sendiri

Menambahkan elemen array

Metode yang paling baik untuk menambahkan elemen array adalah menggunakan push() Metode:

Contoh

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // Menambahkan elemen baru (Lemon) ke fruits

Coba Sendiri

Juga dapat digunakan length Atribut untuk menambahkan elemen baru ke array:

Contoh

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // Menambahkan elemen baru (Lemon) ke fruits

Coba Sendiri

Peringatan!

Menambahkan elemen dengan indeks yang paling tinggi dapat menciptakan "dalam” yang belum ditentukan di dalam array:

Contoh

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // Menambahkan elemen baru (Lemon) ke fruits

Coba Sendiri

Array yang berhubungan

Banyak elemen pemrograman yang mendukung array dengan indeks pemberi nama.

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

JavaScript Tidak didukungarray dengan indeks pemberi nama.

Dalam JavaScript, array hanya dapat digunakanindeks angka.

Contoh

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.length mengembalikan 3
var y = person[0];              // person[0] mengembalikan "Bill"

Coba Sendiri

Peringatan!

Jika Anda menggunakan indeks pemberi nama, JavaScript akan mengubah array menjadi objek standar.

Setelah itu, semua metode dan properti array akan menghasilkan hasil yang salah.

Contoh:

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length;         // person.length akan mengembalikan 0
var y = person[0];              // person[0] akan mengembalikan undefined

Coba Sendiri

perbedaan antara array dan objek

di JavaScriptarraygunakanindeks angka.

di JavaScriptobjekgunakanindeks yang dinamai.

Array adalah tipe objek khusus yang memiliki indeks angka.

Kapan menggunakan array, kapan menggunakan objek?

  • JavaScript tidak mendukung array berhubungan
  • Jika ingin nama elemenstring (teks)maka seharusnya digunakanobjek.
  • Jika ingin nama elemenangkamaka seharusnya digunakanarray.

hindari new Array()

Tidak perlu menggunakan konstruktur array bawaan JavaScript new Array().

Gunakan [] Gantikan dengan!

Berikut adalah dua kalimat yang berbeda yang membuat array baru yang kosong yang dinamai points:

var points = new Array();         // Buruk
var points = [];                  // Baik

Berikut adalah dua kalimat yang berbeda yang membuat array baru yang mengandung enam angka:

var points = new Array(40, 100, 1, 5, 25, 10); // Buruk
var points = [40, 100, 1, 5, 25, 10];          // Baik

Coba Sendiri

new Kata kunci hanya akan memperkomplekskan kode. Ini juga akan menghasilkan beberapa hasil yang tidak diharapkan:

var points = new Array(40, 100);  // Membuat array yang mengandung dua elemen (40 dan 100)

Apakah jika menghapus salah satu elemennya?

var points = new Array(40);       // Membuat array yang mengandung 40 elemen yang belum didefinisikan!!!

Coba Sendiri

Bagaimana mengenali array

Masalah yang umum adalah: bagaimana saya tahu apakah suatu variabel adalah array?

Masalahnya terletak di operator JavaScript typeof Mengembalikan "object"：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits;             // Mengembalikan object

Coba Sendiri

Operator typeof mengembalikan "object", karena array JavaScript termasuk dalam objek.

Solusi 1:

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

Array.isArray(fruits);     // Mengembalikan true

Coba Sendiri

Masalah dengan ini adalah ECMAScript 5 Tidak mendukung peramban lama.

Solusi 2:

Buat sendiri isArray() Fungsi untuk menyelesaikan masalah ini:

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

Coba Sendiri

Jika parameter adalah array, maka fungsi di atas selalu mengembalikan true.

Atau penjelasan yang lebih akurat adalah: jika prototipe objek mengandung kata "Array", maka kembalikan true.

Solusi 3:

Jika objek dibuat oleh konstruktur yang diberikan, maka instanceof Operator mengembalikan true:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array     // Mengembalikan true

Coba Sendiri