搭建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
搭建Babel运行环境,块级作用域,let和const命令