모든 초보자에게 전화하기 - 2부: 어레이의 귀환!

27726 단어 tutorial beginners javascript

표지 사진: Faris Mohammed

안녕하세요, 코더 여러분! 💻

초보자를 대상으로 하는 이 두 번째 게시물에서는 다음과 같은 이유로 배열을 계속 조작할 것입니다.

배열이 재미있습니다

경력에서 배열을 많이 다루어야 하므로 배열을 사용하는 것이 편할 것입니다

문맥

지난 몇 개월 동안 고객이 구매한 목록이 제공됩니다. 양을 감안하면 그리 인기가 많은 가게는 아니라고 봐도 무방할 듯...

const purchases = [
    {item: 'socks', amount: 25.98, date: '2022-05-07 09:31:29'},
    {item: 'jacket', amount: 145.98, date: '2022-05-17 17:01:09'},
    {item: 'cap', amount: 12.99, date: '2022-05-17 17:03:12'},
    {item: 'socks', amount: 43.99, date: '2022-06-11 18:24:16'},
    {item: 'cap', amount: 13.99, date: '2022-06-11 18:24:16'},
    {item: 'jacket', amount: 132.99, date: '2022-06-21 11:21:35'},
    {item: 'socks', amount: 13.99, date: '2022-06-23 09:43:28'},
    {item: 'socks', amount: 12.99, date: '2022-07-01 13:14:56'},
    {item: 'jacket', amount: 132.99, date: '2022-07-03 15:24:24'},
    {item: 'cap', amount: 32.99, date: '2022-07-05 11:14:15'},
    {item: 'socks', amount: 13.99, date: '2022-07-07 11:14:15'},
];

연습 1

귀하의 작업은 월별 총 구매 금액을 계산하고 monthlyRevenue 라는 개체에 저장하는 것입니다.

예상 개체

⚠️ 금액은 소수점 이하 2자리입니다.

let monthlyRevenue = {
  '2022-05': 184.95,
  '2022-06': 204.96,
  '2022-07': 192.96
}

연습 1의 솔루션

👇

Click for a step by step guide

Let's see how we can break down what we need to do.

loop through purchases
for each purchase we need to do some sort of date manipulation to get the year/month part
then we add the amount to monthlyRevenue for the date found in our previous step.
then we'll see what's left to do.

Sounds good. Let's code! ⌨️

// purchases omitted for readability
let monthlyRevenue = {}
// first step: loop!
purchases.forEach(function (purchase) {
    // do something
})

Easy.
Now, how do we get the year/month part from each purchase.date ?
Well, purchase.date is a string and the 7 first characters are year and month which is what we need.
So how about using substring ?

purchase.date.substring(0, 7)

다음을 시도해 보겠습니다.

// purchases omitted for readability
let monthlyRevenue = {}
// first step: loop!
purchases.forEach(function (purchase) {
    // second step: year/month part
    const purchaseDate = purchase.date.substring(0, 7);
    console.log(purchaseDate);
})

다음을 출력합니다.

문제 없다!

3단계: 금액 합계.

이제 연도/월 부분이 있으므로 monthlyRevenue[purchaseDate]에 금액을 저장할 수 있습니다.

합계를 얻기 위해 각 purchase.amount를 monthlyRevenue[purchaseDate]에 무고하게 더할 때 어떤 일이 발생하는지 봅시다.

// purchases omitted for readability
let monthlyRevenue = {}
// first step: loop!
purchases.forEach(function (purchase) {
    // second step: year/month part
    const purchaseDate = purchase.date.substring(0, 7);
    // step 3: sum
    monthlyRevenue[purchaseDate] += purchase.amount;
})
console.log(monthlyRevenue);

출력:

Object {
  "2022-05": NaN,
  "2022-06": NaN,
  "2022-07": NaN
}

아야! NaN ? 🍞?
이것은 Not a Number를 의미하며 처음에 monthlyRevenue[purchaseDate]인 undefined에 숫자를 추가하려고 하기 때문입니다.
항목을 추가하기 전에 0인지 확인해야 합니다.

monthlyRevenue[purchaseDate] = purchase.amount + (monthlyRevenue[purchaseDate] || 0);

트릭을 수행해야합니다!|| 첫 번째 요소가 falsy 인 경우 가장 오른쪽 요소를 반환합니다.
따라서 monthlyRevenue[purchaseDate]에 처음 액세스하면 undefined인 falsy를 반환하므로 ||는 0를 반환합니다.
지금부터 monthlyRevenue[purchaseDate]는 더 이상 falsy가 아닙니다.

코드를 업데이트해 보겠습니다.

