17 KiB

Raw Permalink Blame History

Asas JavaScript: Array dan Gelung

Nota sketsa oleh Tomomi Imura

Kuiz Pra-Kuliah

Pernah terfikir bagaimana laman web menyimpan rekod item dalam troli belian atau memaparkan senarai rakan anda? Di sinilah array dan gelung memainkan peranan. Array adalah seperti bekas digital yang menyimpan pelbagai maklumat, manakala gelung membolehkan anda bekerja dengan semua data tersebut secara efisien tanpa kod berulang.

Bersama-sama, kedua-dua konsep ini membentuk asas untuk menguruskan maklumat dalam program anda. Anda akan belajar bagaimana beralih daripada menulis setiap langkah secara manual kepada mencipta kod pintar dan efisien yang boleh memproses ratusan atau ribuan item dengan cepat.

Menjelang akhir pelajaran ini, anda akan memahami cara menyelesaikan tugas data yang kompleks dengan hanya beberapa baris kod. Mari kita terokai konsep pengaturcaraan penting ini.

🎥 Klik imej di atas untuk video tentang array dan gelung.

Anda boleh mengambil pelajaran ini di Microsoft Learn!

Array

Bayangkan array sebagai kabinet fail digital - bukannya menyimpan satu dokumen setiap laci, anda boleh mengatur pelbagai item berkaitan dalam satu bekas yang terstruktur. Dalam istilah pengaturcaraan, array membolehkan anda menyimpan pelbagai maklumat dalam satu pakej yang teratur.

Sama ada anda sedang membina galeri foto, menguruskan senarai tugasan, atau menyimpan rekod skor tinggi dalam permainan, array menyediakan asas untuk pengurusan data. Mari kita lihat bagaimana ia berfungsi.

✅ Array ada di sekeliling kita! Bolehkah anda fikirkan contoh kehidupan sebenar bagi array, seperti susunan panel solar?

Mencipta Array

Mencipta array sangat mudah - hanya gunakan kurungan segi empat!

// Empty array - like an empty shopping cart waiting for items
const myArray = [];

Apa yang berlaku di sini? Anda baru sahaja mencipta bekas kosong menggunakan kurungan segi empat []. Anggap ia seperti rak perpustakaan kosong - ia sedia untuk menyimpan apa sahaja buku yang anda ingin susun di situ.

Anda juga boleh mengisi array anda dengan nilai awal dari awal:

// Your ice cream shop's flavor menu
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// A user's profile info (mixing different types of data)
const userData = ["John", 25, true, "developer"];

// Test scores for your favorite class
const scores = [95, 87, 92, 78, 85];

Perkara menarik untuk diperhatikan:

Anda boleh menyimpan teks, nombor, atau nilai benar/palsu dalam array yang sama
Hanya pisahkan setiap item dengan koma - mudah!
Array sangat sesuai untuk menyimpan maklumat berkaitan bersama-sama

Pengindeksan Array

Ini mungkin kelihatan luar biasa pada mulanya: array menomborkan item mereka bermula dari 0, bukan 1. Pengindeksan berasaskan sifar ini berakar dalam cara memori komputer berfungsi - ia telah menjadi konvensyen pengaturcaraan sejak zaman awal bahasa pengaturcaraan seperti C. Setiap tempat dalam array mendapat nombor alamat sendiri yang dipanggil indeks.

Indeks	Nilai	Penerangan
0	"Coklat"	Elemen pertama
1	"Strawberi"	Elemen kedua
2	"Vanila"	Elemen ketiga
3	"Pistachio"	Elemen keempat
4	"Rocky Road"	Elemen kelima

✅ Adakah anda terkejut bahawa array bermula pada indeks sifar? Dalam beberapa bahasa pengaturcaraan, indeks bermula pada 1. Terdapat sejarah menarik tentang ini, yang boleh anda baca di Wikipedia.

Mengakses Elemen Array:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// Access individual elements using bracket notation
console.log(iceCreamFlavors[0]); // "Chocolate" - first element
console.log(iceCreamFlavors[2]); // "Vanilla" - third element
console.log(iceCreamFlavors[4]); // "Rocky Road" - last element

