【前端面试题】var、let、const

一、视频

蛋老师视频：var、let、const的区别
let视频：let
const视频：const
let和var：let和var

二、区别

1.var定义变量，没有块的概念，可以跨块访问，不能跨函数访问，不初始化出现undefined，不会报错。
2.let定义变量，只能在块作用域里访问，也不能跨函数访问，对函数外部无影响。
3.const定义常量，只能在块作用域里访问，也不能跨函数访问，使用时必须初始化(即必须赋值)，而且不能修改(指向的对象，即内存地址不能修改，但是能修改里面的属性)

附：其他概念

1. 块级作用域
   （1）块作用域由{ } 包括，if语句和for语句里面的{ }也属于块作用域，while等循环语句
   （2）ES6：块级作用域 ES5：函数、全局作用域、eval

var content="疑是地上霜"

{
let content="举头思故乡"
p2.innerText=content;
}
//记得大括号里面不能使用var，不然不会形成作用域

2. 声明提升

a=1;
var b=1

//等于
var b;
a=1;
b=1;

三、let

四、const

const obj = {
  name: '张三',
  age: 18,
};

obj.gender = '男';

console.log(obj);
//一旦用const修饰，则内存地址就不能更改

五、案例

案例一

<script type="text/javascript">
    // 块作用域
    {
　　 var a = 1;
        let b = 2;
        const c = 3;
        // c = 4; // 报错，const不能修改

        var aa;
        let bb;
        // const cc; // 报错，必须初始化(即必须赋值)

        console.log(a); // 1
        console.log(b); // 2
        console.log(c); // 3
    }
    console.log(a); // 1
    // console.log(b); // 报错，只能在块作用域里访问
    // console.log(c); // 报错，只能在块作用域里访问

    // 函数作用域
    (function A() {

        var d = 5;
        let e = 6;
        const f = 7;

        console.log(d); // 5
        console.log(e); // 6  (在同一个{ }中,也属于同一个块，可以正常访问到)
        console.log(f); // 7  (在同一个{ }中,也属于同一个块，可以正常访问到)

    })();
　　
　　// console.log(d); // 报错，不能跨函数访问 
　　// console.log(e); // 报错，不能跨函数访问 
　　// console.log(f); // 报错，不能跨函数访问 
</script>

案例二

var btns = document.getElementsByTagName('button');
for (let i = 0; i < btns.length; i++) {
  btns[i].onclick = function () {
    console.log('第' + (i + 1) + '个被点击');
  };
}

解决方法
（1）for循环用let

{
let i=0;
btns[i].onclick=function(){};}

{
let i=1;
btns[i].onclick=function(){}
}

（2）采用闭包（闭包问题：https://www.cnblogs.com/wayhome123/p/13698948.html）

var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
  (function a(i) {
    btns[i].onclick = function () {
      console.log('第' + (i + 1) + '个被点击');
    };
  })(i)
}

//形成块级作用域
function（i）{
i=0;
btns[i].onclick=function(){}
}