浅析四种常见的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 回调函数中变量作用域的讨论
Sep 11 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
JS求平均值的小例子
Nov 29 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
如何使用JavaScript策略模式校验表单
Apr 29 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的人气开发框架Laravel
2015/10/15 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
Flask之flask-session的具体使用
2018/07/26 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
苹果Mac升级:MacSales.com
2017/11/20 全球购物
异常和异常类的概念
2014/09/12 面试题
读书活动总结范文
2014/04/26 职场文书
毕业大学生自荐信
2014/06/17 职场文书
员工团队活动方案
2014/08/28 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
党员民主生活会材料
2014/12/15 职场文书
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
详解Redis主从复制实践
2021/05/19 Redis
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
golang内置函数len的小技巧
2021/07/25 Golang
Consul在linux环境的集群部署
2022/04/08 Servers