JavaScript 맵을 사용하는 방법 - .map()

클래식 for 루프부터 forEach() 메서드까지 다양한 기법과 메서드를 사용하여 JavaScript의 데이터세트를 반복합니다. 가장 널리 사용되는 방법 중 하나는 .map() 방법입니다. .map()은 상위 배열의 각 항목에 대해 특정 함수를 호출하여 배열을 만듭니다. .지도() 새로운 js 배열을 생성하는 비변이 메서드입니다. 호출 배열만 변경하는 돌연변이 메서드.

이 메서드는 배열 작업 시 다양한 용도로 사용될 수 있습니다. 이 튜토리얼에서는 .map()의 주목할만한 네 가지 용도를 살펴보겠습니다. JavaScript: 배열 요소의 함수 호출, 문자열 변환 배열, JavaScript 라이브러리의 목록 렌더링 및 형식 재지정 배열 객체.

배열의 각 항목에 대해 JS 함수를 호출하는 방법

.map()은 콜백 함수를 허용합니다. 인수 중 하나로 해당 함수의 중요한 매개변수는 다음과 같습니다. 함수에 의해 처리되고 있는 항목의 현재 값입니다. 이것은 필수 매개변수. 이 매개변수를 사용하면 배열을 생성하고 이를 새 배열의 수정된 구성원으로 반환합니다.

예는 다음과 같습니다.

const sweetArray = [2, 3, 4, 5, 35]const sweeterArray = sweetArray.map(sweetItem => {
    return sweetItem * 2})console.log(sweeterArray)

이 출력은 다음에 기록됩니다. 콘솔:

Output[ 4, 6, 8, 10, 70 ]

다음을 사용하여 더욱 단순화하여 더 깔끔하게 만들 수 있습니다.

// create a function to use
const makeSweeter = sweetItem => sweetItem * 2;
// we have an array
const sweetArray = [2, 3, 4, 5, 35];
// call the function we made. more readable
const sweeterArray = sweetArray.map(makeSweeter);
console.log(sweeterArray);

동일한 출력이 콘솔:

Output[ 4, 6, 8, 10, 70 ]

sweetArray.map(makeSweeter)과 같은 코드를 사용하면 코드를 좀 더 읽기 쉽게 만들 수 있습니다.

JS 문자열을 배열로 변환하는 방법

.map()은 배열 프로토타입에 속하는 것으로 알려져 있습니다. ~ 안에 이 단계에서는 이를 사용하여 문자열을 배열로 변환합니다. 당신은 그렇지 않습니다 여기에서 문자열 작업 방법을 개발합니다. 오히려, 당신은 특별한 .call() 메소드.

JavaScript의 모든 것은 객체이고, 메소드는 이러한 객체에 첨부된 함수입니다. .call()을 사용하면 한 객체의 컨텍스트를 다른 객체에서 사용할 수 있습니다. 따라서 배열의 .map() 컨텍스트를 문자열로 복사하게 됩니다.

.call()은 사용할 컨텍스트의 인수와 원래 함수의 인수에 대한 매개변수로 전달될 수 있습니다. .

다음은 예:

const name = "Sammy"
const map = Array.prototype.map
const newName = map.call(name, eachLetter => {
    return `${eachLetter}a`})
console.log(newName)

이 출력은 콘솔에 기록됩니다.

const sweetArray = [2, 3, 4, 5, 35]const sweeterArray = sweetArray.map(sweetItem => {
    return sweetItem * 2})console.log(sweeterArray)

여기에서는 문자열에 .map() 컨텍스트를 사용하고 .map()이 기대하는 함수의 인수를 전달했습니다.

이는 다음의 .split() 메서드와 유사하게 작동합니다. 단, 각 개별 문자열 문자는 배열로 반환되기 전에 수정될 수 있습니다.

JavaScript에서 목록을 렌더링하는 방법 라이브러리

React와 같은 JavaScript 라이브러리는 .map()을 사용하여 목록의 항목을 렌더링합니다. 그러나 .map() 메서드가 JSX 구문으로 래핑되므로 JSX 구문이 필요합니다.

다음은 React 구성 요소의 예입니다.

Output[ 4, 6, 8, 10, 70 ]

이것은 목록이 포함된 div를 렌더링하는 React의 상태 비저장 구성 요소입니다. 개별 목록 항목은 .map()을 사용하여 렌더링되어 이름 배열을 반복합니다. 이 구성 요소는 ID가 루트인 DOM 요소에서 ReactDOM을 사용하여 렌더링됩니다.

JavaScript 배열 객체를 다시 포맷하는 방법

.map()을 사용하여 객체를 반복할 수 있습니다. 배열을 수정하고 기존 배열과 비슷한 방식으로 각 개별 객체의 내용을 저장하고 새 배열을 반환합니다. 이것 콜백 함수에서 반환된 내용에 따라 수정이 수행됩니다.

예:

// create a function to use
const makeSweeter = sweetItem => sweetItem * 2;
// we have an array
const sweetArray = [2, 3, 4, 5, 35];
// call the function we made. more readable
const sweeterArray = sweetArray.map(makeSweeter);
console.log(sweeterArray);

이 출력은 다음에 기록됩니다. console:

Output[ 4, 6, 8, 10, 70 ]

여기서 대괄호와 점을 사용하여 배열의 각 객체를 수정했습니다. 표기법. 이 사용 사례는 수신된 데이터를 처리하거나 압축하는 데 사용될 수 있습니다. 프런트엔드 애플리케이션에서 저장되거나 구문 분석되기 전의 데이터입니다.

위 내용은 JavaScript 맵을 사용하는 방법 - .map()의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!