在for循环中length值是否需要缓存

在for循环中是否需要缓存length值，相信很多程序猿们都纠结过此问题，下面就这一问题的分析请看下文：

在JS性能优化中，有一个常见的小优化，即

// 不缓存
for (var i = 0; i < arr.length; i++) {
　　...
}

// 缓存
var len = arr.length;
for (var i = 0; i < len; i++) {
　　...
}

那么，我们就应该摒弃这种写法吗?不是的，还有另外一种情况，必须使用这种写法。

请看例子：

代码如下:

var divs = document.getElementsByTagName("div"), i, div ;
for( i=0; i<divs.length; i++ ){
　　div = document.createElement("div");
    document.body.appendChild("div");
}

以上代码会导致无限循环：第一行代码会取得所有的div元素的nodelist，由于nodelist是动态的，因此只要有新的div添加到页面中，下一次的for循环就会再对divs.length求值，因此i和divs.length每次都会同时递增，结果他们的值永远不会相等，就创建了一个死循环。

所以，如果想要迭代一个nodelist最好使用length属性初始化第二个变量，然后将迭代器与该变量进行比较，修改后的代码如下：

代码如下:

var divs = document.getElementsByTagName("div"), i, div ,len ;
for(i=0;len=divs.length;i<len;i++){
　　div = document.createElement("div");
　　document.body.appendChild("div");
}

这个例子中初始化了len，由于len中保存着divs.length在循环开始时的一个快照，因此会避免上一个例子中出现的无限循环问题，因此当需要对nodelist进行循环迭代的时候，使用这种方法更为保险。

总结：
1.将length的值进行缓存，到底是否有利于性能优化，是一个需要根据具体情况进行判断的事情，总体来讲，减少对DOM的访问还是有好处的；
2.当需要操作nodelist的时候，建议将length的值进行缓存，可以避免出现死循环。

以上内容就是针对是否需要缓存length值在for循环中的全部介绍，希望大家喜欢。

赞 (0)

