JavaScript ES6 的let和const

1 作用域和提升

1.1 作用域(Scope)

某个变量名或者函数名,在某个程序片段中是否可见或者可访问,如果是,那么这个程序片段就是这个变量名或者函数名的作用域。比如:

 1 var name = "Tom";
 2 function getInlibrary(){
 3   var libraryName = "Xinhua";
 4   console.log(name );      
 5   console.log(libraryName );
 6 }
 7
 8 getInlibrary();
 9 console.log(name );
10 console.log(libraryName );

输出结果:

Tom
Xinhua
Tom
Uncaught ReferenceError: libraryName is not defined

变量name的作用域是全局,变量libraryName的作用域是函数getInlibrary。使用var来声明变量,作用域要么是全局,要么是函数。

1.2 提升(Hoisting)

先看一段代码:

1 console.log(findAverage(3,5));
2 function findAverage(a,b){
3   return (a + b)/2.0;
4 }

控制台将会打印什么结果?undefined?因为打印语句在声明函数之前就执行了。然而答案是,控制台将输入正确的结果:4.

  这样先调用函数,后声明函数是可行的!因为JavaScript的提升机制会在代码执行前,将所有函数声明或变量声明提升到它们的作用域顶部,而初始化语句不会被提升

要注意“它们的作用域”,例如如下代码:

  提升前

1 function greeting(){
2    console.log(hello);
3    var hello =  "hello!";
4 }
5 greeing();

  提升后

1 function greeing(){
2   var hello;
3   console.log(hello);
4   hello = "hello!";
5 }
6 greeting();

因此,从提升后的代码就可以看出,程序输出结果是undefined了。

2 let和const 代替 var声明变量

2.1 为什么要引入let和const

  先看一段代码:

1 function varTest() {
2   var x = 1;
3   if (true) {
4     var x = 2;  // same variable!
5     console.log(x);
6   }
7   console.log(x);
8 }
9 varTest();

输入结果:22

上面代码的输出结果,为什么会出现上面的输出结果?看一下提升后的代码:

1 function varTest() {
2   var x;
3   var x = 1;
4   if (true) {
5     x = 2;  // 重新赋值
6     console.log(x);  // 2
7   }
8   console.log(x);  // 2
9 }

从提升后的代码可以看出来,变量x的声明被提升到了函数的顶部,在第3行中被赋值为1,在第5行被重新赋值为了2,因此后面输出都是2.

以上结果显然并不是我们想要的,造成这个结果的原因就是因为ES6之前,JavaScript变量的作用域只有全局和函数两种作用域而已,而缺少块级域,所谓“块”,就是花括号"{}"括起来的部分。

因此ES6引用了let和const,它们与var的区别就在于其作用域延伸了一个:块。将上述代码"var"改为"let"后:

 1 function letTest() {
 2   let x = 1;    //声明了一个变量x, 作用域是letTest函数
 3   if (true) {
 4     let x = 2;  //声明了一个变量x, 作用域是if块
 5     console.log(x);   //2
 6   }
 7   console.log(x);  //1
 8 }
 9
10 letTest();

输出结果:21

以上结果符合了我们的预期!大家仔细体会“另一个变量x”。

2.2 const 、let与var的区别

  const、let与var区别是:

    let可以重新赋值,不能在同一个作用域重复声明,其声明的变量的作用域为全局、函数或者块。

    const不能重新赋值,不能在同一个作用域重复声明,其声明的变量的作用域为全局、函数或者块。

    var可以重新赋值,可以在同一个作用域重复声明,其声明的变量的作用域为全局或者函数。

那么,var还有用么?没用了!建议尽可能不要使用var来声明变量了,如果你不需要改变变量值,就用const,如果需要改变变量的值,就用let.

时间: 2024-08-01 00:04:44

JavaScript ES6 的let和const的相关文章

JavaScript ES6中export及export default的区别

相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在JavaScript ES6中,export与export default均可用于导出常量.函数.文件.模块等,你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用,但在一个文件或模块中,export.import可以有多个,export default仅有一个. 具体使用: 1. //demo1.js export con

Javascript ES6 特性概述(即ECMAScript 6和ES2015+)

