前端ES6学习笔记（1）：let和const

前端ES6学习笔记（1）：let和const

ES6新增了let关键字和const关键字，他们与var最大的区别在于作用域。
在es6之前，没有块作用域的概念，只有函数作用域和全局作用域
如下

{
  let a=10；
  var b=1；
  const c=20;
}
a //ReferenceError: a is not defined.
b //1
c //ReferenceError: c is not defined.

const和let都把变量的作用域限制于{}块内，而var不会。
这个使得let比var更适合做for循环的计数器

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

var b=[];
for(let i=0;i<10;i++){
    b[i]=function(){
       console.log(i);
   }
}
b[5](); //5

用var声明的i因为不在函数内，所以是全局的变量，全局只有一个i，而console.log(i)的i指向全局的i，每次循环都加一，所以最后都是输出全局的i，也就是10。
用let声明的i，是限制于块作用域，只会在每次循环的那一轮有效，也就是说i=6和i=7的两个i指向不同的i。在js内部会有记录上一轮循环的值，所以即使i在下一轮是新声明的，它也能通过上一轮的值+1来进行赋值。

变量提升

我们知道var是会有变量提升的
console.log(a) //undefined
var a=1;

console.log(b) //ReferenceError
let b = 1

console.log(d) //ReferenceError
const d=1;
var导致变量提升所以是undefined，let和const不存在变量提升。

暂时性死区

这是let比较有趣的地方

var tmp='abc';
if(true){
    tmp='def';
    let tmp;
}

上面代码会报错，let使得这个{}内的tmp不再受外部（全局变量或者父级变量）的影响，报错是因为tmp使用在let之前。

function bar(x=y,y=2){
    return [x,y];
}

这种死区不容易发现，参数y的声明在使用之后，会报错。如果是（x=2，y=x）则不会，因为x声明了才使用

不可重复声明

{
    let a=1；
    let a=2；
} // 会报错
{
  var a=3；
  let a=4；
}// 报错
function f（a）{
 let a=5；
}//报错
function f（a）{
{let a=6； }//不报错
}

const本质

const声明变量必须立即初始化，且常量的值不能改变。
const和let有一样的作用域。

实际上，const声明的变量并不一定不能修改，const本质上是变量指向的地址不能修改，对于简单类型（number，bool，string），它们的值都存在固定地址中，所以不能修改指向地址即相当于不能修改值，而对于数组和对象，const只能保证变量指向的地址是该对象的指针。至于该对象是否改变不能保证。如下代码

const con={};
con.prop=123;
console.log(con.prop) //123
con= {} // TypeError: "con" is read-only

数组也是

const a=[];
a.push('Hello'); //不报错
a.length = 0;  //不报错
a = ['Dave'] //报错

冻结对象

可以通过冻结对象将对象的值不可改变

var constantize=(obj) =>{
    Object.freeze(obj); //冻结对象方法
    Object.keys(obj).forEach((key,i)=>{
    if(typeof obj[key]==='object'){
   constantize(obj[key]);
   }
})
}

顶层对象属性

var会修改顶层对象
var a=1;
window.a //1;
let 不会
let b=2;
window.b //undefined