博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
数组方式使用jQuery对象
阅读量:6145 次
发布时间:2019-06-21

本文共 1753 字,大约阅读时间需要 5 分钟。

一、

使用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

效果-执行时间:

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

  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item

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();把数组转换成字符串,代码如下:

          

 

转载于:https://www.cnblogs.com/xiangru0921/p/6535023.html

你可能感兴趣的文章
win7 vs2012/2013 编译boost 1.55
查看>>
IIS7如何显示详细错误信息
查看>>
Android打包常见错误之Export aborted because fatal lint errors were found
查看>>
Tar打包、压缩与解压缩到指定目录的方法
查看>>
配置spring上下文
查看>>
Python异步IO --- 轻松管理10k+并发连接
查看>>
Oracle中drop user和drop user cascade的区别
查看>>
登记申请汇总
查看>>
Office WORD如何取消开始工作右侧栏
查看>>
Android Jni调用浅述
查看>>
CodeCombat森林关卡Python代码
查看>>
第一个应用程序HelloWorld
查看>>
(二)Spring Boot 起步入门(翻译自Spring Boot官方教程文档)1.5.9.RELEASE
查看>>
Java并发编程73道面试题及答案
查看>>
企业级负载平衡简介(转)
查看>>
ICCV2017 论文浏览记录
查看>>
科技巨头的交通争夺战
查看>>
当中兴安卓手机遇上农行音频通用K宝 -- 卡在“正在通讯”,一直加载中
查看>>
Shell基础之-正则表达式
查看>>
JavaScript异步之Generator、async、await
查看>>