es6中 var 和 let的区别

时间:2023-03-10 00:17:56
es6中 var 和 let的区别

区别1:var没有块级作用域,只有 函数级作用域 和 全局作用域;let有块级作用域

function fn() {
{ var a = 10; }
console.log(a) //输出10
}
fn()
function fn() {
{ let a = 10; }
console.log(a) //报错,a未定义
}
fn()

区别2:let只能先声明后引用;var可以在声明前引用,但声明前引用的值一律是undefined

function fn() {
console.log(a) // 报错,a 未定义
let a = 10;
}
fn()
function fn() {
console.log(a) // undefined
var a = 10;
}
fn()

区别1和区别2 社区里合起来的叫法就是:var会引起变量提升,let不会

区别3:var可重复声明,后续声明会覆盖前面的;let同一作用域内只能声明一次,且不能和var声明的变量同名

这个就不举例了,自己去试。

区别4:浏览器中,var声明的全局变量,是挂载在全局对象window上的;let声明的全部变量没有挂在全局对象上

    let a = 5;
var b = 6;
console.log(window.a, window.b) // 输出undefined,6

区别5:就是for循环了

for (let i = 0; i < 10; i++) {
setTimeout(() => {
console.log(i); // 输出 0 到 9
}, 10);
}
for (var i = 0; i < 10; i++) {
setTimeout(() => {
console.log(i); // 输出 10 个 10
}, 10);
}

在给结论前,先看另外两个关于let的例子:

let i = 0
for (; i < 10; i++) {
setTimeout(() => {
console.log(i); // 输出 10 个 10
}, 10);
}
for (let i = 0; i < 10; ) {
setTimeout(() => {
console.log(i); // 输出 1 到 10
}, 10);
i++
}

当 i 在循环中的块级作用域时,每次循环都会创建一个全新的变量,并且锁定一个独立的作用域。