ES6新增的const和let同var之间的对比
1. var
2. let
3. const
1. var:可以重复声明、无法限制修改、没有块级作用域
1.1、变量可以重复声明
var a = 12;
var a = 5;
console.log(a); // 5
1.2、可以被修改
var b = 12;
b = 5;
console.log(b) // 5
1.3、没有块级作用域
if(true) {
var c = 12
}
console.log(c) // 12
PS: JS里面的作用域在{}之间可以作为一个作用域 在里边的变量外边用不了
举个栗子
HTML:
<input type="button" class="btn" value="按钮1">
<input type="button" class="btn" value="按钮2">
<input type="button" class="btn" value="按钮3">
JS:
var allBtn = document.getElementsByTagName('input');
for(var i = 0; i < allBtn.length; i++) {
allBtn[i].onclick = function () {
alert(i) // 无论点哪个按钮都是弹出3
}
}
解决:利用函数作为一级作用域,利用函数帮垫了一层
var allBtn = document.getElementsByTagName('input');
for(var i = 0; i < allBtn.length; i++) {
(function (i) {
allBtn[i].onclick = function () {
alert(i) // 解决以上问题
}
})(i)
}
2. let:不能重复声明 变量-可以修改 块级作用域
2.1、变量不可以重复声明
let d = 12
let d = 5
console.log(d) // 报错
2.2、有作用域
{
let e = 12
}
console.log(e) // 报错
利用let解决上面var 作用域的问题
var allBtn = document.getElementsByTagName('input');
for(let i = 0; i < allBtn.length; i++) {
allBtn[i].onclick = function () {
alert(i) // 依次按下0/1/2
}
}
3.const:不能重复声明 变量-可以修改 块级作用域
3.1、 不能重复声明。否则报错
const f = 12
const f = 12
console.log(f) // 报错
3.2、其值不能修改
const g = 12
g = 5
console.log(g) // 报错
3.3、有块级作用域
{
const h = 12
}
console.log(h) // 报错