jquery.map () 방법의 사용 상세 설명

원형 방법 맵은 each와 유사하게 같은 이름의 정적 방법으로 호출되며, 되돌아온 데이터는 다른 원형 방법인 pushStack 방법으로 처리된 후에야 되돌아옵니다. 원본은 다음과 같습니다.

map: function( callback ) {
    return this.pushStack( jQuery.map(this, function( elem, i ) {
      return callback.call( elem, i, elem );
    }));
  },

본고는 주로 정적 맵을 분석하는 방법으로pushStack을 다음 수필에서 분석하고자 한다.
먼저 맵의 사용에 대해 알아보기 (매뉴얼 내용)
$.맵은 한 그룹의 요소를 다른 그룹으로 변환합니다.
매개 변수로서의 변환 함수는 모든 수조 요소에 호출되며, 이 변환 함수에 변환된 요소를 매개 변수로 전달합니다.
변환 함수는 변환된 값,null (수조의 항목 삭제) 또는 값을 포함하는 수조를 되돌려주고 원시 수조로 확장할 수 있습니다.
매개 변수array OrObject,callbackArray/Object,FunctionV1.6array OrObject:수조 또는 대상.
모든 수조 요소를 호출하고, 이 변환 함수에 변환된 요소를 매개 변수로 전달합니다.
함수는 모든 값을 되돌려줍니다.
또한 이 함수는 문자열로 설정할 수 있습니다. 문자열로 설정할 때 "lambda-form"(줄임말?) 으로 간주됩니다.그 중에서 a는 수조 원소를 대표한다.
예를 들어'a*a'는'function(a){return a*a;}'를 대표한다.
예 1:

//  4  。
//jQuery  :
$.map( [0,1,2], function(n){
 return n + 4;
});
// :
[4, 5, 6]

예 2:

//  0   1 ， 。
//jQuery  :
$.map( [0,1,2], function(n){
 return n > 0 ? n + 1 : null;
});
// :
[2, 3]

예 3:

//  1  ， 
//jQuery  :
$.map( [0,1,2], function(n){
 return [ n, n + 1 ];
});
// :
[0, 1, 1, 2, 2, 3]

맵 방법은 each 방법과 유사하게 모든 대상이나 수조의'항목'을 순환하여 리셋 함수를 실행하여 수조나 대상에 대한 조작을 실현하는 것을 알 수 있지만 이 두 가지 방법도 많은 차이점이 있다
예를 들어 each()는 원래의 그룹을 되돌려줍니다. 그룹을 새로 만들지 않고 맵은 새로운 그룹을 만듭니다.each는 현재 그룹이나 대상 값을 가리키고,map은 윈도우를 가리킨다. 원본 코드에서 each처럼 대상을 사칭하지 않기 때문이다.
예:

var items = [1,2,3,4]; 
$.each(items, function() { 
alert('this is ' + this); 
}); 
var newItems = $.map(items, function(i) { 
return i + 1; 
}); 
// newItems is [2,3,4,5]
// each ， items ， map ， items， 。

var items = [0,1,2,3,4,5,6,7,8,9]; 
var itemsLessThanEqualFive = $.map(items, function(i) { 
// removes all items > 5 
if (i > 5) 
　　return null; 
　　return i; 
}); 
// itemsLessThanEqualFive = [0,1,2,3,4,5]

본론으로 돌아가다

// arg is for internal usage only
  map: function( elems, callback, arg ) {
    var value, key, ret = [],
      i = 0,
      length = elems.length,
      // jquery objects are treated as arrays
      isArray = elems instanceof jQuery || length !== undefined && typeof length === "number" && ( ( length > 0 && elems[ 0 ] && elems[ length -1 ] ) || length === 0 || jQuery.isArray( elems ) ) ;

    // Go through the array, translating each of the items to their
    if ( isArray ) {
      for ( ; i < length; i++ ) {
        value = callback( elems[ i ], i, arg );

        if ( value != null ) {
          ret[ ret.length ] = value;
        }
      }

    // Go through every key on the object,
    } else {
      for ( key in elems ) {
        value = callback( elems[ key ], key, arg );

        if ( value != null ) {
          ret[ ret.length ] = value;
        }
      }
    }

    // Flatten any nested arrays
    return ret.concat.apply( [], ret );
  },

