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

搭建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; // 不报错  
   }
}
时间: 2024-11-05 11:42:44

搭建Babel运行环境,块级作用域,let和const命令的相关文章

php javascript C 变量环境 块级作用域

<?php $w = 'w'; $wb = '123'.$w; $w = 'ww'; echo $wb; if(TRUE){ $wd = '123wd'; } echo $wd; if(FALSE){ $we = '123wd'; } var_dump($we);

ES6 之 let和const、块级作用域

let let 声明的变量只在其所在的代码块内有用 不存在变量提升 只要在会计作用域中存在let命令,它所声明的变量就绑定这个区域 不允许重复声明 ES6块级作用域 外层代码不受内存代码块的影响 ES6规定,在块级作用域之中,函数声明类似于let 允许在块级作用域内声明函数 函数声明会提升到所在块级作用域的头部 const const声明一个只读常量,一旦声明,常量的值就不能改变 只在声明所在的块级作用域内有效 const声明的常量与let命令相同,只在声明所在的块级作用域内有效 const不存

ES6入门一:块级作用域(let&amp;const)、spread展开、rest收集

let声明 const声明 块级作用域 spread/rest 一.let声明与块作用域 在ES6之前,JavaScript中的作用域基本单元就是function.现在有了let就可以创建任意块的声明,也被称为作用域块.这意味者只需要“{}”就可以创建一个作用域.不再像var声明变量那样总归属于包含函数或全局.例如: 1 var a = 2; 2 { 3 let a = 3 4 console.log(a); //3 5 } 6 console.log(a); //2 在相关的资料中看到有介绍,

ES6标准入门 第二章:块级作用域 以及 let和const命令

一.块级作用域 1.为什么需要块级作用域? ES5中只有全局作用域和函数作用域,带来很多不合理的场景. (1)内层变量可能会覆盖外层变量: var tem = new Date(); function f(){ console.log(tmp); if(false) { var tmp = "hello world"; } } f(); //undefined 变量提升导致了外层的内层的tmp变量覆盖了外层的tmp变量. (2)用来计数的循环变量泄露为全局变量: var s = &qu

bala001 浏览器中的JavaScript执行机制:09 | 块级作用域:var缺陷以及为什么要引入let和const?

前言:该篇说明:|请见 说明 —— 浏览器工作原理与实践 目录 在前面<07 | 变量提升:JavaScript 代码是按照顺序执行的吗?>这篇文章中,我们已经讲解了 JavaScript 中变量提升的相关内容,正是由于 JavaScript 存在变量提升这种特性,从而导致了很多于直觉不符的代码,这也是 JavaScript 的一个重要设计缺陷. 虽然 ECMAScript6(以下简称 ES6 )已经通过引入块级作用域并配合 let.const 关键字,来避开了这种设计缺陷,但是由于 Java

ES6之块级作用域

一.前言 在ECMAScript6(以下简称ES6)之前,ECMAScript的作用域只有两种: 1.  全局作用域: 2.  函数作用域. 正是因为有这两种作用域,所以在JavaScript中出现一术语--“变量提升(hoisting)”. 如下: function func(){ console.log(test); var test = 1; }; func(); 在node环境执行上述代码,结果为: 之所以为’undefined’,原因就在于‘变量提升’,在进入func函数时,将所有通过

JavaScript的作用;JS常见的三种对话框;==和===的区别;函数内部参数数组arguments在函数内部打印实参;JS的误区:没有块级作用域

JS:客户端(浏览器)脚本语言 弱类型 基于原型 事件驱动 不需要编译(直接运行) JS的作用:表单验证,减轻服务端的压力 添加页面动画效果  动态更改页面内容  Ajax网络请求 (一)常见的对话框 alert()对话框:该方法是window对象的方法,在浏览器中弹出一个对话框(该方法没有返回值)  prompt()对话框:2个参数,一个是浏览器提示信息,第二个是默认的输入框的值,返回值就是输入框的信息  confirm()对话框:在浏览器弹出一个对话框,用户只能选择正确或者取消,返回值对应为

js没有块级作用域

今天看一篇介绍ECMAscript6的博文时,看到let命令的时候突然有点蒙逼....... let命令:let用于变量声明,与var用法类似,但是let是一个局部变量,只在声明的代码块中有效. { let a = 10; var b = 20; } a // not defined b // 20 看到这我觉得这个块级作用域是函数作用域,但是块级作用域和函数作用域是不一样的,比如: function demo(){ var a=1; } console.log(a); a//not defin

javascript中的闭包、模仿块级作用域和私有变量

闭包是指有权访问另一个函数作用域中的变量的函数.创建闭包的常见方式为:在一个函数内部创建另一个函数. "当某个函数被调用时,会创建一个执行环境(execution context)及相应的作用域链.然后,使用arguments和其他命名参数的值来初始化函数的活动对象(activation object).但在作用域链中,外部函数的活动对象始终处于第二位,外部函数的外部函数的活动对象出于第三位.....直至作用域链终点的全局执行环境." function creawteCompariso