最近决定专心的研究一下ES6,然后自己上网看看资料,有一点小小的收获,给大家分享一下。
ES6说简单的确是简单的,因为它相对于ES5来说,是一种优化,等于说是间接的减少了我们学习JS的难度,并且它也一直都在完善。听到这里,大家一定都很疑惑,为什么说它在完善呢?其实,现在的ES6并没有完整,而是在开发阶段,而且近几年,一年发布一个最新的版本。所以目前为止的最新版本是ES2016版本的。
好了,也不再说那么多了,直接切入正题吧。我们先谈谈ES6的一些基础的东西。
今天我们要说的是,ES6的申明变量与常量。ES5的申明变量与相信大家都不陌生,它和ES6的区别如下所示:
ES5:`var 变量名;const 常量名=常量`;
ES6:`let 变量名;const 常量名=常量`
一看,有的人就会认为var和let是一个意思,但是很遗憾,var和let其实差别真的很大,它们的区别主要是来自以下几个方面:
1.let只在当前所在的代码块内有效,什么意思呢?举个栗子:
`{var a=1;
letb=1;}
console.log(a);
console.log(b)`
大家可以猜猜,输出的结果是什么呢?1,1吗?不,输出的其实是1和一个“ReferenceError: b is not defined”错误。通过这个例子就可以充分的说明,let只在当前所在的代码块内生效.说道当前代码块有效,大家第一时间想到的一定是局部变量,的确,let定义的变量都可以称之为一个局部的变量。
2.let定义的变量不会申明提前,什么意思呢?举个栗子:
console.log(a);
console.log(b)
var a=1;
let b=1;
第一个输出的结果相信大家明白了,那就是undefined,那第二个大家知道了吗?undefined?no,答案是:ReferenceError
为什么两个都是申明变量,但是结果却不同呢?那是因为在ES5里面,var申明的变量都会提前到代码块的最前面去申明,但是赋值操作会留在原地,如果在var前面去调用这个变量,会得到一个已经申明但是没有赋值的变量,所以输出的是undefined。但是let不同,它所申明的变量不会被提前申明,如果在代码块里,在let前面去调用这个变量,那么得到的是一个没有申明的变量,所以就会报一个错误(ReferenceError);
3.let暂时性死区 ,什么叫暂时性的死区呢?结合第1、2点,我们可以大胆的去推测,假设,代码如下所示,会发生什么样的结果呢?
var a=1;
{
console.log(a);
let a=5;
}
上面的代码输出的是什么呢?有人会说,a在代码块外面申明了,那应该是输出1,也有的人抱有疑惑的态度,那么我就揭晓正确答案,正确的答案是(Uncaught ReferenceError: a is not defined);这就是let的暂时性死区,只要代码块里面用let申明了一个变量,那么整个代码块里面的这个变量就和let的申明结合到一起去了,而外面的申明对代码块里面的变量是毫无影响的。而且它也遵循第1、2点。这就是暂时性死区。
4.不允许重复声明 举个栗子:
{
var a=5;
var a=10;
console.log(a)
}//这串代码执行是没有问题的,结果是10;
{
let a=5;
var a=10;
}//这串代码执行是有问题的,结果是(Uncaught SyntaxError: Identifier 'a' has already been declared);
所以说,在代码块里面,用let申明了一个变量,那么就不允许在代码块里面对它进行第二次的申明。
以上就是我对ES6的let的一点简单的了解,欢迎点评哦。。
然后再简单的说一下const。
const ES6和ES5用法是一样的,都会遵循,1.一旦定义,决不能改变。2.一旦定义,必须赋值。
但是ES6和ES5的区别是:1.ES6里面的const也会遵循只在当前所在的代码块内有效、定义不会申明提前、暂时性死区、不允许重复声明。并且如果申明一个对象为常量,const命令只是保证变量名指向的地址不变,并不保证该地址的数据不变,所以将一个对象声明为常量必须非常小心。什么意思呢
const obj = {};
obj.a = 1;
obj.a// 1
obj = {}; // TypeError: "foo" is read-only
数组也是同一个道理,如果要冻结整个常量,不要它改变,建议使用Object.freeze;用法如下所示:
const obj = Object.freeze({});
// 常规模式时,下面一行不起作用;
// 严格模式时,该行会报错
obj.a = 1;
今天就说到这里哦,欢迎大家多多补充哦