우선 몇 개의 변수를 설명하여 다음 흐름을 위해 준비를 해야 한다. 그 중에서 jsArray 변수는 대상과 수조를 간단하게 구분하는 데 쓰인다. 이 볼 복합 표현식은 비교적 길지만 js 연산자의 우선순위가 있다는 것을 기억하면 이해하기 어렵지 않다. 우선 괄호가 우선적으로 집행되고 그 다음은 논리와 논리 또는 전등의 값을 부여한 다음에 분석할 수 있다.
우선 괄호 안에 먼저 계산하고 그 결과에length!==undefined, typeof length ==="number라는 두 가지 필수 조건의 마지막 결과는 elems instanceof jQuery와 논리적 또는 연산을 한다. 간단하게 말하면 isArray가 진짜인 경우 다음과 같다.
1、elems instance of jQuery를 true로 바꾸면 jquery 대상입니다.
2、length !== undefined & & typeof length ==='number'및length > 0 & & elems[0] & & elems[length-1])|length === 0 | jQuery.isArray(elems) 이 세 개는 적어도 하나
세 개의 작은 상황으로 분할 가능
length는 존재하고 숫자이며 두루 훑어볼 수 있는 그룹이나 클래스 그룹 등 length 속성이 0length-1보다 크면 두루 훑어볼 수 있습니다. 예를 들어 jquery 대상domList 대상 등
length는 존재하고 숫자이며 length 속성은 0입니다. 0이면 상관없습니다.
length는 존재하고 숫자이며 반복 대상은 순수 그룹입니다.
이러한 조건을 만족시킨 후부터 isArray의 결과에 따라 나누어 훑어보기 시작하고'수조'는 for순환을 사용하고 대상은 for...in 순환

// Go through the array, translating each of the items to their
    if ( isArray ) {
      for ( ; i < length; i++ ) {
        value = callback( elems[ i ], i, arg );

        if ( value != null ) {
          ret[ ret.length ] = value;
        }
      }

수조나 클래스 그룹을 만들 때 순환하는 모든 항목의 값과 바늘, 그리고arg 파라미터를 리셋 함수에 직접 전송하여 실행합니다. arg 파라미터는 이 방법 내부에서 사용하는 파라미터입니다. each 및 기타 jquery 방법과 비슷합니다. 리셋 함수를 실행할 때null로 돌아가지 않으면 리셋 결과를 새 그룹에 추가합니다. 대상 조작도 이렇게 직접적으로 생략합니다.

// Flatten any nested arrays
    return ret.concat.apply( [], ret );

마지막으로 결과를 편평하게 모으는데 왜 이런 단계가 있을까?맵은 확장할 수 있는 그룹이기 때문에 앞의 세 번째 예는 다음과 같다.

$.map( [0,1,2], function(n){
 return [ n, n + 1 ];
});

만약 이렇게 사용한다면 얻은 새 수조는 2차원 수조이기 때문에 반드시 차원을 낮춰야 한다
 ret.concat.apply([],ret)는 []와 같다.concat.apply([],ret)의 관건적인 역할은 apply입니다. 왜냐하면 apply의 두 번째 매개 변수는 ret의 수조를 여러 개의 매개 변수로 나누어 concat에 전송하여 2차원 수조를 1차원 수조로 전환시키는 이 용법은 소장할 가치가 있기 때문입니다.
맵 방법은 간단하게 분석을 마쳤습니다. 능력에 한계가 있는 잘못된 점은 많이 지적해 주십시오.
위에서 말한 것이 바로 본문의 전체 내용입니다. 여러분이 좋아하시기 바랍니다.