jquery.map()メソッド_jqueryの使い方の詳細説明

プロトタイプ メソッド マップはそれぞれに似ており、同じ名前の静的メソッドを呼び出します。ただし、返されるデータは、返される前に別のプロトタイプ メソッドの PushStack メソッドによって処理される必要がある点が異なります。ソース コードは次のとおりです。

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

この記事では主に静的マップメソッドを分析します。pushStack については次のエッセイで分析します。

まずはマップの使い方を理解する(マニュアル内容)

$.map は、ある配列の要素を別の配列に変換します。

パラメータとしての変換関数は配列要素ごとに呼び出され、変換関数には変換される要素を表すパラメータが渡されます。

変換関数は、変換された値、null (配列から項目を削除)、または元の配列に展開された値を含む配列を返すことができます。

パラメータ

arrayOrObject,callbackArray/Object,FunctionV1.6

arrayOrObject: 配列またはオブジェクト。

は配列要素ごとに呼び出され、変換関数には変換される要素を表すパラメーターが渡されます。

関数は任意の値を返すことができます。

この関数は文字列に設定することもできます。文字列に設定すると、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]

map メソッドは、配列の各オブジェクトまたは「項目」をループしてコールバック関数を実行し、配列またはオブジェクトを操作するという点で各メソッドと似ていることがわかりますが、2 つのメソッドには多くの違いもあります

たとえば、 each() は元の配列を返し、新しい配列を作成しませんが、map は新しい配列を作成します。各走査は、これが現在の配列またはオブジェクトの値を指し、map がウィンドウを指すことを意味します。ソース コードでは、それぞれの

のようなオブジェクトの偽装は使用されていません。

例:

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 演算子の最初に括弧が実行され、次に論理 AND>論理 OR>一致>割り当てが実行され、その後

を分析できます。

最初に括弧内で計算し、その結果に length !== unknown と typeof length === "number を追加します。これら 2 つの必要な条件の最終結果は、jQuery の elems インスタンスと論理 OR されます。簡単に言うと、isArray です。該当する状況には次のようなものがあります:

1. jQuery の elems インスタンスは true、つまり、jquery オブジェクトです

2. 長さ !== 未定義 && 長さ === "数値" > elems[ 0 ] && elems[ length -1 ] ) || jQuery.isArray( elems) これら 3 つのうち少なくとも 1 つは確立されています

3 つの小さな状況に分割できます

length が存在し、数値であり、走査される配列または配列のようなオブジェクトの長さ属性が 0 より大きいです。 length-1 が存在するため、jquery オブジェクトや domList オブジェクトなどを走査できることが保証されます。 、など

length が存在し、数値であり、length 属性は 0 に等しい。0 の場合は問題なく、走査されない。

長さが存在し、数値であり、トラバースされるオブジェクトは純粋な配列です

これらの条件を満たした後、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 パラメータは、このメソッドの内部で使用されるパラメータです。他の jquery メソッドと非常によく似ていますが、コールバック関数の実行時に null が返されない限り、実行によって返された結果は新しい配列に追加され、オブジェクト操作についても同様であり、

最後に、結果セットがフラット化されるのはなぜですか? Map は配列を展開できるため、前の 3 番目の例がこれに当てはまります:

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

この方法で使用した場合、取得される新しい配列は 2 次元配列になるため、次元を減らす必要があります

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

ret.concat.apply([], ret) は [].concat.apply([], ret) と同等です。apply の 2 番目のパラメータは ret 配列を複数のパラメータに分割するためです。それを concat に渡して 2 次元配列を 1 次元配列に変換することは、収集する価値があります

map メソッドの簡単な分析が完了しました。機能が限られているため、間違いがあれば修正していただければ幸いです。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。