Array: Menyimpan Senarai Benda

15 minitPemulaHTML · CSS · JS

Dalam pelajaran ini

Cipta array dan baca item berdasarkan index yang bermula dari sifar
Guna length, push, pop, includes dan indexOf
Bina array baharu daripada array lama dengan map dan filter

Idea utama

Array ialah satu variable yang menyimpan senarai nilai secara tersusun. Setiap nilai ada nombor kedudukan (index) yang bermula dari 0, bukan 1.

Bayangkan anda simpan senarai barang dengan satu variable untuk setiap item: item1, item2, item3… Cara ini cepat jadi kucar-kacir bila senarai bertambah panjang. Array menyimpan seluruh senarai dalam satu variable sahaja, mengikut susunan.

JavaScript

const cart = ["roti canai", "teh tarik", "nasi lemak"];

cart[0];            // "roti canai"  ← the first item is index 0
cart[2];            // "nasi lemak"
cart[3];            // undefined     ← nothing there
cart.length;        // 3
cart[cart.length - 1]; // "nasi lemak" ← always the last item

Kiraan bermula dari sifar

Array dengan 3 item ada index 0, 1 dan 2. Index terakhir sentiasa length - 1. Kalau anda minta index yang tidak wujud, anda dapat undefined, bukan error — jadi kesilapan di sini senyap sahaja.

Mengubah array

Array datang dengan method terbina dalam — function yang melekat pada array dan dipanggil dengan titik. Walaupun array diisytihar dengan const, anda masih boleh ubah isinya; const cuma menghalang variable itu daripada ditukar kepada array lain.

JavaScript

const cart = ["roti canai", "teh tarik"];

cart.push("kuih");          // adds to the end → ["roti canai", "teh tarik", "kuih"]
const removed = cart.pop(); // removes the last item and gives it back → "kuih"

cart.includes("teh tarik"); // true
cart.includes("milo");      // false
cart.indexOf("teh tarik");  // 1
cart.indexOf("milo");       // -1  ← "not found"

cart[0] = "roti telur";     // replace the item at index 0

push(item): Tambah di hujung. Mengubah array asal.
pop(): Buang dan pulangkan item terakhir. Mengubah array asal.
includes(item): true atau false: adakah ia dalam array?
indexOf(item): Kedudukan padanan pertama, atau -1 jika tiada.

Mengubah seluruh senarai: map dan filter

Selalunya anda mahu buat sesuatu pada setiap item. map dan filter menerima satu function, memanggilnya sekali untuk setiap item, dan membina array baharu daripada hasilnya. Array asal tidak diusik.

Method array

// baris yang dijalankan
const nums = [1, 2, 3, 4, 5];

nums

1[0]
2[1]
3[2]
4[3]
5[4]

const nums = [1, 2, 3, 4, 5];. Array ialah senarai tersusun. Setiap nilai ada indeks, bermula dari 0.

indeks

push dan pop mengubah (mutate) array asal. map dan filter tidak pernah mengubahnya — ia memulangkan array baharu. Nilai dikekalkan kecil supaya muat di skrin.

map mengubah setiap item; filter hanya menyimpan item yang lulus ujian.

JavaScript

const prices = [4.5, 12, 2.8];

// map: one new value for every item (same length)
const doubled = prices.map(function (price) {
  return price * 2;
}); // [9, 24, 5.6]

// The same thing with the shorter arrow function syntax:
const doubled2 = prices.map((price) => price * 2);

// filter: keep the items where the function returns true
const cheap = prices.filter((price) => price < 5); // [4.5, 2.8]

console.log(prices); // still [4.5, 12, 2.8]

(price) => price * 2 cuma cara lebih pendek untuk menulis function (price) { return price * 2; }. Kalau hanya ada satu ungkapan selepas anak panah, return berlaku secara automatik.

Lengkapkan dua function dalam script.js:

1. lastItem(list) memulangkan item terakhir bagi mana-mana array — ia mesti berfungsi untuk array apa jua panjangnya, dan memberi undefined untuk array kosong.

2. addUnique(list, item) menolak (push) item ke hujung list hanya jika ia belum ada, kemudian memulangkan list itu.

Semakan

lastItem memulangkan item terakhir bagi mana-mana array
addUnique tambah item baharu tetapi abaikan pendua

Apa yang anda pelajari

Array menyimpan senarai tersusun; index bermula dari 0 dan yang terakhir ialah length - 1.
push/pop mengubah array; includes dan indexOf bertanya tentangnya (-1 bermaksud tiada).
map mengubah setiap item dan filter menyimpan sebahagian — kedua-duanya memulangkan array baharu.

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.

Dalam pelajaran ini

Idea utama

Mengubah array

Mengubah seluruh senarai: map dan filter

Uji kefahaman

Apa yang anda pelajari