Penjelasan terperinci tentang penggunaan jquery.map() method_jquery

Peta kaedah prototaip adalah serupa dengan setiap satu dan memanggil kaedah statik dengan nama yang sama, kecuali data yang dikembalikan mesti diproses oleh kaedah pushStack kaedah prototaip lain sebelum mengembalikan kod sumber adalah seperti berikut:

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

Artikel ini terutamanya menganalisis kaedah peta statik Bagi pushStack, ia akan dianalisis dalam esei seterusnya;

Mula-mula faham penggunaan peta (kandungan manual)

$.map menukar elemen dalam satu tatasusunan kepada tatasusunan lain.

Fungsi penukaran sebagai parameter akan dipanggil untuk setiap elemen tatasusunan dan fungsi penukaran akan diberikan parameter yang mewakili elemen yang ditukar.

Fungsi penukaran boleh mengembalikan nilai yang ditukar, null (mengalih keluar item daripada tatasusunan) atau tatasusunan yang mengandungi nilai yang dikembangkan ke dalam tatasusunan asal.

Parameter

arrayOrObject,callbackArray/Object,FunctionV1.6
arrayOrObject: tatasusunan atau objek.

dipanggil untuk setiap elemen tatasusunan dan fungsi penukaran diberikan parameter yang mewakili elemen yang ditukar.

Fungsi boleh mengembalikan sebarang nilai.

Sebagai alternatif, fungsi ini boleh ditetapkan kepada rentetan dan apabila ditetapkan kepada rentetan, akan dianggap sebagai "lambda-form" (bentuk pendek?), dengan a mewakili elemen tatasusunan.

Sebagai contoh, "a * a" mewakili "fungsi(a){ return a * a; }".

Contoh 1:

//将原数组中每个元素加 4 转换为一个新数组。
//jQuery 代码:
$.map( [0,1,2], function(n){
 return n + 4;
});
//结果:
[4, 5, 6]

Contoh 2:

//原数组中大于 0 的元素加 1 ，否则删除。
//jQuery 代码:
$.map( [0,1,2], function(n){
 return n > 0 ? n + 1 : null;
});
//结果:
[2, 3]

Contoh 3:

//原数组中每个元素扩展为一个包含其本身和其值加 1 的数组，并转换为一个新数组
//jQuery 代码:
$.map( [0,1,2], function(n){
 return [ n, n + 1 ];
});
//结果:
[0, 1, 1, 2, 2, 3]

Ia boleh dilihat bahawa kaedah peta adalah serupa dengan setiap kaedah dengan menggelung melalui setiap objek atau "item" tatasusunan untuk melaksanakan fungsi panggil balik untuk mengendalikan tatasusunan atau objek, tetapi kedua-dua kaedah itu juga mempunyai banyak perbezaan

Sebagai contoh, setiap () mengembalikan tatasusunan asal dan tidak mencipta tatasusunan baharu, manakala peta mencipta tatasusunan baharu bermakna setiap traversal ini menghala ke tatasusunan semasa atau nilai objek, dan peta menghala ke tetingkap, kerana dalam Kod sumber tidak menggunakan penyamaran objek seperti setiap

Contohnya:

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]

Kembali ke kod sumber peta

// 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 );
  },

Mula-mula, isytiharkan beberapa pembolehubah untuk disediakan untuk traversal seterusnya Pembolehubah jsArray digunakan untuk membezakan objek dan tatasusunan ini agak panjang, tetapi ia tidak sukar untuk difahami selagi anda mengingati keutamaan daripada operator js, mula-mula kurungan dilaksanakan dahulu, kemudian tugasan logik AND>Logical OR>Congruent, dan kemudian anda boleh menganalisis

Mula-mula hitung dalam kurungan dan kemudian tambah panjang !== undefined dan jenis panjang === "nombor kepada hasil. Hasil akhir kedua-dua syarat yang diperlukan ini kemudian secara logik ATAU dengan elems instanceof jQuery. Ringkasnya, ia adalah Array Situasi yang benar termasuk:

1. elems instanceof jQuery adalah benar, dengan kata lain, ia adalah objek jquery

2. panjang !== tidak ditentukan && jenis panjang === "nombor" dan panjang > 0 && elem[ panjang -1 ] ) ||. elems) Sekurang-kurangnya satu daripada tiga ini ditubuhkan

Boleh dipecahkan kepada 3 situasi kecil

panjang wujud dan merupakan nombor, dan atribut panjang tatasusunan atau objek seperti tatasusunan yang akan dilalui adalah lebih besar daripada 0. panjang-1 wujud Ini memastikan ia boleh dilalui, seperti objek jquery, objek domList , dsb.

panjang wujud dan merupakan nombor dan atribut panjang adalah sama dengan 0. Jika 0, tidak mengapa, ia tidak akan dilalui

panjang wujud dan merupakan nombor dan objek yang akan dilalui ialah tatasusunan tulen

Selepas memenuhi syarat ini, mula melintasi secara berasingan mengikut hasil isArray Untuk "array", gunakan untuk gelung, dan untuk objek, gunakan untuk...dalam gelung

// 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;
        }
      }

Apabila ia adalah tatasusunan atau seperti tatasusunan, teruskan nilai dan penuding setiap item gelung dan parameter arg ke dalam fungsi panggil balik untuk pelaksanaan Parameter arg ialah parameter yang digunakan secara dalaman dalam kaedah ini, iaitu sangat serupa dengan setiap kaedah jquery yang lain, selagi null tidak dikembalikan apabila melaksanakan fungsi panggil balik, hasil yang dikembalikan oleh pelaksanaan akan ditambahkan pada tatasusunan baharu Perkara yang sama berlaku untuk operasi objek dan terus melangkau

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

Akhirnya, set hasil diratakan Mengapa langkah ini diperlukan? Kerana peta boleh mengembangkan tatasusunan, ini adalah kes dalam contoh ketiga sebelumnya:

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

Jika digunakan dengan cara ini, tatasusunan baharu yang diperolehi ialah tatasusunan dua dimensi, jadi dimensi mesti dikurangkan

ret.concat.apply([], ret) bersamaan dengan [].concat.apply([], ret Fungsi utama digunakan, kerana parameter kedua apply membahagikan tatasusunan ret kepada berbilang parameter. Menyalurkannya kepada concat untuk menukar tatasusunan dua dimensi kepada tatasusunan satu dimensi patut dikumpul

Analisis ringkas tentang kaedah peta telah selesai. Saya harap anda boleh membetulkan saya jika terdapat sebarang kesilapan kerana keupayaan yang terhad.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.