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 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
用js 让图片在 div或dl里 居中,底部对齐
Jan 21 Javascript
struts2 jquery 打造无限层次的树
Oct 23 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
javascript parseInt() 函数的进制转换注意细节
Jan 08 Javascript
javascript使用location.search的示例
Nov 05 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
详解如何在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
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
深入php list()函数的详解
2013/06/05 PHP
php curl选项列表(超详细)
2013/07/01 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
动态表格Table类的实现
2009/08/26 Javascript
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
pytorch实现seq2seq时对loss进行mask的方式
2020/02/18 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
Python datetime模块使用方法小结
2020/06/18 Python
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
J2EE系统只能是基于web
2015/09/08 面试题
十八大感想感言
2014/02/10 职场文书
致800米运动员广播稿
2014/02/16 职场文书
大学课外活动总结
2014/07/09 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
车辆委托书范本
2014/10/05 职场文书
民事调解书范文
2015/05/20 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android