Javascript在过去的一年里变化了很多,从现在开始,有12个新的特性可以开始用了! 1. 历史 ECMAScript 6是对Javascript语言的增强,有时候也被称为ES6或者ES2015+. Javascript诞生在1995年,从那以后一直在缓慢地演变,每隔几年会有一些新的增强特性出现.ECMAScript出现在1997年,目的是指导Javascript的演化路径,它已经发布了好几个版本,如ES3.ES5.ES6,等等. 可以看到,在ES3.ES5和ES6之间分别有10年和6年的空

JavaScript ES6 核心功能一览

JavaScript 在过去几年里发生了很大的变化.这里介绍 12 个你马上就能用的新功能. JavaScript 历史 新的语言规范被称作 ECMAScript 6.也称为 ES6 或 ES2015+ . 自从 1995 年 JavaScript 诞生以来,它一直在缓慢地发展.每隔几年就会增加一些新内容.1997 年,ECMAScript 成为 JavaScript 语言实现的规范.它已经有了好几个版本,比如 ES3 , ES5 , ES6 等等. 如你所见,ES3,ES5 和 ES6 之间分

ES6入门-let和const指令

LET: 基本用法:在javascript中声明一个变量通常使用var ,在es6中新增了let指令,用法类似var ,但是let声明的变量只能在所在的代码块有效. ??  使用let声明变量要注意一下几个点: 1,let指令不存在变量提升,所以变量一定要先声明后再使用,否则就会报错. console.info(info); //ReferenceError let info; 2, 存在暂时性死区,也就是说,只要一个块级作用域中使用let声明了某个变量,那么这个变量就被绑定在这个区块了.外界对

JavaScript ES6功能概述(ECMAScript 6和ES2015 +)

JavaScript在过去几年中发生了很大的变化.这些是您今天可以开始使用的12项新功能! 该语言的新增内容称为ECMAScript 6.它也称为ES6或ES2015 +. 自1995年JavaScript构思以来,它一直在缓慢发展.每隔几年就会发生新增事件. ECMAScript于1997年成立,旨在指导JavaScript的发展方向.它已经发布了ES3,ES5,ES6等版本. 如您所见,ES3,ES5和ES6之间存在10年和6年的差距.此后每年??进行小幅增量变更.而不是像ES6那样一次做大

JavaScript es6 class类的理解。

在本篇文章我将会把我对JavaScript  es6新特性class类的理解.本着互联网的分享精神,我就将我自己的理解分享给大家. 使用es写一个类(构造函数) 在es5中大家一般都这么写一个类(构造函数) 另外需要注意,class类不会被提升. // 创建一个User构造函数 function User(name, age) { this.name = name; this.age = age; } // User构造函数的静态方法. User.getClassName = function

es6学习 -- let和const

在es6中let和const声明的变量都只能在其声明的块级作用域中使用,所谓的块级作用域就是{}这么一对大括号. 为什么需要块级作用域? ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景. 第一种场景,内层变量可能会覆盖外层变量. var tmp = new Date(); function f() { console.log(tmp); if (false) { var tmp = 'hello world'; } } f(); // undefined 上面代码的原

JavaScript ES6 promiss的理解。

本着互联网的分享精神,我将我对promise的理解分享给大家. JavaScript ES6的promise方法主要应用在处理异步函数返回的结果,注意他不是将异步函数转换为同步函数,而是等异步函数有结果时在调用相应的方法进行处理. promise有以下方法 then() - 它最多需要有两个参数,第一个是成功后调用的方法,第二个是失败后调用的方法. catch() - 失败后调用的方法,他与then方法的失败后调用的方法类似,但是使用上有些区别,等下我会用案例讲解. all() - 接收一个数组

es6(一):es6介绍以及let,const

es是js的规范,而js是具体实现 将es6转化为es5代码工具:运用的多的是babel 在线转换地址:babel,traceur(属于谷歌) 1.let申明变量:let其实可以完全取代var,并且没有var这么多副作用 1 { 2 var a = 10; 3 let b = 10;//let申明的变量是块级作用域 4 } 5 console.log(a)//10 6 // console.log(b)//b is not defined let很适合的一种场景是:for 1 for (let