당신의 지도를 잡아오기();모험은 저기 있다!

웅장한 지도 진열 방법과 그 모든 영광을 탐색해 봅시다.
이 문서에 사용된 키워드:
그룹: 유사한 목록을 반복하거나 수정할 수 있는 대상
정수:실수(문자열 아님)
인덱스:배열에 있는 항목의 숫자 위치
문자열:수학 공식에서 사용할 수 없는 실제 텍스트
나는 맵 ()이 내가 가장 좋아하는 수조 방법이라고 생각할 이유가 없지만, 사실은 그렇다.Map powers는 배열의 인덱스를 옮겨다니며 각 인덱스에서 실행되는 함수에 따라 새 배열을 만듭니다.본문이 끝날 때 맵 () 수조 방법을 정확하고 자신 있게 사용할 수 있습니다.

간간이 햇빛이...

실제 정수로 채워진 숫자 배열을 만들어 위에 매핑합니다.

const numbers = [1,2,3,4,5]
numbers.map( item => console.log(item))

콘솔에서 무슨 일이 일어났습니까?
우선, 컨트롤러의 맨 밑에 간단하게 말하자면, 이 맵 방법은 하나의 그룹을 만들었고, 굴러가는 모든 인덱스는 정의되지 않았다.이것은 정의되지 않은 값이 있는 5개의 인덱스를 포함하는 그룹입니다.이것은 예상한 것이다. 왜냐하면 우리는 아직 리셋 함수에서 어떠한 할당도 하지 않았기 때문이다.
그 다음으로, 우리 프로그램의 두 번째 줄은 컨트롤러가 수조에서 찾은 모든 인덱스를 기록하는 것이다.수조의 모든 항목을 색인이나 항목이라고 부르는 것은 매우 중요하다.배열에서 숫자를 참조하면 다음과 같은 이유로 혼란스러울 수 있습니다.
수조의 첫 번째 숫자는 1이고, 그것은 수조의 첫 번째 숫자이다.그러나 색인 값은 0입니다.이것은 그룹의 인덱스가 0에서 시작하고, 그 다음은 1, 그 다음은 2로 유추되기 때문이다.
그래서 숫자 수조에는 5가지가 있지만 수조의 첫 번째 항목은 인덱스 0이고 수조의 5는 인덱스 4이다.
문자열 값 배열을 살펴보겠습니다.

const pets = ['dog', 'cat', 'bird', 'ape']

dog의 색인 값은 0입니다.
ape지수는 4입니다.

너 왔니

하지만 내 말을 믿을 필요는 없어.콜백 함수의 매개변수에서 두 번째 매개변수를 전달하여 현재 인덱스를 식별할 수 있습니다.

pets.map( (item, index) => console.log(item + ' has an index of ' + index) )

현재 우리는 그룹의 모든 항목의 인덱스를 보았다.
이제 우리 숫자 그룹으로 돌아가서 지도가 작용하는 것을 봅시다.

numbers.map( item => item = item + 1)

이 맵 방법으로 만든 그룹을 보십시오."item"리셋 방법의 지시에 따라 숫자마다 1씩 증가합니다⇒ 프로젝트 = 프로젝트 +1.이것은 모든 인덱스를 효과적으로 살펴보았는데, 그것이 하나의 숫자 형식이라는 것을 발견했기 때문에, 우리가 지시하는 추가된 정수, 1을 추가했다.
참조용으로만 제공되는 동일한 메소드를 보다 간결하게 작성할 수 있는 방법은 다음과 같습니다.

중요한 알림: 그룹의 색인 값은 문자열이 아닌 정수입니다.

새로운 어레이

또한 주의해야 할 것은 맵 방법을 사용하여 실제적으로 새로운 그룹을 만들었다는 것이다.따라서 맵 방법을 단독으로 실행할 때 프로그램에 그룹을 만들고 있습니다.그럼에도 불구하고, 비추려는 원시 그룹을 바꾸고 있는 것은 아닙니다.아래를 보십시오.

const points = [80,100,75]
points.map( item => item += 10 )
console.log(points)

