Panduan Langkah demi Langkah untuk Membina Troli Beli-belah Mesra Pemula dalam JavaScript Menggunakan Tatasusunan dan Fungsi

Cara terbaik untuk mempelajari bahasa pengaturcaraan baharu ialah dengan mencipta seberapa banyak projek yang mungkin. Anda akan mendapat pengalaman yang lebih lancar sebagai seorang pemula jika anda membina projek mini yang menumpukan pada perkara yang telah anda pelajari.
Matlamatnya adalah untuk mengelakkan "neraka tutorial"—tempat yang menakutkan di mana anda terus menonton beberapa video tutorial tanpa mempunyai sebarang projek konkrit untuk menunjukkan kemahiran anda—dan juga membina keyakinan yang diperlukan untuk menangani projek berskala lebih besar.
Dalam artikel ini, saya akan menerangkan cara anda boleh mencipta sistem troli beli-belah sebagai pemula, menggunakan konsep asas Javascript.

Prasyarat

Untuk mencuba projek ini, anda perlu mempunyai pengetahuan yang mendalam tentang:

• Fungsi
• Kaedah
• Susun atur

Apa yang hendak dibina?

Keranjang beli-belah akan mempunyai sistem di mana pengguna boleh:

• Tambahkan item pada troli
• Alih keluar barang dari troli
• Lihat kandungan troli
• Kira jumlah harga barang dalam troli

Langkah 1: Menyediakan Data

Untuk bermula, kita perlu mencipta beberapa tatasusunan yang akan menyimpan data untuk item kita. Tatasusunan yang diperlukan secara khusus ialah:

• itemNames: Menentukan nama setiap item.
• itemPrices: Mengandungi harga kos setiap item.
• itemQuantities: Memberitahu jumlah item tertentu yang tersedia.
• itemInStock: Menentukan sama ada item ada dalam stok melalui penggunaan benar atau palsu.

const itemNames = ["Laptop", "Phone"];
const itemPrices = [1000, 500];
const itemQuantities = [1, 2];
const itemInStock = [true, true];

Langkah 2: Membina Troli Beli-belah dengan Fungsi

Kami akan mencipta fungsi troli beli-belah utama yang akan mengandungi logik untuk troli. Kami akan menggunakan penutupan untuk memastikan troli kekal peribadi dan hanya fungsi tertentu boleh berinteraksi dengannya.

const ShoppingCart = () => {
  const cart = []; // The cart is a private array

  // Add an item to the cart
  const addItemToCart = (itemIndex) => {
    if (itemInStock[itemIndex]) {
      cart.push(itemIndex);
      console.log(`${itemNames[itemIndex]} added to the cart`);
    } else {
      console.log(`${itemNames[itemIndex]} is out of stock`);
    }
  };

  // Remove an item from the cart
  const removeItemFromCart = (itemIndex) => {
    const index = cart.indexOf(itemIndex);
    if (index > -1) {
      cart.splice(index, 1);
    }
  };

  // Get the names of items in the cart
  const getCartItems = () => {
    return cart.map(itemIndex => itemNames[itemIndex]);
  };

  // Calculate the total price of items in the cart
  const calculateTotal = () => {
    return cart.reduce((total, itemIndex) => {
      return total + itemPrices[itemIndex] * itemQuantities[itemIndex];
    }, 0);
  };

  return {
    addItemToCart,
    removeItemFromCart,
    getCartItems,
    calculateTotal
  };
};

Untuk memecahkan kod:

• addItemToCart(itemIndex): Menambahkan item pada troli berdasarkan indeksnya (hanya jika ia ada dalam stok).
• removeItemFromCart(itemIndex): Mengalih keluar item daripada troli menggunakan indeksnya.
• getCartItems(): Mengembalikan nama item dalam troli menggunakan map() untuk menukar indeks kepada nama.
• calculateTotal(): Mengira jumlah harga dengan mendarabkan harga dan kuantiti item dalam troli menggunakan kaedah reduce().

Langkah 3: Menguji Troli Beli-belah

Projek yang telah siap harus diuji untuk memastikan ia berfungsi seperti yang diperlukan. Kami akan menguji untuk:

• menambah item

