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 相关文章推荐
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
文章推荐系统(三)
2006/10/09 PHP
PHP图片裁剪函数(保持图像不变形)
2014/05/04 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
PHP递归创建多级目录
2015/11/05 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
JavaScript 撑出页面文字换行
2009/06/15 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
python实现数独算法实例
2015/06/09 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
厨师岗位职责
2013/11/12 职场文书
千元咖啡店的创业计划书范文
2013/12/29 职场文书
函授教育个人学习的自我评价
2013/12/31 职场文书
小班下学期评语
2014/05/04 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书