Javascript의 배열 매핑 방법을 사용하는 방법

그것의 작용

Javascript의array map 방법은 변환된 그룹을 되돌려줍니다.함수에 함수를 전달합니다. 이 함수는 그룹의 모든 값을 변환합니다.Map은 배열의 각 항목에서 함수를 호출하고 배열 항목, 해당 항목의 색인, 전체 배열 등의 세 가지 값을 전달합니다.함수가 되돌아오는 내용은 새 그룹의 상응하는 항목이 됩니다.

하나의 예

지도의 기능을 이해하는 가장 좋은 방법은 하나의 예를 통해 하는 것이다.다음은 주요 문장 ("a", "an", "the") 으로 제목을 바꾸는 함수입니다.그것은 끝으로 옮긴 문장과 같은 제목을 되돌려준다.만약 제목 목록이 있고 알파벳순으로 배열되고 싶다면, 주요 문장들이 순서에 영향을 주지 않도록 해야 한다.너는'the'로 시작하는 모든 제목이't'로 정렬되기를 원하지 않을 것이다.

    function formatTitle(title) {
      const articles = ['a', 'an', 'the'];
      let titleWords = title.split(' ');
      let firstWord = titleWords.shift();
      if (articles.includes(firstWord.toLowerCase())) {
        let formattedTitle = `${titleWords.join(' ')}, ${firstWord}`;
        return formattedTitle;
      } else {
        return title;
      }
    }

분해 콜백 함수

우리가 이 함수를 분해하자.이 함수는 제목의 매개 변수를 받아들인다.나는 맵이 제목 외에 두 개의 매개 변수를 더 전달할 수 있다는 것을 알고 있지만, 나는 이런 것들을 필요로 하지 않는다.나는 함수에서 실제로 사용할 인자만 명명할 수 있다.다른 매개변수는 전달되지만 연관된 매개변수 이름은 없습니다.
두 번째 줄에서 나는 내가 찾으려는 일련의 문장을 만들었다.잠시 후, 제목의 첫 번째 단어를 가져와서, 이 그룹에 나타나는지 확인합니다.이것은 나에게 이 제목을 포맷해야 하는지 여부를 알려 준다.
세 번째 줄에서 제목을 가져오고 split 방법으로 빈칸을 전송합니다.split는 문자열을 그룹으로 나누는 문자열 방법이다.split에 전달되는 문자열은 원래 문자열이 분할된 문자열입니다.각 공백 문자에서 문자열의 단어 배열로 분할됩니다.
네 번째 줄은 shift 그룹에서 첫 번째 값을 삭제하고 되돌려줍니다.첫 번째 글자는 현재 firstWord 변수에 저장되어 있으며, titleWords 수조는 첫 번째 글자를 포함하지 않습니다.
다섯 번째 줄에서, 나는 articles수조를includes에 전달하는 방법으로 firstWord의 소문자 버전을 포함하는지 테스트했다.모든 제목은 대문자로 시작해야 하지만, 비교하기 전에 단어의 대소문자를 낮추면, 이 프로그램의 사용자가 정말로 올바른 일을 하고 제목을 대문자로 썼는지 걱정할 필요가 없다.어쨌든 이 함수는 정상적으로 작동할 수 있다.
만약 첫 번째 단어가 articles 수조에서 발견된다면, 포맷 문자열을 만들 것입니다.이 점을 실현하기 위해 템플릿 문자열을 사용합니다. 우선 그룹 join 방법으로 제목의 나머지 단어를 다시 연결합니다.공백만 있는 문자열을 전달하는 것은 그룹의 문자열이 연결될 때 문자열 사이에 공백을 두는 것을 의미합니다.기억해라. 이 수조는 첫 번째 단어를 포함하지 않는다. 우리는 지금 그것이 문장이라는 것을 확신한다.
나는 첫 번째 단어 뒤에 쉼표를 하나 붙였다.그리고 나는 문장의 끝에 주요 문장 (((firstWord 을 삽입하고 이 값을 되돌려 주었다.만약 첫 번째 단어가 문장이 아니라면, 나는 원래의 제목만 되돌려줄 것이다.
코드 작성을 배우는 것은 좋지만, 공부만 하는 것을 뛰어넘어 코드 작성에 대한 보수를 받고 싶을 수도 있다.내가 해줄게.로그인Rad Devon하여 도움을 받아 당신의 인터넷 개발 경력을 시작하세요!

호출 맵

이 리셋을 사용하려면 원시 그룹 map 을 호출하고 formatTitle 함수를 전달합니다.이것은 원본 그룹이 아니라 포맷된 제목을 가진 변환 그룹을 되돌려줍니다.원시 그룹을 바꾸는 것이 아니라 새로운 그룹을 되돌려주기 때문에, 변수로 값을 부여하거나 다른 함수나 방법에 직접 전달하고 싶을 수도 있습니다.다음은 작업 응용 프로그램으로 조립된 모든 내용입니다.

실행 중인 데모

이 시연은 위에 표시된 정확한 리셋 함수를 사용합니다.IMDB에서 상위 10개 영화를 가나다순으로 표시할 수 있는 간단한 Vue 앱이다.첫 번째 목록에서, 그것들은 제목에 따라 정렬되며, 아무런 수정도 없다.두 번째 목록에서 formatTitle 맵에 전달된 새 그룹을 정렬합니다.

지도 사용 시기

위에서 보여준 것처럼 특정한 방식으로 문자열을 포맷하거나, 숫자 그룹의 모든 값을 계산해야 할지도 모른다.어떤 경우든지 map는 이 일을 완성하는 데 가장 좋은 도구이다.새 그룹이 필요할 때 언제든지 사용할 수 있습니다 map. 그 중에서 모든 값은 기존 그룹의 어떤 값으로 변환됩니다.
만약 네가 이 문장을 좋아한다면, 너도 아마 내가 learning to use the Javascript ternary operator 와 the array’s reduce method 에 쓴 문장을 좋아할 것이다.