js中var、let、const的区别与使用，三句话看明白，送你

某天维护一个项目，web页面中对 js 变量的定义，都是使用 let，而我之前一直习惯用 var，加了一段业务逻辑后，页面就加载不出来了，浏览器的控制台报了个 undefined，全局变量声明了呀，怎么还报错呢？这就涉及到以下几个问题：

1. var、let 的区别与使用，你知道吗？
2. var、let、const 它三个的区别与使用，你知道吗？

在JavaScript中，声明变量使用 var，let 和 const 都是 ES2015(ES6) 新增的关键字。
一、var
var 即可声明全局变量，也可声明局部变量，比 let 的作用域大；
例子：

// 全局变量的声明
var name = "aa";
// 定义一个方法
function getAge(){
    // 局部变量的声明
     var age = 18;
    // 使用全局变量
    console.log(name);
}
// 使用全局变量
console.log(name);
if(1){
    var sex = "男";
}
// 输出男，因为 var 没有块级作用域，这里的 sex 会成为全局变量；
console.log(sex);

运行结果图

二、let
let 声明的变量，只在 let 命令所在的代码块内有效；
把上面的代码改一改：

let name = "aa";
function getAge(){
     let age = 18;
     console.log(name);
}
if(1){
    let sex = "男";
}
// console.log(sex);

运行结果图

三、const
const 声明一个只读的常量，一旦声明，常量的值就不能被改变；
例子：

// 必须进行初始化
const name = "aaa";
// 定义一个常量数组
const arr = ["aa", "bb"];
arr.push("aa");
console.log(arr);
arr[0] = "cc";
console.log(arr);

运行结果图

网友分享的一个有趣的面试例子：

for (var i = 0; i < 5; i++) {
   console.log("var声明的变量：", i);
    setTimeout(function() {
        console.log("setTimeout中，var声明的变量：", i);
    }, 1000);
}
for (let i = 0; i < 5; i++) {
    console.log(" let 声明的变量：", i);
    setTimeout(function() {
        console.log("setTimeout中，let 声明的变量：", i);
    }, 1000);
}

猜猜它们的输出结果是什么？

运行结果

这个面试题是不是很有趣，运行结果你猜对了吗？

感觉有用，请关注同名公众号！

参考链接：
https://www.jianshu.com/p/7be962a355f8
https://www.runoob.com/js/js-let-const.html
https://www.w3cschool.cn/javascript_guide