ES6学习笔记(1)----let和const命令

参考书《ECMAScript 6入门》
http://es6.ruanyifeng.com/

let和const命令

let 总结
1.声明变量基本使用方法与var 相同
  不同点
  a.在代码块中使用let声明的变量只在代码块中有效，代码块外无法访问，而用var声明的在代码块外也可以访问。可以利用这点声明局部变量，也可用它解决js中的for循环闭包的问题
 
  ****闭包的解释****
 
  function out(){//外部函数
    var arr = [];
    for(var i = 0; i < 3; i ++){
        arr[i] = function(){//匿名函数
            console.log(i);
        }
    }
    return arr;
  }
 
  out()[0]();
 
  期待结果 0
  实际结果 2
 
  造成结果偏差的原因就是闭包
 
  闭包的定义：有权访问另一个函数作用域中的变量的函数
 
  在此例子中，函数out内部创建了另外一个匿名函数，并且这个匿名函数可以访问out的变量i，这就形成了闭包（实现了匿名函数有权访问out的作用域中的变量）
 
  解决闭包的方法
 
  M1.匿名函数自执行传参
  function out(){//外部函数
    var arr = [];
    for(var i = 0; i < 3; i ++){
        arr[i] = (function(number){//匿名函数
           console.log(number);
        })(i);
        //使用()()利用匿名函数自执行的方式将参数传递给匿名函数使用
        //这里每循环执行一次i,i就会作为参数进行匿名函数自执行，然后最终结果就是0,1,2
    }
    return arr;
  }
  out();//0,1,2
  M2.将参数传给匿名函数的变量
  function out(){//外部函数
    var arr = [];
    for(var i = 0; i < 3; i ++){
        arr[i] = function(number){//匿名函数
           console.log(number);
        }(i)//和(function(){})()是一个意思，都是告诉浏览器自动运行这个匿名函数，这时将参数传给匿名函数的参数，可以不用加()
    }
    return arr;
  }
  out();//0,1,2
  M3.let 定义块级作用域变量的方式
  function out(){//外部函数
    var arr = [];
    for(let i = 0; i < 3; i ++){
        arr[i] = function(){//匿名函数
           console.log(i);
        }
    }//let声明的变量是块级作用域变量，每次循环都生成一个新的变量i，所以console.log(i) 也只能返回for循环内部的每次i,无法像var 定义的一样返回访问全局的i
   return arr;
  }
  out()[0]();//0
 
  b. let 不支持变量提升
 
  console.log(a); //会报ReferenceError错误，表示不存在这个变量。在代码块中，使用let/const声明变量前,变量都是不可用的，称为“暂时性死区”
  a = 23;//ReferenceError
  typeof a;//ReferenceError
  let c = c;//ReferenceError  c还没有完成变量声明，不可以用来赋值
  function test(x = y,y = 2){return x+y};//ReferenceError: y is not defined   在给x赋值y时，y还没有声明
  //暂时性死区本质：在块级作用域里，变量只有等到声明变量的那一行代码出现时，才可以赋值和使用，不然都会报错
  let a = 9;  
 
  console.log(b);//undefined 当用var声明变量时，浏览器运行时会先声明这个变量b，但是b没有赋值，就输出undfined
  var b = 9;
 
  c.let不支持重复声明变量
 
  funtion test(){var a = 1;var a = 2;}
  test();//不报错 undefined
 
  funtion test(){let a = 1;var a = 2;}
  test();//报错 Uncaught SyntaxError: Identifier 'c' has already been declared
 
  funtion test(){var a = 1;let a = 2;}
  test();//报错 Uncaught SyntaxError: Identifier 'c' has already been declared
 
  funtion test(){let a = 1;let a = 2;}
  test();//报错 Uncaught SyntaxError: Identifier 'c' has already been declared
 
  function action(event){let event = event || window.event}
  action();//Uncaught SyntaxError: Identifier 'event' has already been declared
 
  function action(event){var event = event || window.event}
  action();//不报错
 
2. let命令声明了js的块级作用域

var a = 1;
function test(){
  console.log(a);//undefined  此处发生了变量提升，这里的a指的是if中的那个a
  if(true){
     var a = 3;
  }
  console.log(a);//3  此处的a是if中重新声明赋值的a
}

let b = 1;
function test(){
  console.log(b);//1 第一个let作用域内的b
  if(true){
     let b = 3;
  }
  console.log(b);//1  第一个let作用域内的b
}

立即执行函数等同于let块级作用域
(function(){var c = ..........;}())------------{ let c = ......;}

es6可以在块级代码中声明函数

if(true){
  function test(){}//函数声明语句
}

if(true){
 let c = function(){}//函数表达式
}

const 总结
1.声明常量，声明的同时就要赋值，且不允许再被改变
const NATURE = 3//ok
const NATURE1;//报错Uncaught SyntaxError: Missing initializer in const declaration，必须声明的同时赋值

2.块级作用域，不支持变量提升，暂时性死区，同一作用域内不允许重复声明变量与let一致

const obj = {}
obj.name = '123'//ok 给对象增加属性属于对象obj的功能
obj = {"name" : "123"};//报错 常量obj不可以重新赋值

小结：ES6是ES5的升级版
      ES5有两种声明变量的方法：var，function
      ES6有六种声明变量的方法：var,function,let,const,import,class