Hari 8: Konsep JavaScript Lanjutan

Tarikh: 15 Disember 2024

Selamat datang ke Hari ke-8! Hari ini kami meneroka beberapa konsep JavaScript yang paling berkuasa dan termaju yang meningkatkan kemahiran pengaturcaraan anda. Ini termasuk ciri ES6 moden, pengaturcaraan tak segerak dengan janji dan async/menunggu, dan pengendalian ralat yang berkesan menggunakan cuba-tangkap. Alat ini penting untuk membina aplikasi JavaScript yang cekap, boleh dibaca dan boleh diselenggara.

1. Pengenalan kepada Ciri ES6

ES6 (juga dipanggil ECMAScript 2015) memperkenalkan beberapa ciri yang menjadikan JavaScript lebih berkuasa dan mesra pembangun. Mari bincangkan beberapa ciri utama:

Memusnahkan

Pemusnahan membolehkan anda mengekstrak nilai daripada tatasusunan atau sifat daripada objek dan menetapkannya kepada pembolehubah dengan cara yang bersih dan ringkas.

Contoh: Pemusnahan Tatasusunan

const numbers = [1, 2, 3];
const [first, second, third] = numbers;
console.log(first, second, third); // Output: 1 2 3

Contoh: Pemusnahan Objek

const user = { name: "Alice", age: 25 };
const { name, age } = user;
console.log(name, age); // Output: Alice 25

Templat Huruf

Tersurat templat memudahkan pemformatan rentetan dengan membenarkan ungkapan terbenam dan rentetan berbilang baris.

Contoh: Interpolasi Rentetan

const name = "John";
const greeting = `Hello, ${name}! Welcome to JavaScript.`;
console.log(greeting); // Output: Hello, John! Welcome to JavaScript.

Contoh: Rentetan Berbilang Baris

const message = `This is a
multi-line string using template literals.`;
console.log(message);

2. Janji dan async/menunggu

Janji

Janji ialah objek yang mewakili penyiapan atau kegagalan operasi tak segerak.

Contoh: Menggunakan Janji

const fetchData = new Promise((resolve, reject) => {
  let dataLoaded = true;
  if (dataLoaded) {
    resolve("Data fetched successfully!");
  } else {
    reject("Failed to fetch data.");
  }
});

fetchData
  .then((data) => console.log(data))  // Output: Data fetched successfully!
  .catch((error) => console.error(error));

Async/Tunggu

async/wait ialah cara yang lebih bersih untuk bekerja dengan janji, menjadikan kod tak segerak kelihatan dan berkelakuan seperti kod segerak.

Contoh: Menggunakan async/menunggu

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("Data loaded!"), 2000);
  });
};

const getData = async () => {
  console.log("Fetching data...");
  const data = await fetchData();
  console.log(data); // Output: Data loaded!
};

getData();

3. Ralat Mengendalikan dengan cuba-tangkap

Ralat boleh berlaku semasa pelaksanaan kod, terutamanya dengan operasi tak segerak. Mengendalikan ralat ini dengan anggun memastikan pengalaman pengguna yang lancar.

Contoh: Tangkap cuba asas

try {
  let result = 10 / 0;
  console.log(result); // Output: Infinity
} catch (error) {
  console.error("An error occurred:", error.message);
}

Menggunakan try-catch dengan Async/Await

Apabila bekerja dengan kod tak segerak, gunakan try-catch untuk mengendalikan ralat.

const fetchData = () => {
  return new Promise((resolve, reject) => {
    let success = false;
    if (success) {
      resolve("Data fetched!");
    } else {
      reject("Failed to fetch data.");
    }
  });
};

const getData = async () => {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
};

getData();

4. Kes Penggunaan Praktikal

Mari gabungkan konsep ini menjadi contoh dunia nyata: mengambil data pengguna daripada API.

Contoh: Mengambil Data dengan Async/Await dan Pengendalian Ralat

const numbers = [1, 2, 3];
const [first, second, third] = numbers;
console.log(first, second, third); // Output: 1 2 3

5. Ambilan Utama

1. Memusnahkan: Memudahkan kerja dengan tatasusunan dan objek.
2. Templat Literal: Menjadikan manipulasi rentetan lebih mudah.
3. Janji dan Async/Await: Mengendalikan operasi tak segerak dengan berkesan.
4. Pengendalian Ralat: Gunakan try-catch untuk mengurus ralat dengan anggun.

Amalan Tugasan untuk Hari 8

1. Gunakan penstrukturan untuk mengekstrak sifat tertentu daripada objek.
2. Tulis fungsi yang menggunakan async/menunggu untuk mengambil data daripada API awam.
3. Tambah pengendalian ralat pada fungsi anda untuk mengendalikan kegagalan rangkaian atau data tidak sah.

Langkah Seterusnya

Esok, pada Hari 9, kita akan menyelami Modul dan Kelas JavaScript, meneroka aspek modular dan berorientasikan objek JavaScript. Pengetahuan ini akan membantu anda menulis kod yang lebih bersih dan teratur. Jumpa lagi!

Atas ialah kandungan terperinci Konsep JavaScript Lanjutan menjanjikan dan tidak segerak/menunggu dan cuba tangkap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!