数组方式使用jQuery对象

你的名字 2021-03-22 13:32 566阅读 0赞

一、

使用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');

效果-执行时间：

![794477-20170313134400010-1145082937.png][]

另外需要注意的是：检查长度也是检查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:

JavaScript：

结果：

![794477-20170313133441682-1508797661.png][]

可以看到通过数组实现方式遍历，执行效率更高。

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

**三、适应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>

[794477-20170313134400010-1145082937.png]: /images/20210322/1616419952780.png
[794477-20170313133441682-1508797661.png]: /images/20210322/1616419932810.png