Javascript_Basic 지식 중 Array.prototype.map()에 대한 자세한 설명

일상적인 개발에서 배열을 운영하고 변환하는 것은 매우 일반적인 작업입니다. 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

var desColors = [],
srcColors = [
{r: 255, g: 255, b: 255}, // 흰색
{r: 128, g: 128, b: 128}, // 회색
{r: 0, g: 0, b: 0} // 검정색
];

for (var i = 0, ilen = srcColors.length; i < ilen; i ) {
var color = srcColors[i],
형식 = 함수(색상) {
               Math.round(색상 / 2)를 반환합니다.
        };

desColors.push( {
r: 형식(color.r),
g: 형식(color.g),
           b: 형식(color.b)
});
}

// 출력:
// [
// {r: 128, g: 128, b: 128},
// {r: 64, g: 64, b: 64 },
// {r:0, g:0, b:0 }
// ];
console.log(desColors);

위 예에서 볼 수 있듯이 모든 작업의 ​​반복률은 상대적으로 높습니다. 어떻게 최적화하나요? 다행히 Ecmascript 5는 위 예를 최적화하는 데 사용할 수 있는 맵 방법을 제공합니다.

코드 복사 코드는 다음과 같습니다.

var srcColors = [
{r: 255, g: 255, b: 255}, // 흰색
{r: 128, g: 128, b: 128}, // 회색
{r: 0, g: 0, b: 0} // 검정색
],
DesColors = srcColors.map(function(val) {
         var 형식 = 기능(색상) {
               Math.round(color/2)를 반환합니다.
        };
         반품 {
             r: 형식(val.r),
g: 형식(val.g),
                b: 형식(val.b)
}
});
// 출력:
// [
// {r: 128, g: 128, b: 128},
// {r: 64, g: 64, b: 64 },
// {r:0, g:0, b:0 }
// ];
console.log(desColors);

위의 예에서 볼 수 있듯이 for 루프 부분을 대체하기 위해 map을 사용하므로 각 요소 자체의 구현 로직에만 신경 쓰면 됩니다. 지도 방법에 대한 자세한 내용을 보려면 여기를 클릭하세요.

1.map 기본 정의:
array.map(callback[, thisArg]);

map 메소드는 원래 배열의 각 요소에 대해 순서대로 한 번씩 콜백 함수를 호출합니다. 각 콜백 실행 후 반환 값이 결합되어 새로운 배열을 형성합니다. 콜백 함수는 값이 있는 인덱스에서만 호출됩니다. 값이 할당되지 않았거나 삭제를 사용하여 삭제된 인덱스는 호출되지 않습니다.

콜백 함수는 배열 요소, 요소 인덱스, 원본 배열 자체라는 세 가지 매개변수로 자동으로 전달됩니다.

thisArg 매개변수에 값이 있으면 콜백 함수가 호출될 때마다 thisArg 매개변수의 객체를 가리킵니다. thisArg 매개변수가 생략되거나 null 또는 정의되지 않은 상태로 할당되면 전역 개체를 가리킵니다.

map은 원본 배열 자체를 수정하지 않습니다(물론 콜백이 실행될 때 원본 배열이 변경될 수 있습니다).

배열에서 맵 메소드가 실행되면 첫 번째 콜백 메소드가 호출되기 전에 배열의 길이가 결정됩니다. 콜백 함수의 작업이 원래 배열에 요소를 추가하거나 삭제하는지 여부에 관계없이 맵 메소드의 전체 실행 프로세스 동안. 맵 메소드는 배열 요소가 증가하면 새로 추가된 요소가 맵에 의해 탐색되지 않는다는 사실을 알지 못합니다. 배열 요소가 감소하면 맵 메소드도 원래 배열의 길이가 변경되지 않았다고 생각합니다. 범위를 벗어난 배열 액세스. 배열의 요소가 변경되거나 삭제되면 콜백에 전달되는 해당 값은 map 메소드가 해당 요소를 탐색하는 순간의 값입니다.

2.map 인스턴스:

코드 복사 코드는 다음과 같습니다.

