js的var和let有什么区别

2021-02-08 作者：匿名阅读：1546次

前言

本文重点解决js的va和le有什么区别问题,希望能够帮助到你

1.let作用域局限于当前代码块

文章中//后面的均为打印结果

代码1：

{

var str1 = "小花";

let str2 = "小明";

console.log(str1); //小花

console.log(str2); //小明

}

console.log(str1); //小花

console.log(str2); //Error:str2 is not defined

let作用域仅限于当前代码块，而var的作用域是全局的

2.let作用域不会被提升

代码2：

{

console.log(str1); //undedined

console.log(str2); //str2 is not defined

var str1 = "小花";

let str2 = "小明";

}

let作用域不会被提升，而var作用域会被提升

代码2相当于：

{

var str1;

console.log(str1); //undedined

console.log(str2); //str2 is not defined

str1 = "小花";

let str2 = "小明";

}

3.let不能被重复定义

代码3：

var str1 = "小花1";

var str1 = "小花2";

let str2 = "小明1";

let str2 = "小明2";

上面这段代码运行会报错：Identifier 'str2' has already been declared

var重复定义后面的会覆盖前面的，而let则不行，会报语法错误，str2标识符已经被声明

4.let父子作用域

代码4：

<!DOCTYPE html>

<html>

<head>

<title>learn</title>

</head>

<body>

var btns = document.querySelectorAll('button')

for(var i=0;i<btns.length;i++){

btns[i].onclick = function(){

alert('点击第'+i+'个按钮')

}

</script>

</body>

</html>

此时不管点击哪个都是弹出点击第5个按钮，因为此时在点击的事件触发的时候，for循环已经走完了，而此时的i的值为5，此时i变成全局的了，所以不管点击哪个都会弹出点击第5个按钮。

代码5：

<!DOCTYPE html>

<html>

<head>

<title>learn</title>

</head>

<body>

let btns = document.querySelectorAll('button')

for(let i=0;i<btns.length;i++){

btns[i].onclick = function(){

alert('点击第'+i+'按钮')

}

</script>

</body>

</html>

将上面代码的var改成let，点击的时候就会依次弹出对应的i的值，因为此时let定义的变量i的生命周期到for循环最后的大括号就结束了，所以alert中的i和btns[i]中的i对应的就是每次循环的值。

以上四点就是let与var的区别，如果有问题可以在评论里提哦。

var 为什么会被 let 取代?很多哥们纠结标题取的不严谨或抠字眼，从而忽略了本文真正想要交流的内容。这让我很苦恼，起原先那个标题是因为我所在公司，我的一些技术好友，以及我在 github 上看到的一些源码，99% 看不到使用 var 了，对于 IOS 兼容、遗留老代码里仍使用 var 不在交流范围内。

先看用到 var 的一段代码。

function doSomething () {

for (var i = 0; i < 5; i++) {

console.log(i)

}

console.log('Finally ' + i)

}

doSomething()

打印结果：

Finally 5

i 在 for 语句里定义的，为什么在 for 语句外面仍然打印出来值了呢？？

再看用到 let 的一段代码。