• melihat troli

• menyemak jumlah harga

const myCart = ShoppingCart();

// Add a Laptop (item 0)
myCart.addItemToCart(0);

// Add a Phone (item 1)
myCart.addItemToCart(1);

// View cart contents
console.log(myCart.getCartItems()); // Output: ['Laptop', 'Phone']

// Calculate the total price
console.log(myCart.calculateTotal()); // Output: 2000

Untuk memecahkan kod:

• Kami mencipta contoh troli beli-belah dengan memanggilnya: const myCart = shoppingCart();.
• Kami menambah item pada troli menggunakan indeksnya daripada tatasusunan itemNames: myCart.addItemToCart(0); untuk Laptop dan myCart.addItemTocart(1); untuk Telefon.
• Kami menggunakan getCartItems() untuk mencetak nama item dalam troli
• Akhir sekali, kami mengira jumlah harga menggunakan calculateTotal().

Langkah 4: Mengeluarkan Item dari Troli

Sistem troli beli-belah yang baik mesti membenarkan pengguna mengalih keluar barang dari troli. Kita boleh melakukan ini dengan memanggil removeItemFromCart().

myCart.removeItemFromCart(1); // Remove the Phone

// View the updated cart
console.log(myCart.getCartItems()); // Output: ['Laptop']

// Recalculate the total price
console.log(myCart.calculateTotal()); // Output: 1000

Bonus: Memahami Penutupan dalam Sistem Troli Beli-belah

Penutupan membantu susunan troli kekal peribadi, hanya boleh diakses melalui fungsi yang dikembalikan oleh fungsi ShoppingCart().

• Susun atur troli ditakrifkan di dalam troli beli-belah() dan tidak boleh diakses terus dari luar. Walau bagaimanapun, kerana fungsi addItemTocart(), removeItemFromCart(), getCartItems() dan calculateTotal() ditakrifkan dalam skop yang sama, ia boleh berinteraksi dengan cart.
• Penutupan ialah ciri hebat JavaScript yang membantu mengekalkan privasi dan struktur data dalam kod anda.

Kesimpulan

Dengan menggunakan tatasusunan dan fungsi asas, anda telah membina sistem troli beli-belah berfungsi sepenuhnya yang boleh menambah, mengalih keluar dan mengira jumlah item. Bahagian hebat projek ini ialah ia menggunakan penutupan untuk merangkum dan mengurus keadaan tanpa memerlukan objek atau kelas yang kompleks.

Kod Akhir

const itemNames = ["Laptop", "Phone"];
const itemPrices = [1000, 500];
const itemQuantities = [1, 2];
const itemInStock = [true, true];

const ShoppingCart = () => {
  const cart = [];

  const addItemToCart = (itemIndex) => {
    if (itemInStock[itemIndex]) {
      cart.push(itemIndex);
      console.log(`${itemNames[itemIndex]} added to the cart`);
    } else {
      console.log(`${itemNames[itemIndex]} is out of stock`);
    }
  };

  const removeItemFromCart = (itemIndex) => {
    const index = cart.indexOf(itemIndex);
    if (index > -1) {
      cart.splice(index, 1);
    }
  };

  const getCartItems = () => {
    return cart.map(itemIndex => itemNames[itemIndex]);
  };

  const calculateTotal = () => {
    return cart.reduce((total, itemIndex) => {
      return total + itemPrices[itemIndex] * itemQuantities[itemIndex];
    }, 0);
  };

  return {
    addItemToCart,
    removeItemFromCart,
    getCartItems,
    calculateTotal
  };
};

const myCart = ShoppingCart();
myCart.addItemToCart(0);
myCart.addItemToCart(1);
console.log(myCart.getCartItems());
console.log(myCart.calculateTotal());
myCart.removeItemFromCart(1);
console.log(myCart.getCartItems());
console.log(myCart.calculateTotal());

Saya harap anda seronok belajar, dan saya teruja untuk anda membina lebih banyak projek yang hebat!

Atas ialah kandungan terperinci Panduan Langkah demi Langkah untuk Membina Troli Beli-belah Mesra Pemula dalam JavaScript Menggunakan Tatasusunan dan Fungsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!