> 웹 프론트엔드 > JS 튜토리얼 > 배열과 함수를 사용하여 JavaScript로 초보자 친화적인 장바구니를 구축하기 위한 단계별 가이드

배열과 함수를 사용하여 JavaScript로 초보자 친화적인 장바구니를 구축하기 위한 단계별 가이드

Susan Sarandon
풀어 주다: 2024-10-06 08:16:02
원래의
702명이 탐색했습니다.

Step-by-Step Guide to Building a Beginner-Friendly Shopping Cart in JavaScript Using Arrays and Functions

새로운 프로그래밍 언어를 배우는 가장 좋은 방법은 가능한 한 많은 프로젝트를 만드는 것입니다. 배운 내용을 중심으로 미니 프로젝트를 만들어보면 초보자로서 더욱 원활한 경험을 할 수 있을 것입니다.
목표는 자신의 기술을 보여줄 구체적인 프로젝트 없이 여러 튜토리얼 동영상을 계속 시청하는 무서운 장소인 '튜토리얼 지옥'을 피하고 대규모 프로젝트를 처리하는 데 필요한 자신감을 키우는 것입니다.
이번 글에서는 기본적인 자바스크립트 개념을 이용하여 초보자가 장바구니 시스템을 만드는 방법을 설명하겠습니다.

전제 조건

이 프로젝트를 시도하려면 다음에 대한 심층적인 지식이 필요합니다.

  • 기능
  • 방법
  • 배열

무엇을 구축할 것인가?

장바구니에는 사용자가 다음을 수행할 수 있는 시스템이 있습니다.

  • 장바구니에 품목 추가
  • 장바구니에서 항목 제거
  • 장바구니 내용 보기
  • 장바구니에 있는 품목의 총 가격 계산

1단계: 데이터 설정

시작하려면 항목에 대한 데이터를 보관할 배열 몇 개를 만들어야 합니다. 구체적으로 필요한 배열은 다음과 같습니다.

  • itemNames: 각 항목의 이름을 지정합니다.
  • itemPrices: 각 항목의 가격이 포함됩니다.
  • itemQuantities: 특정 항목의 사용 가능량이 얼마나 되는지 알려줍니다.
  • itemInStock: true 또는 false를 사용하여 품목의 재고 여부를 결정합니다.

1

2

3

4

const itemNames = ["Laptop", "Phone"];

const itemPrices = [1000, 500];

const itemQuantities = [1, 2];

const itemInStock = [true, true];

로그인 후 복사

2단계: 기능을 사용하여 장바구니 구축

장바구니 논리를 포함할 기본 장바구니 기능을 만들 예정입니다. 장바구니가 비공개로 유지되고 특정 기능만 상호 작용할 수 있도록 클로저를 사용할 것입니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

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

  };

};

로그인 후 복사

코드를 분석하려면:

  • addItemToCart(itemIndex): 색인을 기준으로 장바구니에 항목을 추가합니다(재고가 있는 경우에만).
  • RemoveItemFromCart(itemIndex): 색인을 사용하여 장바구니에서 항목을 제거합니다.
  • getCartItems(): 색인을 이름으로 변환하기 위해 map()을 사용하여 장바구니에 있는 항목의 이름을 반환합니다.
  • 계산Total(): Reduce() 메소드를 사용하여 장바구니에 담긴 품목의 가격과 수량을 곱하여 총 가격을 계산합니다.

3단계: 장바구니 테스트

완성된 프로젝트를 테스트하여 필요에 따라 작동하는지 확인해야 합니다. 우리는 다음을 테스트할 예정입니다:

  • 항목 추가

  • 장바구니 보기

  • 총액 확인

1

2

3

4

5

6

7

8

9

10

11

12

13

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

로그인 후 복사

코드를 분석하려면:

  • 다음과 같이 호출하여 장바구니 인스턴스를 생성합니다. const myCart = shoppingCart();.
  • itemNames 배열의 색인을 사용하여 장바구니에 항목을 추가합니다. myCart.addItemToCart(0); 노트북 및 myCart.addItemTocart(1)의 경우; 전화용입니다.
  • 장바구니에 있는 품목의 이름을 인쇄하기 위해 getCartItems()를 사용합니다
  • 마지막으로calculateTotal()을 사용하여 총 가격을 계산합니다.

4단계: 장바구니에서 항목 제거

좋은 장바구니 시스템에서는 사용자가 장바구니에서 상품을 삭제할 수 있어야 합니다. RemoveItemFromCart()를 호출하여 이 작업을 수행할 수 있습니다.

1

2

3

4

5

6

7

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

로그인 후 복사

보너스: 장바구니 시스템의 폐쇄 이해

클로저는 장바구니 배열을 비공개로 유지하는 데 도움이 되며 ShoppingCart() 함수에서 반환된 함수를 통해서만 액세스할 수 있습니다.

  • 장바구니 배열은 장바구니() 내부에 정의되며 외부에서 직접 접근할 수 없습니다. 그러나 addItemTocart(), RemoveItemFromCart(), getCartItems() 및 계산Total() 함수는 동일한 범위 내에 정의되어 있으므로 장바구니와 상호 작용할 수 있습니다.
  • 클로저는 데이터 개인 정보 보호와 코드 구조를 유지하는 데 도움이 되는 JavaScript의 강력한 기능입니다.

결론

기본 배열과 함수를 사용하여 항목의 합계를 추가, 제거 및 계산할 수 있는 완전한 기능의 장바구니 시스템을 구축했습니다. 이 프로젝트의 가장 멋진 부분은 클로저를 사용하여 복잡한 객체나 클래스 없이도 상태를 캡슐화하고 관리한다는 것입니다.

최종 코드

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

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());

로그인 후 복사

배우는 것이 즐거웠기를 바랍니다. 더 멋진 프로젝트를 만들어가시기를 바랍니다!

위 내용은 배열과 함수를 사용하여 JavaScript로 초보자 친화적인 장바구니를 구축하기 위한 단계별 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