js for循环,为什么一定要加var定义i变量_javascript技巧

譬如下面。

复制代码 代码如下:

for(i=0;i<10;i++){//就不写成: var i=0
   alert(i);
}

  但是,这真的不是个好习惯,下面我就说说为什么写Js的for循环一定要加var,否则会时不时给你带来烦人难查的bug。
  譬如现在我们要实现这样的功能:输出  
  10
  20
  30
  40
  50
  60
  70
  80
  90
  100
  通过下面code实现,WriteNumber从1到10循环,每次循环调用TenTimes方法返回10倍的索引值。 

复制代码 代码如下:

<script type="text/javascript">
function WriteNumber() {
for (i = 1; i <= 10; i++) {
document.write(TenTimes(i) + "<br/>")
}
}
function TenTimes(v) {
var result = 0;
alert(i);
for (i = 1; i <= 10; i++) {
result += v;
}
return result;
}
WriteNumber();
//alert(i)
</script>

  你会发现最终只输出了10。大家可以用下面的代码框运行测试。

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

关于在WriteNumber和TenTimes方法里加不加var,就是说是否声明索引变量i有4种情况:
  第一种情况,WriteNumber和TenTimes各有1个for循环,2个循环里均没有用var声明i索引变量。
  运行结果:会alert出1。结果只输出了10,不是我们所想要的。
  分析:执行WriteNumber时,其作用域内并没有找到声明过的变量i,直接对i进行赋值,则隐式的将i声明为全局变量,(对于函数内部未声明过的变量,如果给它赋值,会隐式的将它声明为全局变量。) 循环开始,i=1,调TenTimes方法,发现TenTimes方法也没有声明过变量i ,所以TenTimes里的i就是全局变量i,就和WriteNumber的i成了同一个。 这时line9 alert出来的自然是1了。TenTimes循环了10次,使得全局的i变成了11,自然WriteNumber就不会执行第2次循环操作了。
  验证:如果在WriteNumber();语句后加alert(i),即取消line16的注释,会发现alert出12(12=10+2个i++),证明了i此时为windows对象。
  第二种情况,WriteNumber声明了i变量,即line3: var i=1,TenTimes未声明i变量,即line10: i=1。
  运行结果:line9 alert(i)处报i未定义错误 ,因为WriteNumber有声明过变量i,所以没有成为全局的i,TenTimes执行时又没有声明过i,所以报未定义。若注释掉line9,输出结果正确。因为当TenTimes里运行到i=1时,隐式将i声明是全局变量,不影响WriteNumber里的i。WriteNumber仍然会执行10次循环。
  验证:如果在WriteNumber();语句后加alert(i),即取消line16的注释,会发现alert出11(11=10+TenTimes里的i++),证明了此时有windows.i。
  第三种情况,WriteNumber没有声明i变量,即line3: i=1,TenTimes声明了i变量,即line10: var i=1。
  运行结果:弹出10个undefined。因为WriteNumber未声明i,隐式将i声明是全局变量,而TenTimes有声明过变量i(补充一句,对于变量的声明都是在预编译中进行的),所以line9 alert(i)里的i不是windows.i,而是TenTimes声明的变量i,此时当然是undefined了。同时,发现输出结果正确,因为TenTimes的i不会影响WriteNumber的全局i,WriteNumber仍然是执行了10次循环。
  第四种情况:WriteNumber和TenTimes均用var声明了i。
  运行结果:注释掉line9,不说了,好习惯,结果当然完美。
  虽然第二、三种情况输出结果是正确的,但是对i的使用很混乱,应该算是运气导致结果正确,因为刚好1个是window.i,一个是函数内部的私有变量i,使得没有冲突。
此文虽然讲的是写for循环为什么一定要加var,但其实讲的是变量的作用域(或者说变量的生命周期)。理解之后,下面的2段code运行结果你应该能准确说出答案吧。

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

Ps:说道coding的好习惯,想起了这个:if(a==3) 应该写成if(3==a) 。因为我们常会把==写成1个=,如果把变量写在右边时只写了1个=,就会报编译错误,这样就能及时发现错误。

时间: 2024-09-20 05:43:36

js for循环,为什么一定要加var定义i变量_javascript技巧的相关文章

