搭建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; // 不报错 } }