ES6入门教程之let和const命令详解


Posted in Javascript onMay 17, 2017

前言

在javascript中,我们都知道使用var来声明变量。javascript是函数级作用域,函数内可以访问函数外的变量,函数外不能访问函数内的变量。

函数级作用域会导致一些问题就是某些代码块内的变量会在全局范围内有效,这我们是非常熟悉的:

for (var i = 0; i < 10; i++) {
 console.log(i); // 0,1,2...,9
}
console.log(i); //10

if(true){
 var s = 20;
}
console.log(s); //20

在es6中增加了let(变量)和const(常量)来声明变量,使用的是块级作用域,变量声明只在代码块内有效,下面来看看详细的介绍:

let命令

ES6新增了let命令用于声明变量。它的用处和var很相似,只不过let所声明的变量只在let命令所在的代码块内有效。

看下下面代码:

{
  let a = 10;
  var b = 9;
 }
 alert( a ); // ReferenceError: a is not defined
 alert( b ); //9

再看看下面代码:

var a = [];
 for(var i = 0; i < 10; i++) {
  var c = i;
  a[i] = function() {
   console.log( c );
  };
 }
 a[6](); //9

而如果使用let声明的话,最后输出的值是“6”。代码如下:

var a = [];
for (var i = 0; i < 10; i++) {
  let c = i;
  a[i] = function() {
   console.log( c );
  };
}
a[6](); //6

此外,let声明的变量不会提升。看下下面的代码片段。

function do_someting() {
  console.log( a ); //ReferenceError
  let a = 2;
 }

最后,let不允许在相同的作用域内,重复声明同一个变量。

// 报错
 {
  let a = 10;
  var a = 1;
 }

 // 报错
 {
  let a = 10;
  let a = 1;
 }

let实际上是JavaScript增加的块级作用域。

function foo() {
  let n = 6; 
  if (true) {
   let n = 10;
  }
  console.log( n ); //6
 }

上面代码有两个代码块,都声明了n变量,运行后输出的是6。这表明外层代码块不受内层代码块的影响。如果,改成使用var定义变量n的话,最后输出的就是10.

另外,ES6还规定,函数本身的作用域在其所在的代码块作用域之内。

function f() { console.log("I am outside"); }
 (function () {
  if (false) {
   //重复声明一次函数f
   function f() {
    console.log("I am inside");
   }
  }

  f();
 }());

上面的代码片段,在ES5中运行会得到“Iam inside”, 但是在ES6中运行,则会得到“Iam outside”。

const命令

const是用来声明常量的。一旦声明,其值就不能改变。

const PI = 3.1415;
 console.log( PI ); //PI

 PI = 3;
 console.log( PI ); //3.1415

 const PI = 3.1;
 console.log( PI ); //3.1415

有一点需要我们注意的是,对常量的重复定义不会报错,它只会默默的失败。

const的作用域与let命令相同:即只在声明所在的块级作用域内有效。

if(condition) {
  const MAX = 5;
 }

 // 常量MAX在此处不可见(或者说不可得)

此外,const常量也不可重复声明。

var message = "Hello!";
 let age = 25;

 //以下两行都会报错
 const message = "Goodbye!";
 const age = 30;

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery 表单验证扩展(三)
Oct 20 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
12306验证码破解思路分享
Mar 25 Javascript
利用js实现禁止复制文本信息
Jun 03 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 Javascript
详解如何在Angular中快速定位DOM元素
May 17 #Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 #Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 #Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 #jQuery
AngularJS使用拦截器实现的loading功能完整实例
May 17 #Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 #Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 #Javascript
You might like
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
PHP的分页功能
2007/03/21 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
setAttribute 与 class冲突解决
2008/02/17 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
详解使用React进行组件库开发
2018/02/06 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
js实现查询商品案例
2020/07/22 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
python如何对实例属性进行类型检查
2018/03/20 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
高中生学习生活的自我评价
2013/11/27 职场文书
拓展策划方案
2014/06/03 职场文书
刑事和解协议书范本
2014/11/19 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
2016党员党课心得体会
2016/01/07 职场文书