數組方式使用jQuery對象


一、

使用jQuery選擇器獲取結果是一個jQuery對象。然而,jQuery類庫會讓你感覺你正在使用一個定義了索引和長度的數組。在性能方面,建議使用簡單的for或者while循環來處理,而不是$.each(); 這樣能使你的代碼更快。

console.time('array');
var
array = ["Aaa","Bbbb","Cccc"]; $.each(array, function(i){ //array[i] = i; console.log(i+" : "+array[i]);
});
console.timeEnd('array');

使用for代替each方法:

console.time('arr');
var
arr = ["aaa","bbb","ccc"]; for(var i=0;i<arr.length;i++){ //arr[i] = i; console.log(i+" : "+arr[i]); }
console.timeEnd('arr');

效果-執行時間:

另外需要注意的是:檢查長度也是檢查jQuery對象是否存在的方法。下面一段代碼通過length屬性來檢查頁面中是否含有id為“content”元素。

 var content = $("content");
     if (content) {   //總是true  都會執行
          //do something
      } 
                     
     if (content.length) { //擁有元素采薇true  才會執行
         //do something
      }

 ===================================================================================

二、用數組方式來遍歷jQuery 對象集合

你或許沒有注意到,但是在性能方面,對於jQuery each方法這種優雅實現是有代價的。有一個辦法能夠更快地遍歷一個jQuery對象。就是通過數組來實現,jQuery對象集合就是一個類數組,具有length和value屬性。可以通過程序來測試一下性能:

HTML:

<ul id="testList" >
   <li>Item</li>
   <li>Item</li>
   <li>Item</li>
   <li>Item</li> 
   <li>Item</li>
   <li>Item</li>
   <li>Item</li>
   <li>Item</li>
   <li>Item</li>
   <!-- add 50 more -->
</ul>

JavaScript:

var arr = $('li'),
    iterations = 100000; //------------------------------ // Array實現: console.time('Native Loop'); for (var z = 0; z < iterations; z++) { var length = arr.length; for (var i = 0; i < length; i++) { arr[i]; } } console.timeEnd('Native Loop'); //------------------------------ // each實現: console.time('jQuery Each'); for (z = 0; z < iterations; z++) { arr.each(function(i, val) { this; }); } console.timeEnd('jQuery Each');

 結果:

可以看到通過數組實現方式遍歷,執行效率更高。

========================================================================================

三、適應join來拼接字符串:

創建一個數組,然后循環,最后只用join();把數組轉換成字符串,代碼如下:

  <body>
        <div id="content"></div>
        
        <script src="js/jquery.js"></script>
        <script type="text/javascript">
              var arr = ["aaaaaaa","22222","cccccc"]; for (var i=0;i<arr.length;i++) { arr[i]="<li>"+i+" : "+arr[i]+"</li>"; } $("#content").html(arr.join('')); </script>
    </body>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM