搭建Babel运行环境，块级作用域，let和const命令

Posted 2020-08-19

搭建Babel运行环境

Babel（http://babeljs.io/）可用于将使用ES6语法的脚本转化为ES5语法的脚本，基本功能的安装步骤如下：

1、安装node解释器和npm包管理工具

2、安装babel解释器  npm install -g babel

     （建议这个过程完成以后重启一下电脑，以免无法识别babel指令）

3、使用babel实现脚本转换，命令行进入js文件所在目录后   babel es6.js

      示例：新建一个demo01.js，代码如下：

//定义一个常量PI
const PI = 3.14;

console.log(PI);

4、使用babel实现脚本转换，输出到指定文件     babel es6.js > es5.js

      示例：把demo01.js转换成ES5语法的脚本    

       同一目录下新生成了一个es5.js的ES5语法的脚本

5、直接运行babel转换后的脚本    babel-node es6.js

      示例：在命令行运行demo01.js

在demo01.js里面定义的是一个常量PI，顾名思义，常量是不能重新赋值的，我们可以体验一下

/*  demo01.js  */
const PI = 3.14;
//给常量重新赋值
PI = 2.14;
console.log(PI);

很清晰的提示出哪里出错，错误类型是：给常量赋值

let命令

基本用法：

let用来声明一个变量，类似var，但是let声明的变量只在当前所在的代码块内有效

示例：新建一个demo02.js，代码如下：

{
    //用var声明一个变量a
    var a =10;
    //用let声明一个变量b
    var b =10;
}

//尝试在全局分别打出出变量a和b
console.log(a);
console.log(b);

变量a打印出来了，变量b报错，原因是b未定义。var声明的变量返回了正确的值，let声明的变量只在它所在的代码块内有效

由此可见，let命令一个非常好的应用场景就是for循环了

for(let i=0; i<10; i++){
    console.log(i);
}

再来看一个经典的闭包面试题：

用var 来声明变量i，i可在全局中使用，无论往arr数组里传的i是几(0-3之间)，都会被for循环出的最后那个值替代，而i=4时才跳出循环，所以两个都输出4

var arr=[];
for (var i=0; i<=3 ;i++ ){
    arr.push(function(){
        console.log(i);
    })
}
arr[0](); //4
arr[1](); //4

现在用let 来声明变量i，代码稍作修改

var arr=[];
for (let i=0; i<=3 ;i++ ){
    arr.push(function(){
        console.log(i);
    })
}
arr[0](); 
arr[1]();

运行结果输出的是0和1，这又是为什么呢？还是那句话“let声明的变量只在当前所在的代码块内有效”，所以每一次循环的i 其实都是一个新的变量

不存在变量提升

在js中，我们经常听到这么一句话“声明提前，赋值留在原地”

console.log(a);
var a =10;

但是，let 不像 var声明的变量那样会发生变量提升现象，所以，let 声明的变量一定要在声明后使用，否则就会错

console.log(b);
let b =20;

不允许重复声明

let 不允许在相同作用域内，重复声明同一个同名变量

//报错
function(){
    var a =10;
    let a =20;
}


//报错
function(){
    let b =20;
    let b =30;
}

因此，不能在函数内部重新声明参数。

function func(arg) {
  let arg; // 报错
  
}

function func(arg) {
  {
    let arg; // 不报错  
   }
}

本文出自 “dapengtalk” 博客，请务必保留此出处http://dapengtalk.blog.51cto.com/11549574/1872077