浅析四种常见的Javascript声明循环变量的书写方式


Posted in Javascript onOctober 14, 2015

Javascript中的循环变量声明,到底应该放在哪儿?

浅析四种常见的Javascript声明循环变量的书写方式

习惯1:不声明直接使用

function loop(arr) { 
 for (i = 0; i < arr.length; i++) { 
  // do something 
 } 
}

非常危险的使用习惯,一般情况下循环变量将成为window对象上的一个属性被全局使用,极有可能影响程序的正常逻辑实现。
需要着重提一下的是,在strict模式下,未声明变量而直接赋值的使用方式会直接抛出异常,早就该这么做啦!引用一下ecma-262标准附录C中的一段话:
"Assignment to an undeclared identifier or otherwise unresolvable reference does not create a property in the global object. When a simple assignment occurs within strict mode code, its LeftHandSide must not evaluate to an unresolvable Reference. If it does a ReferenceError exception is thrown (6.2.3.2)."
换言之,如果再使用未经声明的变量的话,ReferenceError异常会被抛出。

习惯2:放在for循环初始语句块中并反复声明

function loop(arr) { 
 for (var i = 0; i < arr.length; i++ ){ 
  // do someting 
 } 
 // console.log(i); 
 for (var i = 0; i < arr.length; i++ ){ 
  // do something else 
 } 
}

这种方式看似最安全规范,很多从C和Java转到前端开发的同学都偏爱这样的写法,事实上,这也许是由于对Javascript中一个重要概念有所 误解造成的——变量作用域。不同于C和Java,Javascript并不具备真正的块级作用域,也就是说,在第一个循环结束之 后,console.log(i)并不会打印undefined或者抛出ReferenceError异常,而是会正常打印出arr.length。
当然,这样的写法虽然除了美观以外意义不大,但是长久以来兼容性良好且没有违反任何规范——ecma标准中并没有禁止在某一个作用域内对于同一变量的重复声明。

习惯3:在函数顶部和其他变量一起集中定义

function loop(arr) { 
 var var1; 
 var var2; 
 var i; 
 
 for (i = 0; i < arr.length; i++) { 
  // do something 
 } 
}

这种c89-like式的变量定义方式在Javascript中几乎无可挑剔,既不会造成Javascript支持块级作用域的误解,又不会污染全 局scope,还不违反任何标准和规范,主要缺点就是循环变量的声明和循环体可能会隔开比较远。在不借助更多代码的前提下,除了等待各大主流浏览器厂商实现ECMAScript 6中的let关键字以外,这个问题似乎找不到更好的解决方案。

习惯4:将循环代码封装到IIFE中

function loop(arr) { 
 (function () { 
  for (var i = 0; i < arr.length; i++) { 
   // do something 
  } 
 })(); 
}

最后一种习惯是前端程序员们熟悉的IIFE(Immediately-Invoked Function Expression),即立即执行函数。此种方法的主要缺点是书写相对麻烦,且有多余的性能损耗(很小),但在兼容性、对各标准规范的遵循上表现良好。 如果不嫌麻烦,开发者可以采取这种方式。

以上就是对Javascript中四种常见循环变量定义书写习惯的简单介绍和分析,各有利弊,读者可以结合自己的需求择优使用。

Javascript 相关文章推荐
用javascript获得地址栏参数的两种方法
Nov 08 Javascript
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
vue实现户籍管理系统
May 29 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 #Javascript
JS更改select内option属性的方法
Oct 14 #Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 #Javascript
JS实现的最简Table选项卡效果
Oct 14 #Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 #Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 #Javascript
smartcrop.js智能图片裁剪库
Oct 14 #Javascript
You might like
来自PHP.NET的入门教程
2006/10/09 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
js实现消息滚动效果
2017/01/18 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
python print出共轭复数的方法详解
2019/06/25 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
2014全国两会心得体会
2014/03/17 职场文书
小学节能减排倡议书
2014/05/15 职场文书
书法社团活动总结
2015/05/07 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server