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()에 대한 자세한 정보를 얻으려면 이 게시물에 대한 댓글을 살펴보세요.