ES6新语法之let关键字;有别于传统关键字var的使用

时间:2020-11-27 17:05:49

ES6新语法于2015年发布;而我这个前端小白在17年才接触到。惭愧惭愧!!不过到目前为止,似乎只有FireFox和Chrome对ES6的支持相对良好。不过既然人家ES6已经出来了,还是要跟上技术的潮流。

ES6给我的感觉就是让js越来越靠近传统的编程语言,如java;比如里面的面向对象的思想和语法就很接近java。所以如果有学习后端语言的童鞋的话,理解相对可能会比较好一点。额额。。好像扯得有点距离。 

今天就只是说一下新增的let关键字:

传统的 var 关键字1:

   以前我们定义变量都是使用的var关键字。那么ES6要新增一个let关键字来替换var的话,原因在哪里?代码中来呈现:

ES6新语法之let关键字;有别于传统关键字var的使用

 

以上只是个很简单的小例子,以求能够说明问题即可。在for循环外面定义了一个变量n并且给它赋了值;而在for循环里面我又定义了一个变量n。循环结束之后在循环的外面调用n的值,结果为5;但是我这个时候想要的n的值是我之前的定义的n的值是等于10;现在却出现了与结果相悖。原因在于js是函数级作用域。上面的那个作用域是属于块级作用域的范围。恰好呢js没有!这就很好理解上面的小例子。也就是说,下面在循环体里面定义的n并不是一个局部变量,而是一个全局变量,它覆盖了上面定义的n。所以n自然是循环之后的结果。那如果我这么写:

ES6新语法之let关键字;有别于传统关键字var的使用

得到的结果是多少呢?不言而喻了。既然是函数级作用域了。函数里面的n自然就是局部变量了。在函数外面是无法访问的。

如果说上面的例子不太直观展现的话,可以来看看一个比较经典的例子

ES6新语法之let关键字;有别于传统关键字var的使用

运行arr[2]()函数之后的结果是2?还是10?结果又是不如人愿了。是10!!第一次敲得时候感觉有点小失望小崩溃。没有哪里存在语法错误,没有引用错误。但是结果就是10。永远不会得到2。究其原因又是我上面说到的作用域的问题。i这个时候是全局变量了。每一次的循环并不是一个单独体,而是一个受影响的整体。所以数组里的结果都是10;这个需要好好的理解一下。有点不太好懂。

传统的 var 关键字2:

var关键字还有一个比较明显的特质:变量提升的问题。变量提升,就是把变量的定义提升到函数的顶部,但是变量的赋值位置还是不变即赋值不会被提升。上面所说的作用域的问题可以和这个变量提升的问题一起合拢来看,也许对问题就有一个比较全面的理解。

ES6新语法之let关键字;有别于传统关键字var的使用

在这个简单的例子中,得到的结果不是报错而是undefined。原因就是变量a,b,c的定义提升了。而值没有提升。那么执行到输出的时候自然是undefined。

上面那个的执行情况如下

ES6新语法之let关键字;有别于传统关键字var的使用

这样看应该就比较好理解了。

说了那么多关于var的问题。那么来看看let是如何解决的

关键字let 1:

函数的作用域问题:

  let关键字是更像是传统的编程语言中的变量的使用。他使得变量有了块级作用域。

ES6新语法之let关键字;有别于传统关键字var的使用

 再来看上面那个要出错的循环语句,用let关键字之后:

]ES6新语法之let关键字;有别于传统关键字var的使用

明显得到了想要的结果!!因为用let声明i变量的时候,i不是全局了而是局部。每一次的循环都是一次单独的个体。上一次的不会影响下一次。所以能够得到正解!

关键字let 2:

在之前说过var关键字存在变量的提升问题,也就是变量的定义会提升到顶部。而let则没有这个问题。

ES6新语法之let关键字;有别于传统关键字var的使用

i在定义之间进行操作;在let里是不被允许的。而用var的时候不会报错,结果为undefined。这也说明了let不会存在变量提升的问题。所以使用的时候要先定义后使用。

由于let让js具有块级作用域,所以如果在块外面和里面都同时定义了相同的变量;那么块级里面进行操作的时候是不管外面有无定义,只管块级里面。

ES6新语法之let关键字;有别于传统关键字var的使用