1、var与let的区别:
(1)使用var可以重复声明变量,而let不可以
let a = 10;
let a = 20;
console.log(a); //使用let重复声明变量报错,如下
//Uncaught SyntaxError : Identifier 'a' has already been declared
(2)var的作用域:全局作用域与函数作用域(局部作用域)
let的作用域:全局作用域与块级作用域(大括号包着的区域-相当于局部作用域)
{
let x = 3;
console.log(x);
}
console.log(x); //这里已经超出块级作用域的范围,会报错,如下
//Uncaught ReferenceError : 'x' is not defined
(3)var可以预解析(变量提升),而let不可以,它严格遵守先声明后使用
//Uncaught ReferenceError : Cannot access 'a' berfore initialization
由于ie低版本不兼容es6新语法,所以在使用的使用优先考虑兼容性的问题
如果不考虑兼容的话, 优先推荐使用let/const
2、let的使用:let用来声明变量
块级作用域,声明在其中的变量,出了这个作用域就失效了
var x =2;
{
let x = 3;
console.log(x); //3 此时x在块级作用域中取值是3
}
console.log(x); //2 这里已经是全局作用域中,超出let的块级作用域范围,所以最终x取值还是2
案例:let在for循环中的运用
html代码:
<ul class="list">
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
js代码:
let lis = document.querySelectorAll("li");
for (let i = 0 ; i < lis.length ; i++){
//与var不同,使用let不需要再另外去存i的值
lis[i].onclick = function(){
console.log(i); //点击当前li,会输出当前li的索引值
console.log(this.textContent); //点击当前li,输出对应的li内包含的文本内容
}
}
3、const的使用:
(1)const 用来声明常量
(2)const声明变量时必须赋一个初始值
(3)其他情况与let一致(不重复,块级作用域,不可预解析)
//修改const声明的常量会报错
const b = 20;
b = 30;
console.log(b);
// 常量可以定义成对象
const obj = {"key": "value"};
// 重写对象和上面一样会失败
obj = {"newKey": "value"}; //Uncaught TypeError: Assignment to constant variable.
// 对象的属性并不在保护的范围内,下面会成功执行
obj.key = "newValue";
console.log(obj); //{“key”:“newValue”}
// 也可以用来定义数组
const arr = [];
// 可以向数组中添加数据
arr.push('A');
console.log(arr); //[“A”]
// 但是,将一个新数组赋给变量会引发错误
arr = ['B']; //Uncaught TypeError: Assignment to constant variable.