Memecahkan apa yang berlaku di sini:

Menggunakan notasi kurungan segi empat dengan nombor indeks untuk mengakses elemen
Mengembalikan nilai yang disimpan di kedudukan tertentu dalam array
Bermula mengira dari 0, menjadikan elemen pertama indeks 0

Mengubah Elemen Array:

// Change an existing value
iceCreamFlavors[4] = "Butter Pecan";
console.log(iceCreamFlavors[4]); // "Butter Pecan"

// Add a new element at the end
iceCreamFlavors[5] = "Cookie Dough";
console.log(iceCreamFlavors[5]); // "Cookie Dough"

Dalam contoh di atas, kami telah:

Mengubah elemen pada indeks 4 daripada "Rocky Road" kepada "Butter Pecan"
Menambah elemen baru "Cookie Dough" pada indeks 5
Memperluas panjang array secara automatik apabila menambah melebihi sempadan semasa

Panjang Array dan Kaedah Biasa

Array dilengkapi dengan sifat dan kaedah terbina dalam yang memudahkan kerja dengan data.

Mencari Panjang Array:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
console.log(iceCreamFlavors.length); // 5

// Length updates automatically as array changes
iceCreamFlavors.push("Mint Chip");
console.log(iceCreamFlavors.length); // 6

Perkara penting untuk diingat:

Mengembalikan jumlah elemen dalam array
Mengemas kini secara automatik apabila elemen ditambah atau dibuang
Menyediakan kiraan dinamik yang berguna untuk gelung dan pengesahan

Kaedah Array Penting:

const fruits = ["apple", "banana", "orange"];

// Add elements
fruits.push("grape");           // Adds to end: ["apple", "banana", "orange", "grape"]
fruits.unshift("strawberry");   // Adds to beginning: ["strawberry", "apple", "banana", "orange", "grape"]

// Remove elements
const lastFruit = fruits.pop();        // Removes and returns "grape"
const firstFruit = fruits.shift();     // Removes and returns "strawberry"

// Find elements
const index = fruits.indexOf("banana"); // Returns 1 (position of "banana")
const hasApple = fruits.includes("apple"); // Returns true

Memahami kaedah ini:

Menambah elemen dengan push() (akhir) dan unshift() (permulaan)
Membuang elemen dengan pop() (akhir) dan shift() (permulaan)
Mencari elemen dengan indexOf() dan memeriksa kewujudan dengan includes()
Mengembalikan nilai berguna seperti elemen yang dibuang atau indeks kedudukan

✅ Cuba sendiri! Gunakan konsol pelayar anda untuk mencipta dan memanipulasi array ciptaan anda sendiri.

Gelung

Bayangkan hukuman terkenal dari novel Charles Dickens di mana pelajar perlu menulis ayat berulang kali di papan tulis. Bayangkan jika anda boleh hanya mengarahkan seseorang untuk "tulis ayat ini 100 kali" dan ia dilakukan secara automatik. Itulah yang dilakukan oleh gelung untuk kod anda.

Gelung adalah seperti mempunyai pembantu yang tidak pernah letih yang boleh mengulangi tugas tanpa kesilapan. Sama ada anda perlu memeriksa setiap item dalam troli belian atau memaparkan semua foto dalam album, gelung mengendalikan pengulangan dengan efisien.

JavaScript menyediakan beberapa jenis gelung untuk dipilih. Mari kita periksa setiap satu dan fahami bila untuk menggunakannya.

Gelung For

Gelung for adalah seperti menetapkan pemasa - anda tahu dengan tepat berapa kali anda mahu sesuatu berlaku. Ia sangat teratur dan boleh diramal, yang menjadikannya sempurna apabila anda bekerja dengan array atau perlu mengira sesuatu.

Struktur Gelung For:

Komponen	Tujuan	Contoh
Inisialisasi	Menetapkan titik permulaan	`let i = 0`
Keadaan	Bila untuk meneruskan	`i < 10`
Peningkatan	Cara untuk mengemas kini	`i++`