무슨 일이 일어났는지 보셨어요?진법 포인트 중 아이템이 10 증가하지 않았습니다.이것은 하나의 그룹을 만들었지만, 어느 곳에서도 인용하지 않았기 때문입니다. 새 그룹을 만들었기 때문에, 항목이 10개 증가했지만, 새로운 변수에 분배되지 않았습니다.
맵 방법을 사용할 때마다 맵을 수정하는 것이 아니라 새 그룹을 만드는 것입니다.
이 프로그램을 다시 쓰는 방법은 다음과 같습니다.

const points = [80,100,75]
const bonusPoints = points.map( item => item += 10 )
// our new array logged
console.log(bonusPoints)
// the array we mapped over still equals the same as when it was first declared
console.log(points)

보십시오. BonuPoints는 새로운 변수입니다. 맵 방법은 두 번째 줄의 오른쪽에 있습니다.그리고 우리는 숫자가 10이 증가한 것을 기록했다.
참고로 bonusPoints를 매핑하는 데 사용되는 Points 배열을 기록했습니다.우리는 이 숫자들이 첫 줄에서 처음 성명했을 때의 숫자와 변화가 없다는 것을 보았다.그것은 그것들이 수정된 적이 없기 때문이다.

다시 한 번

만약 숫자 그룹이 있다면, 10보다 작은 모든 검사를 저장할 새로운 변수를 만들고 싶습니다.당신이 어떻게 이 점을 해냈는지 봅시다.

const someNumbers = [4,7,8,11,14]
const lessThanTen = someNumbers.map( item => item < 10 )
console.log(lessThanTen)

우리는 앞의 세 개의 숫자가 10보다 작다는 것을 보았다. 왜냐하면 그것들의 브리 값은 진짜이기 때문이다. 그러나 뒤의 두 개의 숫자는 10보다 크다.

지세

다음은 맵() 방법을 사용할 때 고려해야 할 몇 가지 규칙입니다.

새 그룹을 만들 때만 맵 방법 사용하기

콜백 방법

에서 값을 반환하는 경우에만 사용
따라서 맵으로 되돌아오는 그룹이 없으면 맵을 사용하는 것을 권장하지 않는다는 것이다.

Map () 은 소규모 공장일 수도 있다

ID 구성 요소가 있다고 가정하면 다음과 같습니다.

function userCard(data) {
  return `<div class="card">
  <img src="${data.picture.large}" alt="Avatar" class="image">
  <div class="container">
    <h4><b>${data.name.first} ${data.name.last}</b></h4>
    <p>${data.email}</p>
  </div>
</div>`;
}

만약 우리가 일곱 개의 개인 정보를 저장한 대상 그룹이 있다면우리는 화면에 일곱 장의 신분증을 표시해야 한다.만약 우리가 7개의 신분증 구성 요소를 복사하여 HTML 페이지에 붙인다면, 대량의 관리가 필요하다.하나의 구성 요소로 하여금 그것들의 외관을 결정하게 하는 것은 좋지 않습니까?
구조지도 입장!

let cards = people.map((item) => userCard(item));
div.innerHTML = cards.join(" ");

맵 방법으로 그룹을 옮겨다니도록 허용함으로써 새 그룹을 만들었습니다.그런 다음 innerHtml을 통해 이 배열을 DOM에 렌더링합니다.
Check out the GitHub for this example.
React 사용자는 동일한 구성 요소를 쉽게 반환할 수 있습니다.

본영으로 돌아가다

맵 방법을 요약하면 새 그룹을 만들고, 맵에 전달되는 리셋 함수에 따라 항목을 채웁니다.너는 지도 사용 방법이 매우 편안하다고 느낄 것이다.나는 이 지도 실지 안내서가 네가 개발자가 되는 것을 도울 수 있기를 바란다.
이게 진흙처럼 뚜렷한지 알려주세요.나는 너를 위해 일을 분명히 하기를 매우 기쁘게 생각한다D
기억해라, 모험은 바로 거기에 있다!
사진 작성자Matilda Vistbacka가 Unsplash