array.map(): 더 나은 방법 🧐 ?

The method map() creates a new array with the values that get returned by calling the function provided to map(anyFunctionHere) on every element of an array.

map()가 실행되는 배열은 호출 배열로 명명됩니다.

일

이름이 반대인 배열이 주어지면 원래 배열에서 이름의 위치는 같지만 이름을 반대로(이해해야 함) 새 배열을 만듭니다.
for-loop 를 사용하여 어떻게 해결할 수 있는지 살펴보겠습니다.

const arrayOfNames = ['anhsirK', 'nosaJ', 'nolE', 'drawdE'];

let arrayOfReversedNames = []; // declaring an empty array to store results.

for (let nameIndex = 0; nameIndex < arrayOfNames.length; nameIndex = nameIndex + 1) {
  // we can reverse a string in JavaScript with String.split("").reverse().join("")
  const reversedFirstName = arrayOfNames[nameIndex].split('').reverse().join('');
  arrayOfReversedNames.push(reversedFirstName);
}

// output: [ 'Krishna', 'Jason', 'Elon', 'Edward' ]

위의 예에서는 arrayOfReversedNames를 선언한 다음 계산된 역방향 이름을 해당 배열에 추가했습니다.

동일한 문제를 map() 방법을 사용하여 해결할 때입니다.

const arrayOfNames = ['anhsirK', 'nosaJ', 'nolE', 'drawdE'];

// declaring an empty array to store results.
let arrayOfReversedNames = arrayOfNames.map((firstName) => {
  return firstName.split("").reverse().join("")
}); 

// arrayOfReversedNames: [ 'Krishna', 'Jason', 'Elon', 'Edward' ]

인수 map() 와 함께 arrow function 을 firstName 로 전달합니다. firstName는 호출 배열의 요소에 대한 각 반복에서 다른 값을 갖습니다. 여기 첫 번째 반복에서 firstName 값은 두 번째 반복에서 anhsirK , nosaJ 가 되는 식입니다... map()도 동일한 반복을 수행하기 때문에 동일한 결과를 얻는 것이 분명합니다. for-loop 하고 있었다.

이 시점에서 두 메서드가 호출하는 배열의 요소에 대해 반복하는 것과 동일한 작업을 수행하는지 묻습니다. for-loop 대신 map()를 사용해야 하지 않습니까? 더 읽기 쉽고 거기에서 수행되는 작업을 명시적으로 설명합니다.

예, 아니요.

for-loop보다 map() 사용의 이점

더 적은 코드 줄 - 대부분 더 좋습니다!

map() 에 전달된 함수의 인수를 사용하여 호출 배열의 개별 요소에 직접 액세스할 수 있습니다. callingArray[someIndex] 를 사용하여 항상 값을 얻는 것보다 훨씬 쉽습니다.

배열의 모든 요소가 map()로 반복된다는 확실성 - 더 이상 for-loop 내부의 잘못된 인덱스를 처리하지 않습니다.

하루가 끝날 때 우리가 알고 있는 것은 배열이 있고 해당 배열의 모든 요소를 ​​처리하고 새 배열에 값을 저장하려는 경우 map() 가야 한다는 것뿐입니다.


이것은 원래 작성되었습니다 at my blog


편집하다:

MDN에 따라 사용하지 않는 위치map()에 대한 자세한 정보를 얻으려면 이 게시물에 대한 댓글을 확인하세요.