es6小白学习笔记(一)

1.let和const命令

1.es6新增了let和const命令，与var用法类似，但它声明的变量只在let所在的代码块内有效(块级作用域，es5只有全局和函数作用域)

 {
     let a = 1;
     var b = 2;
 }
 console.log(a); //a is not defined  let声明的变量只在自己的块内有效
 console.log(b); //2

 var a = [];
 for(avr i = 0; i < 10; i++){
     a[i] = function() {
        console.log(i)
     };
 }   

 a[3](); //  10
 //a[3])() 打印出来是10，i是var声明的，在全局范围内都有效，所以每一次循环，新的i值都会覆盖旧值，所以最后i是10

 var a = [];
 for(let i = 0; i < 10; i++){
     a[i] = function() {
        console.log(i)
     };
 }
 a[3](); //  3
 //a[3]()  打印出来是3，变量i是let声明的，且仅在块级作用域内有效，每个i都是不同的作用域，所以最后输出3

2.不存在变量提升

变量提升的意思是把下边的东西提到上面，在JS中，就是把定义在后面的东西（变量或函数）提升到前面来定义。

eg:  var会存在变量提升

 var v=‘Hello‘;
 (function(){
     alert(v);
     var v=‘World‘;
 })() ;
 //这段代码alert出来的是undefined，就是因为存在变量提升，会把定义提到前面去，赋值不会提升，变量提升之后的代码如下：

 var v=‘Hello‘;
 (function(){
     var v;
     alert(v);
     v=‘World‘;
 })() ;

使用let命令就不会存在变量提升，所以一定要先声明后使用。

3.暂时性死区

ES6明确规定， 如果区块中存在let和const命令， 这个区块对这些命令声明的变量， 从一开始就形成了封闭作用域。 凡是在声明之前就使用这些变
量， 就会报错。

 var tmp = ‘www‘; if (true) {
     tmp = ‘abc‘;   // tmp is not defined
     console.log(tmp);   // tmp is not defined
     let tmp;
     console.log(tmp); // undefined
     tmp = 123;
     console.log(tmp); // 123
 }

es6使用let和const，是为了避免var没有声明就使用所带来的一些问题。

4.不允许重复声明

//以下这几种都会报错
function() {
  let a = 1;
  var a = 2;
}

function() {
  let a = 1;
  let a = 2;
}

function fun( arg ){
  let arg;
}

//不报错，两个arg属于不同的块级作用域
function fun( arg ){
  {
      let arg;
   }    

}    

2.块级作用域

1.在es5中没有块级作用域

//第一种场景：内层变量覆盖外层变量var tmp = new Date();
function f() {
    console.log(tmp);
    if (false) {
    var tmp = ‘hello world!‘
    }
}
f(); //undefined   变量提升，内层变量覆盖了外层变量

//第二种场景：循环变量泄露为全局变量
var s = ‘hello‘;
for (var i = 0; i < s.length; i++) {
    console.log(s[i]);
}
onsole.log(i); // 5    循环结束后 i泄露为全局变量

2.es6的块级作用域，let和const

一对{}就代表一个块级作用域，可以任意嵌套

{{{
    {let aa = ‘hello‘}
    console.log(aa); //报错
}}}

{{{
    {let aa = ‘hello‘}
     let aa = ‘world‘;   //不同的作用域可以定义同名变量
}}}