> 웹 프론트엔드 > JS 튜토리얼 > JavaScript - 레이 심장강화 2일차

JavaScript - 레이 심장강화 2일차

WBOY
풀어 주다: 2024-07-17 20:27:43
원래의
282명이 탐색했습니다.

안녕하세요. Wes Bos의 JavaScript30에 다시 오신 것을 환영합니다! 그렇군요... 마지막 포스팅 이후로 2주가 넘었는데 꽤 슬프네요. 그렇긴 하지만, 저는 현재 직장에 통지서를 넣었고 회사에서 저를 곤경에 처하게 했기 때문에 최근에는 코딩 작업을 할 시간이 별로 없었습니다... 하지만 이제 공식적으로 시간제 근무자가 되었으니 이 게시물 외에 다른 프로젝트를 진행할 시간이 있기 때문에 이러한 게시물이 더 정기적으로, 더 다양하게 게시될 것이라고 장담할 수 있습니다. 그러나 당신은 내 인생에 대한 업데이트를 위해 여기에 온 것이 아닙니다. 당신은 이 코스에 대해 더 많은 것을 보기 위해 여기에 왔습니다! 그럼 시작해보자!

Array Cardio 2일차는 1일차에 비해 아무것도 아니었습니다. 나는 거짓말하지 않을 것이다. 나는 첫 번째 도전이 어떻게 진행되었는지에 따라 이 도전에 들어가는 것이 정말 두려웠습니다. 첫 번째 코스에서는 끊임없이 인터넷 검색을 하고 난제를 뛰어넘어야 했습니다. 그것은 실제로 운동처럼 느껴졌지만 이것은 스트레칭이나 요가 세션에 더 가깝습니다. Array Cardio 2일차의 첫 번째 부분에서는 Array.prototype.some() 및 Array.protoype.every()를 사용했습니다. 우리는 사람들의 목록과 그들이 태어난 연도를 담고 있는 배열 내의 객체를 받았습니다. 이 정보를 통해 우리는 최소한 한 사람이 19세 이상인지, 그리고 모든 사람이 19세 이상인지 알아내라는 요청을 받았습니다.

const people = [
      { name: 'Wes', year: 1988 },
      { name: 'Kait', year: 1986 },
      { name: 'Irv', year: 1970 },
      { name: 'Lux', year: 2015 }
    ];
    // Some and Every Checks
    // Array.prototype.some() // is at least one person 19 or older?
    const isAdult = people.some(person => ((new Date())
  .getFullYear()) - person.year >= 19 )

  console.log({isAdult})
    // Array.prototype.every() // is everyone 19 or older?
    const areAdult = people.every(person => {
      const currentYear = (new Date()).getFullYear();
      return currentYear - person.year >= 19
    }
  )
  console.log(areAdult)
로그인 후 복사

챌린지의 이 부분을 통해 제 자신에 대해 정말 좋은 기분이 들었습니다. 이에 대해서는 거짓말을 하지 않겠습니다. 빠른 Google 검색 후 Array.prototype.some()을 사용하는 방법에 대한 답을 얻었고 이는 .every()에도 직접 적용되었습니다. 나는 그것을 완전히 날려 버렸고 기록적인 시간 안에 이 도전을 끝낼 수 있을 것 같은 느낌이 들었습니다. 알고 보니 내 말이 옳기도 하고 그르기도 했습니다...

이 챌린지의 두 번째이자 마지막 부분에는 Array.prototype.find() 및 Array.prototype.findIndex()가 포함되었습니다. 우리는 배열 내의 또 다른 객체를 받았지만 이번에는 구별하는 데 도움이 되는 고유한 ID 번호가 있는 일종의 레스토랑 리뷰에 대한 댓글 목록이 있었습니다. 빠른 Google 검색을 하기 전과 마찬가지로 .find()를 사용하는 방법과 이를 잘 사용하는 방법을 보여 주었지만 Wes가 찾고 있던 것과 정확히 일치하지 않은 것 같습니다. 주어진 숫자에 따라 ID를 호출하는 함수를 참조할 때 console.log를 사용하는 동안 .find()만 사용했습니다. 내 생각엔 그가 한 일과 비슷하다고 주장할 수 있을 것 같아요... 일종의... 우리 둘 다 같은 결과를 생각해냈다는 점을 고려하면요. 하지만 모르겠어요. 이 경우에는 그의 코드보다 내 코드가 더 마음에 드는 것 같아요.

    const comments = [
      { text: 'Love this!', id: 523423 },
      { text: 'Super good', id: 823423 },
      { text: 'You are the best', id: 2039842 },
      { text: 'Ramen is my fav food ever', id: 123523 },
      { text: 'Nice Nice Nice!', id: 542328 }
    ];
    // Find is like filter, but instead returns just the one you are looking for
    // find the comment with the ID of 823423

    function hasId(idNumber) {
      return idNumber.id === 823423
    }
    console.log (comments.find(hasId))

    // Array.prototype.findIndex()
    // Find the comment with this ID
    // delete the comment with the ID of 823423
    function thisId(idNumber) {
      return idNumber.id === 823423
    }
    console.log (comments.findIndex(thisId))

    const index = comments.findIndex(comment => comment.id === 823423)

    const newComments = [
      ...comments.slice(0, index),
      ...comments.slice(index + 1)
    ]
    console.table(newComments)
로그인 후 복사

또한 그가 챌린지의 마지막 부분에서 우리에게 무엇을 하기를 원하는지 명확하지 않은 것으로 밝혀졌습니다. 그는 우리가 findIndex()를 사용하도록 하는 동안 방금 전에 찾은 것과 동일한 ID를 가진 주석을 삭제하기를 원했습니다. 방금 VScode를 살펴보고 수동으로 주석을 삭제했습니다. 공평하게 말하자면, 나는 그가 단지 그 댓글이 더 이상 존재하지 않을 경우 어떤 결과가 나올지 우리에게 보여주고 싶어했을 뿐이라고 생각했습니다. 그는 우리가 .splice 또는 .slice를 사용하여 새 코드를 통해 주석을 삭제한 다음(이 연습에 더 적합함) 특정 주석 없이 새 배열에 액세스하기를 원했습니다. 그래서...네...그냥 수동으로 삭제했기 때문에 그 지점까지는 도달하지 못했습니다. 하지만 저는 새로운 코드 라인으로 이것이 어떻게 가능한지 알아보기 위해 그와 함께 코딩을 했습니다.

그렇습니다. Array Cardio Day 2. 이 날에 3일차가 없다는 것을 알고 안심이 되었습니다. 배열과 상호 작용하는 방법에 대해 더 많은 연습을 할 수 없다는 말은 아닙니다. 이 코스가 진행되는 한 이것은 아마도 지금까지 가장 재미있지 않았을 것입니다. 그럼 제가 다룰 다음 강의를 기대해 주세요. 시간이 더 많기 때문에 이번 주나 다음 주 초에 나올 수 있기를 바랍니다! 어쨌든 JavaScript30: Fun With HTML5 Canvas를 즐길 준비가 되셨기를 바랍니다!

Fun With HTML5 Canvas

위 내용은 JavaScript - 레이 심장강화 2일차의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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