前端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