javascript世界里面的每个人都在说有关ECMAScript 6 (ES6,也称作ES 2015)的话题,对象的巨大变化 ( 类 , super() , 等), 函数 (默认参数等), 以及模块 (导入/导出), 但 很少有人关注 变量以及如何定义。事实上,还是有一些关注,但是可能关注点并非正确。我最近参加了英国jQuery会议,在会议上 Dave Methvin 发表了一场关于 ES6简介 的演讲,演讲内容包含了很多关于 let 和 const 的内容。

通过这篇文章,我想介绍 var 的这两个不同的关键字,以及它们在定义和使用上的区别。并且更重要的,我要确定哪些人正在考虑在ES6中使用声明变量的新标准。基本概念是 let 应该立刻取代 var 作为定义的关键字。事实上,按照一些案例, var 简单的说不应该再在新代码中使用。 const 关键字用在那些永远不会改变的变量申明, let 用在其他变量申明上。

用 let 取代 var

这个代码示例一看上去似乎比较有戏剧性,但是对我们思考 let 和 var 的差异来说,显得不会太多。 var 在离它最近的父函数内创建了一个变量的作用域 let 在它最近的块级中创建作用于,这些块包括 for 循环, if 语句以及其他块。

 function foo ( ) {

 console . log ( x ) ;

 console . log ( y ) ;

 var x = 1 ;

 if ( x === 1 ) {

 let y = 2 ;

 }

 console . log ( y ) ;

 }

 foo ( ) ;

 console . log ( x ) ;

在这个例子中,我们创建了一个 foo 的函数(以及变量作用域),并且稍后我们调用它。最后一个 console.log() 语句预期会产生一个 ReferenceError ,因为 x 只在 foo() 中定义(作用域)。因为变量提升,第一个console预计将被正常执行。在这个示例中, x 是 undefined 。第二个console预计更加有趣。事实上,两个 log(y) 都将出错,因为 let 比 var 的作用于更加严格。 y 变量 只存在于 if 块里面,不在任何其他地方。Dave Methvin称 let 之前的区域叫做“ 临时死亡区 。”

希望这个例子能够向你展示 let 的特性,但是你或许会说有时候你实际上想 有一个 函数范围作用域的变量。没问题,简单的说在函数顶部创建这个变量就好了。

 function foo ( x ) {

 let y <s4>=</s4><s5> </s5><s6>2</s6><s7>;</s7>

 if ( x === 1 ) {

 y = 2 ;

 }

 console . log ( y ) ;

 }

 foo ( ) ;

 console . log ( y ) ;

上面的函数在函数顶部定义了 y ,因此相比第一个例子,赋予了它更大范围的作用域。我们可以看见 y 在这个函数任意地方都可以访问,但是在外面不行,因此最后一个 console.log(y) 语句依然会产生 ReferenceError 。在我们介绍 const 前, 让我们重申一下这点:在ES6中 let 应该完全取代 var 。上面的示例向你展示了 let 十分强大,并且和 var 一样拥有十分多的灵活性。我 并不是第一个这样说的人 但是我现在是这种想法的信仰者。

常量索引,不是值

在ES6中另外一个定义变量的关键字是 const , 但是它经常被误会为一个“常量”。在ES6中, const 代表一个值的 常量索引 (事实上绝大多数语言都提供这样的功能)。换句话说,变量名字在内存中的指针不能够改变,但是指向这个变量的值 可能 改变。

这里有一个简单的例子。在下面的例子中我们可以创建一个拥有常量索引的数组变量。我们在之后添加值到这个数组中并不改变这个索引,一切都可以运行起来:

const names = [ ] ; names . push ( “Jordan” ) ; console . log ( names ) ;

但是,如果我们尝试修改变量索引到一个新的数组——即使是和现在内容一样的数组——我们将获得一个SyntaxError (“Assignment to constant variable”):

const names = [ ] ; names = [ ] ; // Error!

当然,如果你拥有一个指向string或者number的 const ,当然这里就不会有任何可以修改的值。所有String和Number的方法返回 新的 值(对象)。

最后一个关于使用 const 的注意事项是参考 let 的新作用域规则!那意味着我们应该在我们的代码中使用 let 和 const 完全代替 var 。事实上,依然有很多人支持作为没有涉及到的遗留代码只“允许”使用 var 的想法当一个程序员在一个文件中更新一些代码,他们应该 (并且可能)将所有 var 语句更新为适当的有适当作用域的 let 或者 const 。

但是只适配ES6…

那是对的。新的 let 和 const 关键字在ES5中不生效,并且因此在绝大多数可执行环境中也不生效。但是,通过类似 Babel 优秀的编译器, 我们可以将我们写的ES6 JavaScript代码编译为可在浏览器环境中执行的ES5代码。

对于开发Node.js (以及io.js)的程序员来说,幸运但是我们不需要考虑某人使用什么浏览器来执行我们的代码。如果你正在使用 Node v0.12 (你正在使用,对吗?), 你可以通过两个小修改来使用这些新功能。第一步,你必须使用“harmony”功能来运行你的代码(最初ES6开发代码是“harmony”):

~ $ node — harmony / path / to / script

第二个改变是任何使用 let 或 const (或其它ES6功能)的代码必须使用严格模式。为了实现这个,简单的将 "use strict;" 放在每个模块最顶部。另一方面,你可以在CLI中使用 --use-strict 标志,但这似乎有些多余。

