探索ES6之let、const

ECMAScript 6 是JS的一个新的语法标准。随着nodejs的发展以及Babel等ES6编译器的兴起,ES6已逐渐被广泛使用。在本文中,我们将对ES6的let和const这两个新的定义变量关键字进行详解。

我们先来说说let。
在ES6出现之前,JS定义变量的关键字是var。常用的方式:var a = 12;

现在,我们用let定义一个变量。其方式一样:let a = 12;
讲到这里,大家会问let与var有什么区别呢?为了运行ES6代码,下面的例子代码在node环境中运行。(注:实现ES6运行环境的方法很多,在此不再赘述。)

区别一,let声明的变量具有块级作用域,而var声明的变量只有函数作用域。举个栗子:
分别用var和let在代码块中声明一个变量,在代码块外访问这个变量。结果如下:
代码:
{
var a=12;
}
console.log(a);
执行结果:
探索ES6之let、const
变量a为全局变量,在代码块外边仍然能访问。

代码:
{
let b=12;
}
console.log(b);
执行结果:
探索ES6之let、const
在代码块外边不能访问变量b,显示错误:b is not defined

区别二,let不允许重复声明同一个变量,而var可以重复声明同一个变量。举个栗子:
代码:
var a =1;
var a = 2;
console.log(a);
执行结果:
探索ES6之let、const
变量a的第二个值覆盖第一个值。

代码:
let b=1;
let b=2;
console.log(b);
执行结果:
探索ES6之let、const
出现错误提示,变量b已经被声明过了。

为了更好的理解let的新特性,我们可以拿选项卡这个功能来说明一下。
以前,前端人员在做选项卡时,经常会碰到如何获取每一项按钮的序号问题。通常,我们会用封闭空间的方式来实现。代码如下:
探索ES6之let、const

执行结果:
探索ES6之let、const

现在,有了let之后,我们可以更简洁的实现这个功能(目前,let关键字已被主流浏览器支持,可以直接使用
)。代码如下:
探索ES6之let、const

执行结果:
探索ES6之let、const

let声明的变量自身具有块级作用域,相当于一个匿名函数立即调用,可以直接实现这个功能。let的新特性是不是很好用?*。٩(^㉨^*)و*,大家可以勇于尝试一下。

平时,大家在做项目中肯定会遇到自己声明的非常重要的变量被污染的问题,由此引出的BUG一般是非常难排查的,非常影响团队的开发效率。即便使用命名空间等一些常用方式也难以避免。那ES 6给出解决方法了吗?答案当然是肯定的。ES6推出的const关键字就是用于声明不可修改的一些常量。举个栗子:

const a=12; //声明一个常量a

a=13; //修改常量a

console.log(a); //打印常量a

执行结果:
探索ES6之let、const
出现错误提示,常量a不能修改。

由于const声明的常量不能修改,因此声明的常量最好有初始值(没有初始值的常量相当于没用的常量)。另外,跟let一样,const声明的常量也不允许重复声明。举个栗子:
const a = 12;
const a = 13;
console.log(a);

执行结果:
探索ES6之let、const
出现错误提示,常量a不能重复声明。

至此,ES6的let、const就介绍到这里,若有不足之处,欢迎指正!

欢迎关注个人公众号,查看更多好文。探索ES6之let、const
探索ES6之let、const


上一篇:JQ插件jkscroll应用到页面中的效果


下一篇:前端兼容性问题记录