相关推荐

  • jQuery对象的length属性用法实例

    本文实例讲述了jQuery对象的length属性用法.分享给大家供大家参考.具体分析如下: 此属性返回匹配的jQuery对象集合中对象的数目. length属性与size()方法返回相同的值. 语法结构: 复制代码 代码如下: $("selector").length 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <m

  • 通过length属性判断jquery对象是否存在

    复制代码 代码如下: //jquery 通过得到对象的长度判断对象是否存在 function testJquery() { if ($(".tel").length > 0) { alert("存在"); } else { alert("不存在"); } }

  • ASP.NET缓存处理类实例

    本文实例讲述了ASP.NET缓存处理类.分享给大家供大家参考.具体如下: ASP.NET 缓存处理类. 用法: Just copy this code into a new class file (.cs) and add it to your ASP .NET website. One thing to keep in mind is that data stored in ASP .NET Cache can be accessible across all sessions. So whe

  • Javascript学习笔记之数组的遍历和 length 属性

    尽管数组在 Javascript 中是对象,但是不建议使用 for in 循环来遍历数组,实际上,有很多理由来阻止我们对数组使用 for in 循环. 因为 for in 循环将会枚举原型链上的所有属性,并且唯一阻止的方法是使用 hasOwnProperty 来判断,这将比普通的 for 循环要慢不少. 遍历 为了达到最佳性能来遍历一个数组,最好的方式就是使用经典的 for 循环. 复制代码 代码如下: var list = [1, 2, 3, 4, 5, ...... 100000000];

  • TextArea设置MaxLength属性最大输入值的js代码

    标准的DHTML文档中TEXTAREA的MAXLENGTH属性默认情况下不起作用,只有当事件发生时才起作用 如下:http://spiderscript.net/site/spiderscript/examples/ex_textarea_maxlength.asp 但TEXT中有且起作用<input type="text" maxlength="20">, 那么在TEXTAREA中怎么实现输入内容不能超过多少个字符呢. 方法1.如果只需要截取多少个字符

  • php操作memcache缓存方法分享

    使用memcache的前提是需要在服务端先配置好memcahche的环境!确认memcahce可以正常连接之后就可以在程序使用了! <?php /** * Memcache缓存操作 * @author hxm * @version 1.0 * @since 2015.05.04 */ class MCache extends Object implements CacheFace { private $mem = null; //Mem对象 private $sId = 1; //servier

  • 在for循环中length值是否需要缓存

    在for循环中是否需要缓存length值,相信很多程序猿们都纠结过此问题,下面就这一问题的分析请看下文: 在JS性能优化中,有一个常见的小优化,即 // 不缓存 for (var i = 0; i < arr.length; i++) { ... } // 缓存 var len = arr.length; for (var i = 0; i < len; i++) { ... } 那么,我们就应该摒弃这种写法吗?不是的,还有另外一种情况,必须使用这种写法. 请看例子: 复制代码 代码如下: v

  • vue 取出v-for循环中的index值实例

    一开始接触到vue的for循环就觉得贼好用,重复性的东西再也不用ctrl C+ctrl V了好吗.不仅代码可复用了,而且提高了代码可读性.减轻了工作量,更重要的是写代码都有成就感了. 贴出个小小例子: template <ul v-for="(item,index) in pcState"> <li>{{item.name}}</li> <li>{{item.state}}</li> <li>{{item.ip}}

  • 解决在for循环中remove list报错越界的问题

    解决在for循环中remove list报错越界的问题

    最近在搞一个购物车的功能,里面有一个批量删除的操作,采用的是ExpandableListView以及BaseExpandableListAdapter.视乎跟本篇无关紧要,主要是为了记录一个java基础.迭代器iterator的使用 一.错误代码(主要就是购物车的批量删除) /** * 删除选中的 */ public void delSelect() { int groupSize; if (mGropBeens != null) { groupSize = mGropBeens.size();

  • pythonfor循环中range与len区别

    pythonfor循环中range与len区别

    目录 range(x) range(start,stop) range(start,stop,step) len() len不支持 int 或者float range(len()) 用range常见错误 range(x) range(9) 代表着0.1.2.3.4.5.6.7.8 这九个顺序数字的集合.也就是 range(9) => range(0,9) => [0,1,2,3,4,5,6,7,8] 我们尝试用 for 打印 range(9): 此外,range还有另外两种用法,形如切片: r

  • JS for循环中i++ 和 ++i的区别介绍

    平时都是这样写的for循环, for(var i = 0; i < 20 ; i++){ .... } 但我看有的人这样写 for (var i = 0; i < 20 ; ++i) { .... } 这样会对for循环有什么影响? 1.在for里好像没啥区别... 但是用在赋值的时候, 就有区别了... var a = 1; var b = a++; var c = 1; var d = ++c; console.log(b,d); // 1, 2 a++ 是先应用a, 然后再自加 ++a

  • 为什么在foreach循环中JAVA集合不能添加或删除元素

    1. 编码强制规约 在<阿里巴巴Java开发手册>中,针对集合操作,有一项规定,如下: [强制]不要在 foreach 循环里进行元素的 remove/add 操作.remove 元素请使用 Iterator方式,如果并发操作,需要对 Iterator 对象加锁. public class SimpleTest { public static void main(String[] args) { List<String> list = Lists.newArrayList(); l

  • 浅谈Java循环中的For和For-each哪个更快

    浅谈Java循环中的For和For-each哪个更快

    目录 for-each实现方法 基准测试 原因分析 结论 对于Java循环中的For和For-each,哪个更快 通过本文,您可以了解一些集合遍历技巧. Java遍历集合有两种方法.一个是最基本的for循环,另一个是jdk5引入的for each.通过这种方法,我们可以更方便地遍历数组和集合.但是你有没有想过这两种方法?哪一个遍历集合更有效? for-each实现方法 For-each不是一种新语法,而是Java的语法糖.在编译时,编译器将此代码转换为迭代器实现,并将其编译为字节码.我们可以通过

  • JavaScript变量or循环中的var和let详解

    JavaScript变量or循环中的var和let详解

    目录 在for循环中使用var声明初始化带来的问题 解决方法 使用闭包 使用let变量初始化 for循环怎么处理用let和var声明的初始化变量? 总结 在for循环中使用var声明初始化带来的问题 // 一道经典面试题: var funcs = []; for (var i = 0; i < 3; i++) { funcs[i] = function() { console.log("My value: " + i) }; } for (var j = 0; j < 3;

  • Golang的循环中break和continue语句的用法讲解

    Golang的循环中break和continue语句的用法讲解

    Go语言break语句 在Go编程语言中的break语句有以下两种用法: break语句用于在循环立即终止,程序控制继续下一个循环语句后面语句. 它可用于终止在switch语句的情况(case). 如果你正在使用嵌套循环(即,一个循环在另一个循环中),break语句将停止最内层循环的执行,并开始执行的下一行代码的程序段之后. 语法 在Go break语句的语法如下: break; 流程图: 例子: 复制代码 代码如下: package main import "fmt" func ma

  • 解决循环中setTimeout执行顺序的问题

    期望:开始输出一个0,然后每隔一秒依次输出1,2,3,4. for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000 * i); } 结果:输出5. 原因:setTimeout 使函数延迟1s执行,而for循环执行完成还不到0.1秒,到执行函数的时候,其实 i 已经变成5了,因此console.log(i)输出5. 解决方法一:使用let块作用域. for (let i = 0; i < 5; i

随机推荐