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 页面 Mask实现代码
Jan 09 Javascript
Google 静态地图API实现代码
Nov 19 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
jquery属性,遍历,HTML操作方法详解
Sep 17 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
利用JavaScript写一个简单计算器
Nov 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
PHP4实际应用经验篇(8)
2006/10/09 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
js 日期转换成中文格式的函数
2009/07/07 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
python 中的int()函数怎么用
2017/10/17 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
详解python tkinter 图片插入问题
2020/09/03 Python
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
厨房领班竞聘演讲稿
2014/04/23 职场文书
企业领导对照检查材料
2014/08/20 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
社区好人好事材料
2014/12/26 职场文书
Python中如何处理常见报错
2022/01/18 Python