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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
jquery插件 autoComboBox 下拉框
Dec 22 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
浅谈document.write()输出样式
May 07 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
深入了解query和params的使用区别
Jun 24 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
PHP设计模式 注册表模式
2012/02/05 PHP
php实现的ping端口函数实例
2014/11/12 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
YII框架常用技巧总结
2019/04/27 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
关于js注册事件的常用方法
2013/04/03 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
document.write的几点使用心得
2014/05/14 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
python插入数据到列表的方法
2015/04/30 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
使用Python进行目录的对比方法
2018/11/01 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
什么是就业协议书
2014/04/17 职场文书
运动会演讲稿
2014/05/07 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
virtualenv隔离Python环境的问题解析
2022/06/21 Python