在io.js中你不必需要 --harmony 标志,因为所有这些功能都在代码中集成。但是,你还是必须使你代码为严格模式。再次说明,很简单的通过在你每隔模块文件顶部加上 "use strict"; 语句来实现。

你在使用io.js吗?希望StrongLoop支持它吗? 我们已经支持了 !除了 StrongLoopAPI平台 已经能在io.js上运行,我们也提供给 我们的顾客在io.js上运行。

现在出去,并创建一个更好的变量声明工作流程!

原文链接 http://www.codesec.net/view/165972.html

ES6中的var let const应如何选择的更多相关文章

  1. JavaScript学习系列5 ---ES6中的var, let 和const

    我们都知道JavaScript中的var,在本系列的 JavaScript学习系列2一JavaScript中的变量作用域 中,我们详细阐述了var声明的变量的作用域 文章中提到,JavaScript中 ...

  2. 关于var和ES6中的let,const的理解

    var的作用就不多说了,下面说说var的缺点: 1.var可以重复声明 var a = 1; var a = 5; console.log(a); //5 不会报错 在像这些这些严谨的语言来说,一般是 ...

  3. 详解ES6中的 let 和const

      前  言 JRedu ECMAScript 6 是 JavaScript 语言教程,全面介绍 ECMAScript 6 新引入的语法特性. ES6 与上一个版本 ES5 的所有不同之处,对涉及的语 ...

  4. [js高手之路] es6系列教程 - var, let, const详解

    function show( flag ){ console.log( a ); if( flag ){ var a = 'ghostwu'; return a; } else { console.l ...

  5. ES6中 ,var,let和const的区别

    var的特点 没有代码块的概念,全局范围内都有效 存在“变量提升”现象,即变量可以在声明之前使用,值为undefined let的特点 声明的变量仅在块级作用域内有效,存在了代码块的概念 不存在“变量 ...

  6. ES6中的let和const

    let和const let 用来声明变量,但是所声明的变量只在let命令所在的代码块内有效 { let a=12 alert(a)//12 } alert(a)//报错 找不到 let不像var那样会 ...

  7. javascript中的var,let,const关键字

    文章:JavaScript 中 var 和 let 和 const 关键字的区别 比较全面的文章.

  8. 在vue中let var 和const 区别

    let和const   使用方法: (1).有没有感觉到在     javascript  使用var会发生变量提升,即脚本开始运行时, 变量已经存在了,但是没有值,所以会输出undefined. 而 ...

  9. ECMAScript 6中的var,let,const

    var的变量提升 console.log(a); //输出undefined ; 他的实际执行顺序是: var a: console.log(a); a= 这就是var的变量提升 const命令的用法 ...

随机推荐

  1. 《IT蓝豹》高仿花田ios版标签移动效果

    高仿花田ios版标签移动效果,长按每一个item拖动到自己想要位置后,后面位置移动补全效果 . 本项目适合研究gridview拖拽效果的朋友下载. 学习android动画特效. 本项目主要靠DragG ...

  2. UML大战需求分析阅读笔记3

    UML各种图的中文译名,因为翻译的原因可能会有所不一样,如:Sequence Diagram和Timing Diagram有时候都会被译成"时序图",这是最让人困扰的地方!Sequ ...

  3. Python实时获取贴吧邮箱名单并向其发送邮件

    本人Python大菜鸟,今天用python写了一个脚本.主要功能是获取贴吧指定贴子评论中留下的邮箱,通过系统的crontab每一分钟自动检测新邮箱并向其发送邮件,检测机制是去查询数据库的记录,也就是不 ...

  4. @ModelAttribute 注解及 POJO入参过程

    一.modelattribute注解 @ModelAttribute注解的方法有两种,一种无返回值,一种有返回值,方法的可以用@RequestParam注解来获取请求的参数,如果不获取参数,可以不用此 ...

  5. 2016国内最值得期待的响应式前端框架pintuer(拼图)--http://www.pintuer.com

    近期,需要将项目从pc端的应用扩展到移动端. 当然移动框架的第一选择必然是bootstrap,但是bootstrap作为移动端明显过于死板,而且作为国外的产品,对于国内的应用明显水土不服.框架里总有那 ...

  6. logback logback.xml常用配置详解(三) <filter>

    <filter>: 过滤器,执行一个过滤器会有返回个枚举值,即DENY,NEUTRAL,ACCEPT其中之一.返回DENY,日志将立即被抛弃不再经过其他过滤器:返回NEUTRAL,有序列表 ...

  7. webpack配置sass模块的加载

    webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置.这里不讲webpack的入门,入门的文章,我推荐这篇<webpack入门>. 为了使用sass,我们需要 ...

  8. 一个div,包含两个div,调整文字位置和div平均分布

    网页中经常会用到,一个div下平均分布两个小的div,两个小的div,显示的内容为图片还比较好处理,显示文字则不好控制效果,今天写了一个如图效果的 html: <div class=" ...

  9. 64位windows 7下成功配置TortoiseGit使用Github服务器

    最近感觉自己电脑上的代码太乱了,东一块.西一块……于是决定使用正规的源代码管理软件来管理自己以后写的代码.以前做小项目的时候用过TortoiseSVN,感觉不错,但是速度上有点慢,于是决定尝试一下新东 ...

  10. gerrit 部署手册

    概述 gerrit是谷歌开发用于安卓系统的代码审查的系统,目前已经开源.gerrti使用简单并友好.这里记录了gerrti的部署方法以及其中可能存在的陷阱和问题. 创建专属系统用户 Gerrit co ...