那这个最重要的特性就是啥呢?叫做块级作用域。唠到作用域想必你应该知道在 ES5 中存在两个:全局作用域和函数作用域,但在 ES6 中又新增了一个块级作用域。
为什么需要块级作用域想唠明白什么是块级作用域,咱就得从为啥需要块级作用域唠起啊~ 规矩不变,还是先看段代码:
var a = "a" function fn() { console.log(a) if (false) { var a = "b" } } fn()你觉得这段代码运行之后打印的结果应该是啥?是 a?是 b?还是... ...?其实结果是 undefined。当然了,这个结果不难得出,你运行一下就能看到。关键在于,为啥是这么个结果?!
因为就在于 ES5 只有全局作用域和函数作用域,而上面这段代码的结果产生的原因就在于局部变量覆盖了全局变量。当然了,还有比这更麻烦的问题呢,比方说咱们再看下面这段代码:
for (var i = 0; i < 5; i++) { console.log("循环内:" + i) } console.log("循环外:" + i)是不是无比地熟悉吧?!不就是个 for 循环嘛!关键在哪?关键在于 for 循环结束之后,你会发现依旧能访问到变量 i。这说明啥?说明变量 i 现在是一个全局变量。当然了,你可能会说这没啥问题,毕竟之前一直不都是这个样子的嘛。
什么是块级作用域但是,大叔要和你说的是,现在不一样了啊,现在有块级作用域啦!啥是块级作用域?还是看段代码先:
if (true) { let b = "b" } console.log(b)这段代码运行之后打印的结果是报错,报错的内容是:SyntaxError: Lexical declaration cannot appear in a single-statement context。
这说明啥?这就说明现在你使用 let 声明的变量在全局作用域中访问不到了,原因就是因为使用 let 声明的变量具有块级作用域。
接下来你的问题可能就是这个块级作用域在哪呢吧?其实这个块级作用域就是在花括号({})里面。比方说,咱们现在把上面那个 for 循环的代码用 let 改造一下再看看:
for (let i = 0; i < 5; i++) { console.log("循环内:" + i) } console.log("循环外:" + i)改造完的这段代码运行之后的结果就是在循环结束后的打印结果是报错,报错内容大叔就不说了,因为都一个样。
块级作用域的注意事项整明白了啥是块级作用域,接下来大叔就得和你唠叨唠叨需要注意的事儿了。就是在使用 let 关键字声明块级作用域的变量时可必须在这对 {} 里面啊,不然同样也会报错滴。
比方说,咱们经常在使用 if 语句时爱把 {} 省略,但是如果 if 语句里面是使用 let 声明变量的话就不行了。不信来看段代码吧:
if (true) let c = 'c'这段代码的运行结果同样是报错,而且报错内容都是一样的。可是不能忘记哦~
块级作用域的作用好了,整明白啥是块级作用域了,也唠清楚需要注意的了,你是不是想问问这块级作用域有啥子用处啊?大叔都想你心里面去了,嘿嘿~
你知道匿名自调函数吧?还记得怎么写一个匿名自调函数吗?是不是这样婶儿的:
(function(){ var msg = 'this is IIFE.' console.log(msg) })()还记得匿名自调函数的作用不?是不是就是为了定义的变量和函数不污染全局命名空间?!有了 let,有了块级作用域,上面这段匿名自调函数就可以写成这样婶儿的:
{ let msg = 'this is IIFE.' console.log(msg) }简化了不少吧?!
写在最后的话好了,整到这儿,ES6 新增的 let 关键字所有大叔想和你唠扯的内容都唠扯完了,也希望能对你有所帮助。最后再说一句:我是不想成熟的大叔,为前端学习不再枯燥、困难和迷茫而努力。你觉得这样学习前端技术有趣吗?有什么感受、想法,和好的建议可以在下面给大叔留言哦~