자바스크립트 배열의 맵 메소드를 사용하는 방법

JavaScript에서 배열의 map 메서드는 배열의 각 요소에 대해 지정된 콜백 함수를 호출하고 결과가 포함된 배열을 반환하는 데 사용됩니다. 구문 형식은 "array.map(callbackfn[, thisArg]);"입니다. .

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript map() 메서드는 배열의 각 요소에 대해 지정된 콜백 함수를 호출하고 결과가 포함된 배열을 반환할 수 있습니다. 구체적인 사용법은 다음과 같습니다.

array.map(callbackfn[, thisArg]);

매개변수 설명:

• array: 필수 매개변수, 배열 객체.

• callbackfn: 필수 매개변수, 최대 3개의 매개변수를 받을 수 있는 함수. 배열의 각 요소에 대해 map() 메서드는 callbackfn 함수를 한 번 호출합니다.

• thisArg: 선택적 매개변수로, callbackfn 함수에서 this 키워드로 참조할 수 있는 객체입니다. thisArg를 생략하면 정의되지 않은 값이 this 값으로 사용됩니다.

map() 메서드는 각 요소가 연결된 원래 배열 요소의 콜백 함수 반환 값인 새 배열을 반환합니다. map() 메서드는 배열의 각 요소에 대해(인덱스 오름차순) 한 번씩 callbackfn 함수를 호출하고 배열에서 누락된 요소에 대해서는 콜백 함수를 호출하지 않습니다.

배열 객체 외에도 Arguments 매개변수 객체와 같이 색인화된 속성 이름이 있는 길이 속성이 있는 모든 객체에서 map() 메서드를 사용할 수 있습니다.

콜백 함수의 구문은 다음과 같습니다.

function callbackfn (value, index, array);

사용자는 최대 3개의 매개변수로 콜백 함수를 선언할 수 있습니다. 콜백 함수의 매개변수에 대한 설명은 다음과 같습니다.

• value: 배열 요소의 값.

• index: 배열 요소의 숫자 인덱스입니다.

• array: 요소를 포함하는 배열 객체입니다.

map() 메서드는 원래 배열을 직접 수정하지 않지만 콜백 함수는 이를 수정할 수 있습니다. map 메소드가 시작된 후 배열 객체를 수정한 결과는 표에 나와 있습니다.

배열을 수정하는 콜백 함수의 영향

맵 메서드 시작 후 조건	요소가 콜백 함수에 전달되는지 여부
배열의 원래 길이를 초과하는 요소 추가	아니요
요소를 추가하여 배열에서 누락된 요소 채우기	예, 인덱스가 콜백 함수에 전달되지 않은 경우
요소가 변경되었습니다.	예, 요소가 콜백 함수에 전달되지 않은 경우 콜백 함수
배열에서 요소 제거	아니요, 요소가 콜백 함수에 전달되지 않은 경우

예제 1

다음 예에서는 map() 메서드를 사용하여 배열을 매핑합니다. , 배열의 각 요소의 값을 제곱하고 PI 값을 곱한 후 반환된 원 값의 면적을 새 배열의 요소 값으로 계산하고 최종적으로 이 새 배열을 반환합니다.

function f (radius) {
    var area = Math.PI * (radius * radius);
    return area.toFixed(0);
}
var a = [10,20,30];
var a1 = a.map(f);
console.log(a1);

예제 2

다음 예에서는 map() 메서드를 사용하여 배열을 매핑하고 배열의 각 요소 값을 임계값으로 나눈 다음 이 새 배열을 반환합니다. 콜백 함수와 임계값은 다음과 같습니다. 이 메소드는 맵에서 thisArg 매개변수를 사용하는 방법을 보여줍니다.

var obj = {
    val : 10,
    f : function (value) {
        return value % this.val;
    }
}
var a = [6,12,25,30];
var a1 = a.map(obj.f, obj);
console.log(a1);  //6,2,5,0

예제 3

다음 예에서는 JavaScript 내장 메서드를 콜백 함수로 사용하는 방법을 보여줍니다.

var a = [9, 16];
var a1 = a.map(Math.sqrt);
console.log(a1);  //3,4

【추천 학습: javascript 고급 튜토리얼】

위 내용은 자바스크립트 배열의 맵 메소드를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!