標籤：jquery
jQuery中提供的三個函數: map,each,trim
$.map(arry,callback(element,index));
對於數組array中的每個元素，調用callback()函數，最終返回一個新的數組。原數組不變。
源碼
// arg is for internal usage onlymap: function( elems, callback, arg ) {var length, value,i = 0,ret = [];// Go through the array, translating each of the items to their new valuesif ( isArrayLike( elems ) ) {length = elems.length;for ( ; i < length; i++ ) {value = callback( elems[ i ], i, arg );if ( value != null ) {ret.push( value );}}// Go through every key on the object,} else {for ( i in elems ) {value = callback( elems[ i ], i, arg );if ( value != null ) {ret.push( value );}}}// Flatten any nested arraysreturn concat.apply( [], ret );}
$.each(array,fn);遍曆數組
主要用來遍曆數組，不修改數組。對於普通數組或者“索引值對”數組都沒有問題。
return false來退出迴圈
在each函數中可以直接使用this,表示當前元素的值。
源碼
each: function( obj, callback ) {var length, i = 0;if ( isArrayLike( obj ) ) {length = obj.length;for ( ; i < length; i++ ) {if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {break;}}} else {for ( i in obj ) {if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {break;}}}return obj;}
範例程式碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery測試</title> <script type="text/javascript" src="js/jquery-1.12.3.js"></script> <script type="text/javascript"> var msg = {"name":"tom","age":19,"gender":"male"}; $.each(msg,function(key,value){ console.log(key + "===" + value); }); </script></head><body> </body></html>
650) this.width=650;" src="http://s1.51cto.com/wyfs02/M02/86/AB/wKiom1fHLKXzIiavAAENCkHou7w723.gif" title="jquery_each.gif" alt="wKiom1fHLKXzIiavAAENCkHou7w723.gif" />
案例：利用arguments對象來試探一個方法中需要的參數
測試map方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery測試</title> <script type="text/javascript" src="js/jquery-1.12.3.js"></script> <script type="text/javascript"> var arr = [11,12,13,14,15]; $.map(arr,function(){ var len = arguments.length; var values = ""; for(var i=0;i<arguments.length;i++) { values+="_" + arguments[i]; } alert(len+values); }); </script></head><body></body></html>
650) this.width=650;" src="http://s5.51cto.com/wyfs02/M02/86/AB/wKiom1fHLeHChzDvAAP55bCh4Vs486.gif" title="jquery_map_arguments.gif" alt="wKiom1fHLeHChzDvAAP55bCh4Vs486.gif" />
測試each方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery測試</title> <script type="text/javascript" src="js/jquery-1.12.3.js"></script> <script type="text/javascript"> var msg = {"name":"tom","age":19,"gender":"male"}; $.each(msg,function(){ var len = arguments.length; var values = ""; for(var i=0;i<len;i++) { values+="_"+arguments[i]; } alert(len + values); }); </script></head><body></body></html>
650) this.width=650;" src="http://s4.51cto.com/wyfs02/M01/86/AB/wKioL1fHLmGwHD88AAG_M8aeY4I775.gif" title="jquery_each_arguments.gif" alt="wKioL1fHLmGwHD88AAG_M8aeY4I775.gif" />
將一個數組中的元素翻倍，並返回一個新數組
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery測試</title> <script type="text/javascript" src="js/jquery-1.12.3.js"></script> <script type="text/javascript"> var arr = [11,12,13,14,15]; var newArr = $.map(arr,function(element,index){ return element*2; }); alert(newArr); </script></head><body></body></html>
650) this.width=650;" src="http://s4.51cto.com/wyfs02/M02/86/AB/wKioL1fHL8bTKwyTAAFdWEkbFWU187.gif" title="jquery_map_eg.gif" alt="wKioL1fHL8bTKwyTAAFdWEkbFWU187.gif" />
將一個數組中索引大於3的元素的值翻倍，其餘值不變，並返回數組
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery測試</title> <script type="text/javascript" src="js/jquery-1.12.3.js"></script> <script type="text/javascript"> var arr = [11,12,13,14,15]; var newArr = $.map(arr,function(element,index){ return index>3?element*2:element; }); alert(newArr); </script></head><body></body></html>
650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/86/AB/wKioL1fHMFGQvDvwAAFuZG0aO-4373.gif" title="jquery_map_eg2.gif" alt="wKioL1fHMFGQvDvwAAFuZG0aO-4373.gif" />
$.trim(str);
去掉兩端空格，調試查看實現方式
源碼
rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/gtrim: function( text ) {return text == null ?"" :( text + "" ).replace( rtrim, "" );}
本質上類似於str.replace(/^\s+/,‘‘);
trimLeft=/^[\s\xA0]/;
trimRight=/[\s\xA0]+$/;
IE一些版本不支援\s空格，\xA0也表示空格
jQuery中提供的三個函數：map,each,trim
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
