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.定义处…

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

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

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

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

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…

比__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;这里就以动力思维乐信短信…

存储世界瞬息万变 SSD掀行业浪潮

存储世界瞬息万变&#xff0c;数据创建和共享速度也确实惊人。近几年&#xff0c;企业级存储市场群雄逐鹿&#xff0c;烽烟四起。SSD厂商迅速崛起&#xff0c;大杀四方。其性能、可靠性和容量秒杀“前任”HDD&#xff0c;尤其是惊人的速度更是受到用户追捧。 在虚拟化、云计算、…

numpy拼接_巧用numpy切分图片

昨晚发了接受投稿文章&#xff0c;昨晚就有读者积极来文章啦&#xff0c;几轮邮件交流了修改意见后&#xff0c;今天就发布啦&#xff0c;这篇的稿费是300。之前无聊在刷视频的时候看到这么一个有意思的视频&#xff08;现在视频找不到&#xff0c;忘记关键字了 &#xff09;&a…

tcp有限状态机分析

tcp有限状态机分析2011-11-23 0 个评论 收藏 我要投稿 这幅图是TCP的状态机&#xff0c;看了2个小时&#xff0c;分析总结如下&#xff1a;&#xff08;1&#xff09;CLOSED 状态时初始状态。&#xff08;2&#xff09;LISTEN:被动打开&#xff0c;服务器端的 状…

C# 11 的这个新特性,我愿称之最强!

前言在日常开发中我们经常会将JSON、XML、HTML、SQL、Regex等字符串拷贝粘贴到我们的代码中&#xff0c;而这些字符串往往包含很多的引号"&#xff0c;我们就必须将所有引号逐个添加转义符\进行转义。这个转义十分麻烦&#xff0c;且容易出错&#xff0c;而当我们们需要替…

php调用数据库中的图片地址显示不出来,图片显示不出来,但是数据库里有显示...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼index.phpinclude con.php;?>#container{width: 17%;margin: auto auto;}.news_list {list-style: none;}.loadmore {color: #ffffff;border-radius: 5px;width: 60%;height: 50px;font-size: 15px;background: rgba(148, 175,…

互联网打响云上争夺战:从计算到生态

阿里云&#xff1a;用人工智能治理城市 国内互联网企业的战场今年已从“地面”上升到“云端”&#xff0c;BAT先后对各自的云计算进行了品牌升级&#xff0c;网易等企业也开始积极参战&#xff0c;利用在技术积累及原有领域等方面的优势&#xff0c;通过与相关方合作&#xff0…

C# WPF UI框架MahApps切换主题

概述本指南将向您介绍MahApps.Metro如何切换主题&#xff0c;所有的MahApps.Metro的主题都包含在单独的资源字典中。如何使用主题您可以在以下可用配色方案中进行选择&#xff1a;"Red", "Green", "Blue", "Purple", "Orange&quo…

网盘搜索插件php源码,百度云网盘搜索引擎 PHP版 v1.0

百度云网盘搜索引擎是一个以PHPMySQL进行开发的网盘搜索引擎源码。百度云网盘搜索引擎运行运行环境 开始之前你需要安装* PHP 5.3.7 * MySQL* Python 2.7 ~* [xunsearch](//xunsearch.com/) 搜索引擎项目的目录结构___大致是这样的--- indexer/ #索引--- spider/ #爬虫--- sql/…

IDC:第一季度全球服务器市场收入下滑4.6% 市场为重大升级做准备

根据IDC全球服务器市场季度追踪报告&#xff0c;2017年第一季度全球服务器市场的厂商收入同比下滑4.6%。整个服务器市场的增长继续放缓&#xff0c;大多数超大规模服务提供商都在等待今年第二季度部署英特尔新的Skylake处理器。高端服务器销售继续拖累整体市场表现&#xff0c;…