//예제 1: 문자열에 대해 map 메소드 호출
var result = Array.prototype.map.call("Hello world", function(x, index, arr) {
//문자열 {0: "H", 1: "e", 2: "l", 3: "l", 4: "o", 5: " ", 6: "w", 7: "o" , 8: "r", 9: "l", 10: "d", 길이: 11}
console.log(arr);
x.charCodeAt(0)을 반환합니다.
});
//출력: [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]
console.log(결과);

위의 예에서는 문자열의 각 문자에 해당하는 ASCII 코드로 구성된 배열을 얻기 위해 문자열에 대해 map 메소드를 사용하는 방법을 보여줍니다. console.log(arr)에 의해 출력된 결과에 주의하세요.

코드 복사 코드는 다음과 같습니다.

//예제 2: 다음 작업의 결과는 무엇입니까?
var 결과 = ["1", "2", "3"].map(parseInt);
//출력: [1, NaN, NaN]
console.log(결과);

질문이 있으신가요? [1,2,3]은(는) 어떻습니까? parseInt 메소드는 두 개의 매개변수를 받을 수 있다는 것을 알고 있습니다. 첫 번째 매개변수는 변환해야 하는 값이고, 두 번째 매개변수는 기본 숫자입니다. 이해가 안 되시면 여기를 클릭하세요. map 메소드를 사용할 때 콜백 함수는 세 개의 매개변수를 받는 반면,parseInt는 최대 두 개의 매개변수만 받을 수 있으므로 동시에 세 번째 매개변수는 직접 삭제됩니다. 따라서 NaN을 반환합니다. 아래 출력을 살펴보세요.

코드 복사 코드는 다음과 같습니다.

//출력: 1
console.log(parseInt("1", 0));
//출력: 1
console.log(parseInt("1", 정의되지 않음));
//출력: NaN
console.log(parseInt("2", 1));
//출력: NaN
console.log(parseInt("3", 2));

마지막 두 개는 이해하기 쉽지만 처음 두 개는 왜 1을 반환합니까? 이 문제를 설명하기 위해 공식 설명을 살펴보겠습니다.
radix가 정의되지 않거나 0(또는 부재)인 경우 JavaScript는 다음을 가정합니다.
a) 입력 문자열이 "0x" 또는 "0X"로 시작하는 경우 radix는 ​​16(16진수)이고 문자열의 나머지 부분이 구문 분석됩니다.
b) 입력 문자열이 "0"으로 시작하는 경우 기수는 8(8진수) 또는 10(10진수)입니다. 정확히 어떤 기수가 선택되는지는 구현에 따라 다르지만 ECMAScript 5에서는 10(10진수)이 사용되도록 지정합니다. 아직 모든 브라우저가 이를 지원하는 것은 아닙니다. 따라서parseInt를 사용할 때 항상 기수를 지정하십시오.
c) 입력 문자열이 다른 값으로 시작하는 경우 기수는 10(십진수)입니다.
세 번째 지점에서 문자열이 다른 값인 경우 기본값은 10입니다.

그럼 위의 예시가 정상적으로 출력되도록 하려면 어떻게 수정해야 할까요? 다음 예를 살펴보세요.

코드 복사 코드는 다음과 같습니다.

var 결과 = ["1", "2", "3"].map(function(val) {
반환 parInt(val, 10);
});
//출력: [1, 2, 3]
console.log(결과);

3.지도 방식의 호환성:
IE8 이하 브라우저에서는 지도 방법이 지원되지 않습니다. 이전 버전의 브라우저와 호환되도록 하려면 다음을 수행하세요.

a) <font face="NSimsun">map</font>을 사용하지 마세요.b) 이전 IE를 지원하려면 es5-shim과 같은 것을 사용하세요 <font face="NSimsun">map</font>.c) 동등한 유틸리티 기능을 위해 Underscore 또는 Lodash에서 <font face="NSimsun">_.map</font> 메소드를 사용하세요.

위 내용은 지도 방법에 대한 저의 이해입니다. 초보자에게 도움이 되기를 바랍니다. 기사에 잘못된 부분이 있으면 바로잡기를 바랍니다.