// Counting from 0 to 9
for (let i = 0; i < 10; i++) {
  console.log(`Count: ${i}`);
}

// More practical example: processing scores
const testScores = [85, 92, 78, 96, 88];
for (let i = 0; i < testScores.length; i++) {
  console.log(`Student ${i + 1}: ${testScores[i]}%`);
}

Langkah demi langkah, inilah yang berlaku:

Menginisialisasi pembolehubah kaunter i kepada 0 pada permulaan
Memeriksa keadaan i < 10 sebelum setiap iterasi
Melaksanakan blok kod apabila keadaan adalah benar
Meningkatkan i sebanyak 1 selepas setiap iterasi dengan i++
Berhenti apabila keadaan menjadi palsu (apabila i mencapai 10)

✅ Jalankan kod ini dalam konsol pelayar. Apa yang berlaku apabila anda membuat perubahan kecil pada kaunter, keadaan, atau ekspresi iterasi? Bolehkah anda membuatnya berjalan ke belakang, mencipta kiraan mundur?

Gelung While

Gelung while adalah seperti mengatakan "teruskan melakukan ini sehingga..." - anda mungkin tidak tahu dengan tepat berapa kali ia akan berjalan, tetapi anda tahu bila untuk berhenti. Ia sempurna untuk perkara seperti meminta input pengguna sehingga mereka memberikan apa yang anda perlukan, atau mencari data sehingga anda menemui apa yang anda cari.

Ciri-ciri Gelung While:

Teruskan melaksanakan selagi keadaan adalah benar
Memerlukan pengurusan manual bagi sebarang pembolehubah kaunter
Memeriksa keadaan sebelum setiap iterasi
Berisiko gelung tak terhingga jika keadaan tidak pernah menjadi palsu

// Basic counting example
let i = 0;
while (i < 10) {
  console.log(`While count: ${i}`);
  i++; // Don't forget to increment!
}

// More practical example: processing user input
let userInput = "";
let attempts = 0;
const maxAttempts = 3;

while (userInput !== "quit" && attempts < maxAttempts) {
  userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`);
  attempts++;
}

if (attempts >= maxAttempts) {
  console.log("Maximum attempts reached!");
}

Memahami contoh ini:

Menguruskan pembolehubah kaunter i secara manual dalam badan gelung
Meningkatkan kaunter untuk mengelakkan gelung tak terhingga
Menunjukkan kes penggunaan praktikal dengan input pengguna dan had percubaan
Termasuk mekanisme keselamatan untuk mengelakkan pelaksanaan tanpa henti

Alternatif Gelung Moden

JavaScript menawarkan sintaks gelung moden yang boleh menjadikan kod anda lebih mudah dibaca dan kurang terdedah kepada kesilapan.

Gelung For...of (ES6+):

const colors = ["red", "green", "blue", "yellow"];

// Modern approach - cleaner and safer
for (const color of colors) {
  console.log(`Color: ${color}`);
}

// Compare with traditional for loop
for (let i = 0; i < colors.length; i++) {
  console.log(`Color: ${colors[i]}`);
}

Kelebihan utama for...of:

Menghapuskan pengurusan indeks dan potensi kesilapan off-by-one
Menyediakan akses langsung kepada elemen array
Meningkatkan kebolehbacaan kod dan mengurangkan kerumitan sintaks

Kaedah forEach:

const prices = [9.99, 15.50, 22.75, 8.25];

// Using forEach for functional programming style
prices.forEach((price, index) => {
  console.log(`Item ${index + 1}: $${price.toFixed(2)}`);
});

// forEach with arrow functions for simple operations
prices.forEach(price => console.log(`Price: $${price}`));

Apa yang perlu anda tahu tentang forEach:

Melaksanakan fungsi untuk setiap elemen array
Menyediakan nilai elemen dan indeks sebagai parameter
Tidak boleh dihentikan awal (tidak seperti gelung tradisional)
Mengembalikan undefined (tidak mencipta array baru)

✅ Mengapa anda memilih gelung for berbanding gelung while? 17K penonton mempunyai soalan yang sama di StackOverflow, dan beberapa pendapat mungkin menarik untuk anda.

Gelung dan Array

Menggabungkan array dengan gelung mencipta keupayaan pemprosesan data yang kuat. Gabungan ini adalah asas kepada banyak tugas pengaturcaraan, daripada memaparkan senarai kepada mengira statistik.

Pemprosesan Array Tradisional:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// Classic for loop approach
for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`);
}

