一、let命令
let与var的区别:
1、存在块级作用域
在es6中使用let来定义一个变量,那么这个变量只在当前块级作用域内有效。举个例子:
{
var a = 3;
let b = 5;
}
console.log(a); // 3
console.log(b); // Uncaught ReferenceError: b is not defined
用var定义的a输出结果为3,用let定义的变量b则会报错undefined,证明let定义的变量只在当前块中有效。
2、let不存在变量提升
什么是js中的变量提升呢?看下面的代码:
console.log(a); //undefined
var a = 10;
console.log(a);//10
我们可以看到在第一个console.log中输出为undefined,并未报错,可是不应该是先声明再使用的吗,这之前并没有声明变量a啊?这就是变量提升,变量和函数的声明都会被自动提到最前面,和下面的是一样的:
var a;
console.log(a);
a = 3;
console.log(a);
变量a的声明提到了最前面,因此console.log(a)不会报错。
在es5中比变量提升通常会使得我们的写法很灵活,也会有混乱,在es6中加强了这一部分,不允许存在变量提升,必须先声明后使用。
3、let不允许在同一作用于内重复声明变量
var a = 10;
var a = 20;
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
var a = 10;
var a = 20;
console.log(a); //20
let b = 3;
let b = 5;
console.log(b); //Uncaught SyntaxError: Identifier 'b' has already been declared
我们可以看到当用var重复定义变量a时,a的值会被覆盖,输出20;但是用let中报错。
4、let在for循环中体现父子作用域
我们来做一个简单的小例子:现在有5个button按钮,当我点击第一个按钮会alert一个点击了第1个按钮,点击第五个会弹出点击了第五个按钮。
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
var btns = document.getElementsByTagName('button');
for(var i=0;i<btns.length;i++){
btns[i].onclick = function (){
i+=1;
alert('点击了第'+ i +'个按钮');
}
}
这里我们点击任意按钮,弹出框都显示点击第5个按钮。这是由于for循环是个同步事件,下面的触发事件是个异步事件,当我们触发点击事件后,会在当前作用域寻找,没有找到就是在上一级for中寻找,此时i的值为5,因此无论点击哪一个按钮都是5。此时i通常我们会使用一个闭包来解决这一问题。
var btns = document.getElementsByTagName('button');
for(var i=0;i<btns.length;i++){
(function(i){
btns[i].onclick = function (){
i+=1;
alert('点击了第'+ i +'个按钮');
}
})(i);
}
闭包中的i和for中的互不影响,存在于两个作用域中,这样就可以达到我们想要的效果了~
在es6中我们可以使用let轻松的解决这一问题,只需要用let定义变量i:
let btns = document.getElementsByTagName('button');
for( let i=0;i<btns.length;i++){
btns[i].onclick = function (){
i+=1;
alert('点击了第'+ i +'个按钮');
}
}
因为let中是存在父子作用域的,两个作用于互不影响。
二、const命令
1、存在块级作用域;
2、作用域不会被提升;
3、不允许在同一作用域内重复声明;
以上三条与let是一样的。
4、声明的常量必须复制,且一旦声明,就不可以更改。
const a; //错误
本质:const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指针,const
只能保证这个指针是固定的,至于它指向的数据结构是不是可变的,就完全不能控制了。
const a = {};
//为 a 添加一个属性,可以成功
a.prop = 123;
a.prop;//123
//将 a 指向另一个对象,就会报错
a = {}; //TypeError: "a" is read-only