// purchases omitted for readability
let monthlyRevenue = {}
// first step: loop!
purchases.forEach(function (purchase) {
    // second step: year/month part
    const purchaseDate = purchase.date.substring(0, 7);
    // step 3: sum
    monthlyRevenue[purchaseDate] = purchase.amount + (monthlyRevenue[purchaseDate] || 0);
})
console.log(monthlyRevenue);

출력을 참조하십시오.

Object {
  "2022-05": 184.95,
  "2022-06": 204.96000000000004,
  "2022-07": 192.96000000000004
}

만세! 🚀

잠깐만요, 소수점 이하 자릿수가 왜 이렇게 많죠?! 부동 소수점과 관련이 있습니다. 그것은 그 자체로 주제이며 여기서는 자세히 설명하지 않겠습니다. 하지만 내가 말할 수 있는 것은 아직 끝나지 않았다는 것입니다!

실습 설명을 다시 보면 숫자가 소수점 이하 2자리여야 함을 알려주는 ⚠️ 기호가 보입니다.

그리고 그것은 앞서 언급한 4단계입니다. ^^
monthlyRevenue를 채우는 루프 다음에 항목을 반올림합니다. toFixed를 사용합니다.

// step 4: rounding numbers
for (let yearMonth in monthlyRevenue) {
    monthlyRevenue[yearMonth] = monthlyRevenue[yearMonth].toFixed(2);
}
console.log(monthlyRevenue);

어떤 출력

Object {
  "2022-05": "184.95",
  "2022-06": "204.96",
  "2022-07": "192.96"
}

거의 다 왔어! toFixed는 문자열을 반환하고 숫자를 원하므로 문자열을 구문 분석하기 위해 Number를 호출합니다.

// step 4: rounding numbers
for (let yearMonth in monthlyRevenue) {
    monthlyRevenue[yearMonth] = Number(monthlyRevenue[yearMonth].toFixed(2));
}
console.log(monthlyRevenue);

출력은 어떻게 생겼습니까?

Object {
  "2022-05": 184.95,
  "2022-06": 204.96,
  "2022-07": 192.96
}

🚀 이제 우리는 이야기하고 있습니다. 요청한 내용을 정확하게 출력합니다.

함께 모아서

모든 코드는 다음과 같습니다.

const purchases = [
    {item: 'socks', amount: 25.98, date: '2022-05-07 09:31:29'},
    {item: 'jacket', amount: 145.98, date: '2022-05-17 17:01:09'},
    {item: 'cap', amount: 12.99, date: '2022-05-17 17:03:12'},
    {item: 'socks', amount: 43.99, date: '2022-06-11 18:24:16'},
    {item: 'cap', amount: 13.99, date: '2022-06-11 18:24:16'},
    {item: 'jacket', amount: 132.99, date: '2022-06-21 11:21:35'},
    {item: 'socks', amount: 13.99, date: '2022-06-23 09:43:28'},
    {item: 'socks', amount: 12.99, date: '2022-07-01 13:14:56'},
    {item: 'jacket', amount: 132.99, date: '2022-07-03 15:24:24'},
    {item: 'cap', amount: 32.99, date: '2022-07-05 11:14:15'},
    {item: 'socks', amount: 13.99, date: '2022-07-07 11:14:15'},
];

let monthlyRevenue = {}
// first step: loop!
purchases.forEach(function (purchase) {
    // second step: year/month part
    const purchaseDate = purchase.date.substring(0, 7);
    // step 3: sum
    monthlyRevenue[purchaseDate] = purchase.amount + (monthlyRevenue[purchaseDate] || 0);
})
// step 4: rounding numbers
for (let yearMonth in monthlyRevenue) {
    monthlyRevenue[yearMonth] = Number(monthlyRevenue[yearMonth].toFixed(2));
}
console.log(monthlyRevenue);

😅 긴 엉덩이 가이드였습니다!

너무 오래? 너무 자세하게? 댓글로 알려주세요! 💬

숙제 🏡

이제 배열과 개체에 비밀이 없으므로 할당은 다음과 같습니다.

Create a list of best and worst selling items of each month.
Best and worst are defined by the revenue they generated.

예상 결과:

let topFlops = {
  "2022-05": {
    top: 'jacket',
    flop: 'cap'
  },
  "2022-06": {
    top: 'jacket',
    flop: 'cap'
  },
  "2022-07": {
    top: 'jacket',
    flop: 'socks'
  }
}

즐거운 코딩하세요! 💻

Reference

이 문제에 관하여(모든 초보자에게 전화하기 - 2부: 어레이의 귀환!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/joolsmcfly/calling-all-beginners-part-ii-return-of-the-arrays-1obd

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[초보 미스] AWS 데이터 생성 시 리전에 주의하자

연결된 목록의 사본 만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다