var let 以及 const的区别和使用

var的作用及缺点

var 是原生js中 声明变量的方法,在函数内部,使用var定义一个变量（局部变量）,在函数被调用完之后,该变量会被立即销毁。在定义变量时如果省略var,就会创建一个全局变量,而且会变量提升还有许多的缺点,具体可能存在以下问题

1.var定义的变量没有块级作用域

2.var在全局定义时会自动添加全局window对象的属性

3.var可以重复声明不利于代码开发

4.var定义会变量提升可以在声明前使用返回undefined

解决方法使用let代替var使用

ES6中解决了许多js的历史遗留问题其就包括var的问题let是ES6中一种新的赋值方式

let与var的区别

let声明的是块作用域,而var声明的是函数作用域。块作用域是函数作用域的子集,所以var作用域的限制同时也适用于let。

1.let定义声明在块级作用域中使用出了块级会被销毁

//let在块级作用域中起作用
if (true) {
    var four = 20;//全局变量
}
console.log(four);//20
if (true) {
    let five = 30;
}
console.log(five);//five is not defined

2.let不存在变量提升和暂时性死区

// 2.不存在变量提升和暂时性死区:var 声明之前使用，是undefined,let声明之前使用报错
console.log(three);//Cannot access 'three' before initialization
let three = 30;

3.let不能重复声明

let three = 30;
// 3.var 是可以重复声明变量，let是不能重复声明同一个变量
let three = 40;//Identifier 'three' has already been declared

4.使用let在全局作用域中声明的变量不会成为window对象的属性,但是var声明的变量会。

5.for循环的配合更利于代码开发

//let搭配for,循环结束后，变量自己销毁
for (var i = 0; i < 3; i++) {}
console.log(i);//3
for (let j = 0; j < 3; j++) {}//推荐
console.log(j);// j is not defined

6.配合DOM事件更简洁    

// 6.let配合DOM绑定事件，可以不用考虑下标绑定到this
let btns = document.querySelectorAll("button")
let boxs = document.querySelectorAll(".box")
for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = function () {
        console.log(i);
        for (let j = 0; j < boxs.length; j++) {
            boxs[j].style.display = "none";
        }
        boxs[i].style.display = "block"
    }
}

const(常量)

const的行为和let基本相同,唯一的区别是const它声明变量时必须同时初始化变量,且尝试修改const声明的变量会导致运行时错误

1.不能修改

// 1.const声明的是常量
const C = 30;
C = 40;//报错。常量不能被修改

2.初始化的时候就要赋值

// 2.const 声明的时候就需要立刻赋值
//错误演示
const D;
D = 40;

3.对于引用类型来说,地址不能发生改变

//如果const定义了一个引用类型数据，只要这个地址不变【属性和方法改变】，就不报错；如果给地址重
新赋值，才会报错
const JSON = {
name: "张三",
age: 20
}
json.name = "李四";
json = {
    sex: "女"
}

4.常量命名(大写)