观察babel如何把let转化为var实现块级作用域

在讲述javascript没有块级作用域的时候都会提到一个非常经典的例子：

var obj={
name:'helo',
age:15
};
var arr=[];
for(var i=0;i<5;i++){
arr[i]=i;
console.log(i);
}
console.log(arr);
console.log(i);

因为javascript没有块级作用域，所以控制台打印出来的结果是：



具体什么原因这里不再赘述，有兴趣的可以去参考《javascript高级程序设计》

后来在es6上出现了一个可以定义块级块级作用域的声明let.不过由于当前浏览器对es6的支持不好，所以需要用 babel来实现es6到es5的转换。

难道es6用了什么黑科技实现了块级作用域吗？转换后的结果就比较有趣了。

'use strict';

var obj = {
name: 'helo',
age: 15
};
var arr = [];
for (var _i = 0; _i < 5; _i++) {
arr[_i] = _i;
console.log(_i);
}
console.log(arr);
console.log(i);

这个结果也是醉了，现在你发现了并没有什么黑科技，只是在for里面的i变量前加了一个下划线，而console.log()里面的i却没变，怪不得打印出来的i是undefine。



所以说，如果目前大部分的浏览器不支持对es6的支持不友好的话，单靠这些转换工具，只能解决部分的需求，并不能完全解决所有问题。

当然了，这也不能阻挡我们学习新知识的热情！（=´∇‘=）

最后，如果真的需要局部作用域，还可以使用闭包来解决