js插件dropload上拉下滑加载数据实例解析_javascript技巧

本文实例为大家分享了dropload插件上拉下滑加载数据的具体代码,供大家参考,具体内容如下 效果图: 1.导入js  dropload.min.js  zepto.min.js    <!-- jQuery1.7以上 或者 Zepto 二选一,不要同时都引用 -->  2.后台查询  /** * 我找的劵 * * @return */ @Action("IFindTicket") public String IFindTicket() { try { FuTransact

js或者jquery判断图片是否加载完成实现代码_javascript技巧

网页中有时候需要获得图片的宽度和高度,来定义某些大小,可是这个是需要从服务端请求图片,下载到本地才能够得到的,有些js或者jquery代码在还没有加载完图片时就执行了.怎么办呢? jquery提供一个方法: 复制代码 代码如下: 01.$("").load(function(){...}); 其中选择器是图片的id或class,function里面的方法就是回调函数,在图片加载完成后执行,但是我试验了很多,压根儿不是那么回事,正确的解决方法是: 用js的onload方法: 复制代码 代

JS图片根据鼠标滚动延时加载的实例代码_javascript技巧

最近研究了京东商城用jQuery的实现如下:就是默认地址赋给img标签的src2属性,显示时赋给src属性值. 复制代码 代码如下: function lazyload(option) {    var settings = {defObj: null,defHeight: 0    };    settings = $.extend(settings, option || {});    var defHeight = settings.defHeight;    var defObj = (

js使用循环清空某个div中的input标签值_javascript技巧

HTML页面 <div class="col-xs-9" id="search_songs_a"> <table> <tbody> <tr> <th>钢琴曲名称:</th> <td><input type="text" name="info[gqq_name]" id="gqq_name" style="wi

浅谈JavaScript中定义变量时有无var声明的区别_javascript技巧

前段时间回答了一个关于定义变量时使用关键字var与否的区别,总结回顾一下. 1.在函数作用域内 加var定义的变量是局部变量,不加var定义的就成了全局变量. 使用var定义: var a = 'hello World'; function bb(){ var a = 'hello Bill'; console.log(a); } bb() //'hello Bill' console.log(a); //'hello world' 不使用var定义: var a = 'hello World'

JS 动态加载js文件和css文件 同步/异步的两种简单方式_javascript技巧

/*动态添加js或css,URL:文件路径,FileType:文件类型(js/css)*/ function AddJsFiles(URL,FileType){ var oHead = document.getElementsByTagName('HEAD').item(0); var addheadfile; if(FileType=="js"){ addheadfile= document.createElement("script"); addheadfile

js 利用image对象实现图片的预加载提高访问速度_javascript技巧

大量采用高解析度的图像的确可以让一个Web站点容光焕发.但同样也会造成站点访问速度下降--图片是文件,文件就要占用带宽,而带宽直接同访问等待时间相关.现在,让我们来学习一种名为图像预装载(image preloading)的小技巧来提高图像访问速度. 一些浏览器试图通过在本地缓存中保存这些图片来解决此问题.这样一来可以顺序调用这些图片--但对于首次使用这些图片的时候仍然会存在延时.预装载就是一种在需要图片之前就将图片下载到缓存的技术.采用这样的方式可以使当确实需要显示图片时迅速将其从缓存中恢复回

浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结_javascript技巧

这是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激. 本篇默认读者大概知道require,seajs的用法(AMD,CMD用法),所以没有加入使用语法. 1.为何而生:  这三个规范都是为javascript模块化加载而生的,都是在用到或者预计要用到某些模块时候加载该模块,使得大量的系统巨大的庞杂的代码得以很好的组织和管理.模块化使得我们在使用和管理代码的时候不那么混乱,而且也方

JavaScript中关于for循环删除数组元素内容时出现的问题_javascript技巧

昨天用for循环进行数组去重的时候出现的问题, 首先,用双重for循环把前一个和所有后面的元素进行比较,如果相等则删除. 但是,如果数组里面有三个以上连续相等的元素的时候,就会出现问题. var arr = [1,1,1,2,2]; for(var i=0; i<arr.length-1; i++){ for(var j=i+1; j<arr.length; j++){ if(arr[i] === arr[j]){ arr.splice(j,1); } } } document.write(&