浅析四种常见的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 相关文章推荐
11款基于Javascript的文件管理器
Oct 25 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
详解React native fetch遇到的坑
Aug 30 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 Javascript
layui的select联动实现代码
Sep 28 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 读取文件的正确方法
2009/04/29 PHP
具有时效性的php加密解密函数代码
2013/06/19 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
Python正则表达式匹配HTML页面编码
2015/04/08 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
毕业生医学检验求职信
2013/10/16 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
建设工程授权委托书
2014/09/22 职场文书
python实现的web监控系统
2021/04/27 Python
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
Mybatis是这样防止sql注入的
2021/12/06 Java/Android
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python