// Modern for...of approach
for (const flavor of iceCreamFlavors) {
  console.log(`Available flavor: ${flavor}`);
}

Mari fahami setiap pendekatan:

Menggunakan sifat panjang array untuk menentukan sempadan gelung
Mengakses elemen melalui indeks dalam gelung for tradisional
Menyediakan akses langsung kepada elemen dalam gelung for...of
Memproses setiap elemen array tepat sekali

Contoh Pemprosesan Data Praktikal:

const studentGrades = [85, 92, 78, 96, 88, 73, 89];
let total = 0;
let highestGrade = studentGrades[0];
let lowestGrade = studentGrades[0];

// Process all grades with a single loop
for (let i = 0; i < studentGrades.length; i++) {
  const grade = studentGrades[i];
  total += grade;
  
  if (grade > highestGrade) {
    highestGrade = grade;
  }
  
  if (grade < lowestGrade) {
    lowestGrade = grade;
  }
}

const average = total / studentGrades.length;
console.log(`Average: ${average.toFixed(1)}`);
console.log(`Highest: ${highestGrade}`);
console.log(`Lowest: ${lowestGrade}`);

Inilah cara kod ini berfungsi:

Menginisialisasi pembolehubah penjejakan untuk jumlah dan nilai ekstrem
Memproses setiap gred dengan satu gelung yang efisien
Mengumpulkan jumlah untuk pengiraan purata
Menjejaki nilai tertinggi dan terendah semasa iterasi
Mengira statistik akhir selepas gelung selesai

✅ Bereksperimen dengan gelung melalui array ciptaan anda sendiri dalam konsol pelayar anda.

Cabaran Ejen GitHub Copilot 🚀

Gunakan mod Ejen untuk menyelesaikan cabaran berikut:

Penerangan: Bina fungsi pemprosesan data yang komprehensif yang menggabungkan array dan gelung untuk menganalisis dataset dan menghasilkan wawasan bermakna.

Arahan: Cipta fungsi bernama analyzeGrades yang mengambil array objek gred pelajar (setiap satu mengandungi sifat nama dan skor) dan mengembalikan objek dengan statistik termasuk skor tertinggi, skor terendah, skor purata, bilangan pelajar yang lulus (skor >= 70), dan array nama pelajar yang mendapat skor di atas purata. Gunakan sekurang-kurangnya dua jenis gelung yang berbeza dalam penyelesaian anda.

Ketahui lebih lanjut tentang mod ejen di sini.

🚀 Cabaran

JavaScript menawarkan beberapa kaedah array moden yang boleh menggantikan gelung tradisional untuk tugas tertentu. Terokai forEach, for-of, map, filter, dan reduce.

Cabaran anda: Refaktor contoh gred pelajar menggunakan sekurang-kurangnya tiga kaedah array yang berbeza. Perhatikan betapa lebih bersih dan mudah dibaca kod tersebut dengan sintaks JavaScript moden.

Kuiz Pasca-Kuliah

Kuiz pasca-kuliah

Ulasan & Kajian Kendiri

Array dalam JavaScript mempunyai banyak kaedah yang sangat berguna untuk manipulasi data. Baca tentang kaedah-kaedah ini dan cuba beberapa daripadanya (seperti push, pop, slice dan splice) pada array ciptaan anda sendiri.

Tugasan

Gelung Array

Penafian:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI Co-op Translator. Walaupun kami berusaha untuk ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat penting, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.

17 KiB Raw Permalink Blame History