우리의 일상 개발에서 운영 및 변환 배열은 매우 일반적인 작업입니다. 예를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
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],
format = function (color) {
Return Math.round (Color / 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 format = function (color) {
Return 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);
위의 예에서, 우리는 MAP를 사용하여 For Loop Part를 대체하여 각 요소 자체의 구현 로직에 대해서만 관리해야한다는 것을 알 수 있습니다. 지도 방법에 대한 자세한 내용은 여기를 클릭하십시오.
1. 기본 정의 맵 :
Array.map (콜백 [, thisarg]);
맵 메소드는 원래 배열의 각 요소에 대해 콜백 함수를 한 번 호출합니다. 콜백 각 실행 후 리턴 값이 결합되어 새 배열을 형성합니다. 콜백 함수는 값이있는 인덱스에서만 호출됩니다. 값이 할당되지 않았거나 삭제로 삭제 된 인덱스는 호출되지 않습니다.
콜백 함수는 배열 요소, 요소 인덱스 및 원래 배열 자체의 세 가지 매개 변수로 자동 전달됩니다.
이 ARG 매개 변수에 값이 있으면 콜백 함수가 호출 될 때 마다이 ARG 매개 변수 에서이 객체를 가리 킵니다. 이 ARG 매개 변수를 생략하거나 값이 NULL 또는 정의되지 않은 상태로 지정되면 글로벌 오브젝트를 가리 킵니다.
MAP은 호출하는 원래 배열 자체를 수정하지 않습니다 (물론 콜백이 실행될 때 원래 배열을 변경할 수 있습니다).
배열이 맵 메소드를 실행하면 첫 번째 콜백 메소드가 호출되기 전에 배열의 길이가 결정됩니다. 맵 메소드의 전체 작동 중에 콜백 함수의 작업이 원래 배열에 요소를 추가하거나 삭제하는지 여부에 관계없이. 맵 메소드는 알지 못할 것입니다. 배열 요소가 증가하면 새로 추가 된 요소가 맵에 의해 통과되지 않습니다. 배열 요소가 감소하면 맵 메소드는 원래 배열의 길이가 변경되지 않았다고 생각하여 배열이 아웃 바운드에 액세스 할 수 있습니다. 배열의 요소가 변경되거나 삭제되면 콜백으로 전달되는 값은 모멘트로 이동하는 맵 메소드의 값입니다.
2. 맵 인스턴스 :
코드 사본은 다음과 같습니다.
// 예제 1 : 문자열에서 맵 메소드를 호출합니다
var result = array.prototype.map.call ( "hello world", function (x, index, arr) {
// 문자열 {0 : "h", 1 : "e", 2 : "l", 3 : "l", 4 : "o", 4 : "o", 5 : ", 6 :"w ", 7 :"o ", 8 :"r ", 9 :"l ","d ", 길이 : 11}
Console.log (ARR);
X.charcodeat (0)를 반환합니다.
});
// 출력 : [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]
Console.log (결과);
위의 예는 문자열에서 맵 메소드를 사용하여 문자열의 각 문자에 해당하는 ASCII 코드 배열을 얻는 것을 보여줍니다. 인쇄 된 Console.log (ARR)의 인쇄 결과에주의를 기울이십시오.
코드 사본은 다음과 같습니다.
// 예제 2 : 다음 작업의 결과는 무엇입니까?
var result = [ "1", "2", "3"].지도 (parseint);
// 출력 : [1, Nan, Nan]
Console.log (결과);
어쩌면 당신은 질문이있을 것입니다. 왜 [1,2,3]? Parseint 방법은 두 개의 매개 변수를받을 수 있음을 알고 있습니다. 첫 번째 매개 변수는 변환 해야하는 값이며, 두 번째 매개 변수는 이진의 수입니다. 이해하지 못하면 여기를 클릭하십시오. 맵 메소드를 사용하면 콜백 함수는 세 가지 매개 변수를 수신하고 ParseInt는 최대 두 개의 매개 변수 만받을 수 있으므로 세 번째 매개 변수는 직접 폐기됩니다. 동시에 Parseint는 전달 된 인덱스 값을 이진수로 사용하여 NAN을 반환합니다. 다음 출력 결과를보십시오.
코드 사본은 다음과 같습니다.
// oUputs : 1
console.log (parseint ( "1", 0));
// oUputs : 1
console.log (parseint ( "1", undefined));
// oUputs : nan
Console.log (parseint ( "2", 1));
// oUputs : nan
Console.log (parseint ( "3", 2));
마지막 두 사람은 이해하기 쉽지만 왜 처음 두 개가 1을 반환합니까? 이 문제를 설명하려면 공식 설명을 살펴 보겠습니다.
Radix가 정의되지 않은 경우 또는 0 (또는 결석) 인 경우 JavaScript가 다음을 가정합니다.
a) 입력 문자열이 "0x"또는 "0x"로 시작하면 radix는 16 (16 진수)이고 나머지는 문자열이 구문 분석됩니다.
B) 입력 문자열이 "0"으로 시작되면 Radix는 8 (Octal) 또는 10 (10 진수)입니다. 정확히 어떤 Radix가 선택된 Radix는 구현에 따라 다릅니다. Ecmascript 5 사양 10 (10 진)가 사용되지만 모든 브라우저가 아직 지원하지는 않습니다.이 이유로 Parseint를 사용할 때 항상 Radix를 지정합니다.
c) 입력 문자열이 다른 값으로 시작하면 radix는 10 (소수)입니다.
세 번째 시점에서 문자열이 다른 값인 경우 기본값은 10입니다.
위의 예제 출력을 정상적으로 만들기 위해 어떻게 수정합니까? 다음 예를 참조하십시오.
코드 사본은 다음과 같습니다.
var result = [ "1", "2", "3"]. map (function (val) {
Parseint 리턴 (Val, 10);
});
// 출력 : [1, 2, 3]
Console.log (결과);
3. MAP 메소드 호환성 :
맵 방법은 IE8 및 아래 브라우저에서 지원되지 않습니다. 이전 버전의 브라우저와 호환하려면 다음을 수행 할 수 있습니다.
a) map 사용하지 마십시오 .B) ES5-Shim _.map 같은 것을 사용하여 이전 IE의 지원 map .
위는 맵 방법에 대한 이해입니다. 초보자에게 도움이되기를 바랍니다. 기사에 부적절한 요점이 있다면 수정할 수 있기를 바랍니다.