浅析四种常见的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 相关文章推荐
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
详解Vue slot插槽
Nov 20 Vue.js
浅谈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的库,结果发现很多东西
2006/12/31 PHP
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
PHP缓冲区用法总结
2016/02/14 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
JavaScript实用技巧(一)
2010/08/16 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
在windows系统中实现python3安装lxml
2016/03/23 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
应届毕业生的个人自我鉴定
2013/10/24 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
开学典礼演讲稿
2014/05/23 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
网络营销计划书
2015/01/17 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
交通安全学习心得体会
2016/01/18 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript