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); //

 var a = [];
 for(avr i = 0; i < 10; i++){
     a[i] = function() {
        console.log(i)
     };
 }   
 
 a[3](); //
 //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](); //
 //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); //
 }

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';   //不同的作用域可以定义同名变量
}}}

3.块级作用域与函数声明

在es5的严格模式下，函数不能在块级作用域中声明，但浏览器没有遵守这个规定，在非严格模式下是可以运行的。es5的块级作用域如：if(true){}、try{}.

es6明确允许在块级作用域中声明函数。函数声明类似于let，只在块级作用域中有效。

function f() { console.log('outside'); }
(function () {
    if(false) {
        function f() { console.log('inside'); }
    }
    f();
})()
 
//在es5中会将函数声明提前,类似var，即会提升到全局作用域或函数作用域的头部
function f() { console.log('outside'); }
(function () {
    function f() { console.log('inside'); }
    if(false) {
    }
    f();  //声明提前会覆盖外层f() 函数，打印出inside
})()
 
//在es6中会将函数不会将声明提前
function f() { console.log('outside'); }
(function () {
    if(false) {
        function f() { console.log('inside'); }
    }
    f();  //打印出outside
})()

4.do表达式

　因为块级作用域是一个语句，没有返回值，外界无法访问里面的值，如果加上do，块级作用域就变成了表达式，可以有返回值。

//这是一个语句，外部无法拿到t值
{
  let t = f();
  t = t * t + 1;
}
 
//加上do，就变成表达式, x会得到整个块级作用域的返回值
let x = do {
  let t = f();
  t * t + 1;
}

3.const命令

const命令与let命令用法相似，const声明的是一个只读的常亮，一旦声明，值就不能改变，对const来说，不能只声明不赋值。