jquery.map()方法的使用詳解_jquery
原型方法map跟each類似調用的是同名靜態方法,只不過返回來的資料必須經過另一個原型方法pushStack方法處理之後才返回,源碼如下:
map: function( callback ) { return this.pushStack( jQuery.map(this, function( elem, i ) { return callback.call( elem, i, elem ); })); },
本文主要就是分析靜態map方法至於pushStack在下一篇隨筆裡面分析;
先了解下map的使用(手冊內容)
$.map將一個陣列中的元素轉換到另一個陣列中。
作為參數的轉換函數會為每個數組元素調用,並且會給這個轉換函數一個表示被轉換的元素作為參數。
轉換函數可以傳回轉換後的值、null(刪除數組中的項目)或一個包含值的數組,並擴展至原始數組中。
參數
arrayOrObject,callbackArray/Object,FunctionV1.6
arrayOrObject:陣列或物件。
為每個數組元素調用,並且會給這個轉換函數一個表示被轉換的元素作為參數。
函數可傳回任何值。
另外,此函數可設定為字串,當設定為字串時,將視為「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]
可以看出map方法跟each方法類似透過循環每個物件或陣列的「項」執行回呼函數來實現對數組或物件的操作,但是這兩個方法也有很多不同點
例如each()回傳的是原來的數組,並不會新建立一個數組,而map則會建立新的數組,;each遍歷是this指向當前數組或物件值,map則指向window,因為在源碼中並不像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]
言歸正傳回到map原始碼
// 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 instanceof jQuery 為true 換言之就是jquery物件
2、length !== undefined && typeof length === "number" 和 length > 0 && elems[ 0 ] && elems[ length -1 ] ) || length === 0 || jQuery.Array( elemsisArray( )這三個至少成立一個
可以拆分為3個小情況
length是存在且是數字且待遍歷的陣列或類別陣列等length屬性大於0 length-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是可以擴充數組的在前面第3個範例就是如此:
$.map( [0,1,2], function(n){ return [ n, n + 1 ]; });
如果是這樣使用的話得到的新數組是一個二維數組,所以必須降維
ret.concat.apply( [], ret )等價於[].concat.apply([],ret)關鍵作用的是apply,因為apply的第二個參數把ret的陣列分成多個參數傳入給concat把二維數組轉換成一維數組這個用法還是值得收藏的的
map方法簡單分析完畢,能力有限錯誤之處望多多指正。
以上所述就是本文的全部內容了,希望大家能夠喜歡。

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

JavaScript是現代Web開發的核心語言,因其多樣性和靈活性而廣泛應用。 1)前端開發:通過DOM操作和現代框架(如React、Vue.js、Angular)構建動態網頁和單頁面應用。 2)服務器端開發:Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發:通過ReactNative和Electron實現跨平台開發,提高開發效率。

本文展示了與許可證確保的後端的前端集成,並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序(一個Edtech應用程序),您可以做同樣的事情。 首先,什麼是多租戶SaaS應用程序? 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1)C/C 是靜態類型語言,需手動管理內存,而JavaScript是動態類型,垃圾回收自動處理。 2)C/C 需編譯成機器碼,JavaScript則為解釋型語言。 3)JavaScript引入閉包、原型鍊和Promise等概念,增強了靈活性和異步編程能力。
