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

不放走任何一个细节。相信很多Javascript开发者都在声明循环变量时犹 豫过var i到底应该放在哪里:放在不同的位置会对程序的运行产生怎样的影响?哪一种方式符合Javascript的语言规范?哪一种方式和ecma标准未来的发展 方向匹配?本文将对四种常见的声明循环变量的书写方式进行简单的分析和比较。

习惯1:不声明直接使用

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

非常危险的使用习惯,一般情况下循环变量将成为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循环初始语句块中并反复声明

 
  1. function loop(arr) { 
  2.     for (var i = 0; i < arr.length; i++ ){ 
  3.         // do someting 
  4.     } 
  5.     // console.log(i); 
  6.     for (var i = 0; i < arr.length; i++ ){ 
  7.         // do something else 
  8.     } 

这种方式看似最安全规范,很多从C和Java转到前端开发的同学都偏爱这样的写法,事实上,这也许是由于对Javascript中一个重要概念有所 误解造成的——变量作用域。不同于C和Java,Javascript并不具备真正的块级作用域,也就是说,在第一个循环结束之 后,console.log(i)并不会打印undefined或者抛出ReferenceError异常,而是会正常打印出arr.length。
当 然,这样的写法虽然除了美观以外意义不大,但是长久以来兼容性良好且没有违反任何规范——ecma标准中并没有禁止在某一个作用域内对于同一变量的重复声 明。不仅如此,其实这里还有一个另外好消息,在ECMAScript 6中,一个新的,为支持真正的块级作用域而生的关键字出现了——let。这里放一个传送门,有兴趣的同学可以自行了解:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

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

 
  1. function loop(arr) { 
  2.     var var1; 
  3.     var var2; 
  4.     var i; 
  5.  
  6.     for (i = 0; i < arr.length; i++) { 
  7.         // do something 
  8.     } 

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

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

 
  1. function loop(arr) { 
  2.     (function () { 
  3.         for (var i = 0; i < arr.length; i++) { 
  4.             // do something 
  5.         } 
  6.     })(); 
  7. }

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

以上就是对Javascript中四种常见循环变量定义书写习惯的简单介绍和分析,各有利弊,读者可以结合自己的需求择优使用。应该说,在 ECMAScript 6之前并没有一种定义循环变量的完美解决方案。好在ECMAScript标准委员会也及时发现了这个问题,让我们一起期待let关键字吧。


作者:ralph_zhu

来源:51CTO

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/288781.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Delphi全局热键的注册

1.在窗启动时创建ATOM;(aatom:ATOM;定义在private中&#xff09; 1 if FindAtom(ZWXhotKey)0 then 2 begin 3 aatom:GlobalAddAtom(ZWXhotKey); 4 end; 5 if RegisterHotKey(Handle,aatom,MOD_ALT,$41) then 6 begin 7 MessageBox(Handle,按alta,提示,MB_OK); 8 end; 2.定义处…

python爬取网易云音乐问题陈述_python 网易云音乐 评论爬取问题

除了使用phantomjs,selenium之外&#xff0c;怎么爬取多页评论&#xff0c;这两个都太慢了。例如http://music.163.com/#/song?i... 的 评论。webapi都是http://music.163.com/weapi/v1...&#xff0c;每页20个评论&#xff0c;怎么获取下一页的评论&#xff0c;param是加密的…

C#趣味程序----分数之和

问题:求这样的四个自然数p,q,r,s(p<=q<=r<=s),使得等式1/p + 1/q +1/r +1/s=1成立。 分析:将原式同分,化简整理后得到:2<=p<5,p<=q<7,q<r<13。 using System;namespace ConsoleApplication1 {class Program{static void Main(string[] ar…

php gearmanclient addoptions,gearman PHP7扩展安装

注&#xff1a;官方提供的只支持PHP 6&#xff0c;需要第3方支持&#xff0c;https://github.com/wcgallego/pecl-gearmanyum install libgearman-devel -y 如没装&#xff0c;则config时报错 error: Please install libgearmanwget https://github.com/wcgallego/pecl-gearm…

剑指offer之把字符串里面空格替换成百分之20

1 问题 把字符串里面空格替换成百分之20 2 代码实现 第一种时间复杂的o(n * n)实现 #include <stdio.h> #include <stdlib.h>char* insert(char *a, int len, char *replace, int replaceLen) {//先得到多少个空格char *p a;int count 0;while (*p ! \0){if (…

【C语言简单说】二十一:双重指针基础 (完结)

其实后面这两节我是用我几年前写的教程复制过来的。。。 ’ – ’ ) ( &#xff13; )╱~~ 如有错误&#xff0c;请留言提醒哈~~~尴尬的笑。 多重指针呢其实就是指向指针的指针。 首先&#xff0c;变量大家都知道是啥意思了吧&#xff1f;一个变量是有地址的。那么指针变量也是…

jquery设置滚动条距离页面顶部的高度

//获取滚动条到顶部的垂直高度 $(document).scrollTop(); //获取滚动条到左边的垂直宽度 $(document).scrollLeft(); function clickFn(){var topL0 $("#l0").offset().top;var topL1 $("#l1").offset().top;alert("l0距离顶部:"topL0)aler…

精彩回顾|「源」来如此 第六期 - 开源经济与产业投资

| 作者&#xff1a;活动组、袁睿斌| 编辑&#xff1a;金心悦| 设计&#xff1a;朱亿钦4月17日 14:00&#xff0c;由开源社联合云启资本、易观分析、云赛空间&#xff0c;以及微软 Reactor 共同主办&#xff0c;由示说网提供转播支持的「源」来如此 第六期直播活动如约而至。在本…

python中@staticmethod_Python中的@staticmethod和@classmethod的区别

一直搞不明白&#xff0c;类方法和静态方法的区别&#xff0c;特意研究了一下&#xff0c;跟大家分享一下。为了方便大家了解两者的差别&#xff0c;以下的示例代码将有助于发现其中的差别&#xff1a;class A(object):def foo(self, x):print "executing foo(%s, %s)&quo…

iOS 第三方登录之 QQ登录

一. 首先需要下载腾讯qq登录所需的库&#xff0c;下载地址是http://open.qq.com/ 。 需要用到的有TencentOpenAPI.framework 和TencentOpenApi_IOS_Bundle.bundle,将两者加入工程。 二.下面就来实现QQ第三方登录 1.声明属性&#xff0c;且viewcontroller实现TencentSessionDele…

C#趣味程序---真分数序列

问题&#xff1a;按递增顺序依次列出所有分母为40&#xff0c;分子小于40的最简真分数。 分析&#xff1a;利用最大公约数 using System;namespace ConsoleApplication1 {class Program{static void Main(string[] args){for(int i1;i<40;i){int a 40;int b i;while (b!0…

有关 php __autoload 自动加载类函数的用法

这个函数是一个自动加载类函数&#xff0c;啥事自动加载函数&#xff0c;顾名思义 &#xff0c;那就是自己就会加载类的函数&#xff08;原谅我废话了&#xff09; 我们先看下面的代码&#xff1a; <?php function __autoload($classname) {echo "helloworld";…

IP签名档PHP源码,IPCard 一款天气图标签名档源码

源码介绍本源码对接高德z地图开发者平台的API实现获取IP和天气数据并使用php将天气的图标与文字相结合&#xff0c;形成一张IP签名档图片&#xff0c;最后呈现出来使用说明首先去高德开放平台申请KEY&#xff0c;点击右上角的注册按钮并登录账号&#xff0c;进入控制台&#xf…

Fiddler之如何通过浏览器输入链接地址修改页面返回数据的内容

1 问题 比如我们在浏览器里面输入www.baidu.com,那么就正常返回页面,我们怎么修改这个页面的返回内容呢?我们可以功过Fiddler构来实现,比如我们现在要实现在浏览器里面输入www.baidu.com,然后返回的页面返回chenyu这个功能。 2 操作过程 1) 由于我的谷歌浏览器使用了Swi…

大数据对六大领域的挑战

第一个挑战是大数据对人性假设的挑战。 管理学自诞生开始&#xff0c;就以人为对象&#xff0c;以人性假设为前提不断演化出各种理论。第一个提出科学管理理论的泰勒假设人是“经济人”&#xff0c;后来梅奥假设人是“社会人”&#xff0c;西蒙则构造了“决策人假设”。自西蒙之…

CentOS 6.3(x86_64)下安装Oracle 10g R2

CentOS 6.3(x86_64)下安装Oracle 10g R2 目 录 一、硬件要求 二、软件 三、系统安装注意 四、安装Oracle前的系统准备工作 五、安装Oracle&#xff0c;并进行相关设置 六、升级Oracle到patchset 10.2.0.4 七、使用rlwrap调用sqlplus中历史命令 一、硬件要求 1、内存 & swap…

基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目

系列文章基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客&#xff1f;基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目...基于.NetCore开发博客项目 StarBlog - 接口返回值包装基于.NetCore开发博客项目 StarBlog - 上传图片功能基于.NetCore开…

JS里的onclick事件

可以通过以下代码了解JS里的onclick事件&#xff1a; <!DOCTYPE html> <html xmlns"http://www.w3.org/1999/xhtml"> <head> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/><title></tit…

比__autoload 更灵活的 spl_autoload_register 用法

直接上代码了&#xff1a; <?php function loadclass( $class ) { $file $class . .php; if (is_file($file)) { require_once($file); } } spl_autoload_register( loadclass ); $obj new Test1(); $obj->TestFunction(); ?> 以上php代码有一个函数loadclass有…

php短信接口怎么用,php短信接口接入详细过程

短信接口被广泛应用于互联网产品&#xff0c;在开发网站或app等应用时会经常遇到接入短信接口的需求&#xff0c;接入短信接口详细过程如下&#xff1a;首先需要找到一家短信接口服务商&#xff0c;获取短信接口调用地址和相关接入参考文档&#xff0c;这里就以动力思维乐信短信…