简单了解一下：var 、let、const

var 重新赋值，重新定义，作用域 属于：function scope；

let 声明的变量只在 let 命令所在的代码块内有效，Block scope。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

 

传送门：https://www.runoob.com/w3cnote/es6-let-const.html

对比一：作用域：var：function scope,所以以下代码，var totalPrice 为全局；let，const为块级作用域，只作用在if条件范围内；

var price = 10;
var count = 10;
if (count > 5) {
    var totalPrice = 10 * 0.9;
    console.log(`var totalPrice:${totalPrice}`);
}
console.log(totalPrice);//成功输出9 这里的totalPrice是全局变量，可以访问

　　

var price = 10;
var count = 10;
if (count > 5) {
    let totalPrice = 10 * 0.9;
    console.log(`let totalPrice:${totalPrice}`);
}
console.log(totalPrice);//会出错误（Uncaught ReferenceError: totalPrice is not defined） 这里的totalPrice是let块级变量，外部无法访问

对比二:作用域：以下代码只有声明的类型不一样，var 支持重新赋值，totalPrice会被重新赋值，而let中的totalPrice，第一个为全局变量， 第二个只被作用在块级中，所以最终输出0

        var price = 10;
        var count = 10;
        var totalPrice = 0;
        if (count > 5) {
            var totalPrice = 10 * 0.9;
            console.log(`var totalPrice:${totalPrice}`);  //9
        }
        console.log(totalPrice); //9

　　

        var price = 10;
        var count = 10;
        let totalPrice = 0;
        if (count > 5) {
            let totalPrice = 10 * 0.9;
            console.log(`let totalPrice:${totalPrice}`); //9
        }
        console.log(totalPrice);  //0

　　

对比三：var,let，const：定义，赋值，区别如下，注意const为对象时，虽然不能被重新赋值，但是可以修改其属性值

        var name = "sun";
        var name = "sun2";  //可以被重新定义
        name = "liping";    //可以被重新赋值
        console.log(`var name:${name}`);  //var name:liping

        let age = 10;
        //let age = 20;    //会出错，不能被重新定义
        age = 22;           //可以被重新赋值
        console.log(`let age:${age}`);//let age:22

        const sex = "女";
        //const sex = "男"; //会出错，不能被重新定义
        //sex = "男";       //会出错，不能被重新赋值
        console.log(`const sex:${sex}`); //女

　　

第四点：控制属性的改变：

      const product = {
            name :"手机",
            price:5999
        };

        //可以修改属性
        product.price = 8999;

        console.log(JSON.stringify(product));//{"name":"手机","price":8999}

        //如果不想product被改变则：(使用freeze方法冻结该对象)
        const product2 = Object.freeze( {
            name :"手机",
            price:5999
        });
        product2.price = 9999;

        console.log(JSON.stringify(product2));//{"name":"手机","price":5999}

　　

第五点:实际应用过程的细节

    for (var i = 0; i < 5; i++) {
            console.log(`var i is ${i}`);  //这里会输出  0，1，2，3，4

            setTimeout(function () {
                console.log(`var i is ${i}`);   //这里会输出 5个 5

            }, 1000);
        }

        console.log(`i is ${i}`);  //会输出5

        console.log(`---------------解决setTimeout输出0-4的数字------------------------------`);

        for (let i = 0; i < 5; i++) {
            console.log(`let i is ${i}`);  //这里会输出  0，1，2，3，4

            setTimeout(function () {
                console.log(`let i is ${i}`);   //这里会输出  0，1，2，3，4

            }, 1000);
        }

　　

第六点：同理解析：当执行a[1]方法时，i 已经=3了，所以都输出3，如果想要输出1，2，3可改类型为let

        var a = [];
        for (var i = 0; i < 3; i++) {
            a[i] = function () { console.log(i) }
        }
        a[1](); //3
        a[2](); //3

第七点：当块级元素

       var a = 10;
        if (1) {
            a = 100; //当块级元素包含let声明，给a赋值，只在当前块找a
            console.log(a);//所以这里会报错
            let a = 1;
            console.log(a);
        }

　　

第八点：变量提升:

        console.log(abc);//undefined  ，变量提升，实际解析:var abc; console.log(abc);abc=10;
        var abc = 10;

        //console(num);//会出错
        let num = 10;

        //console.log(filename);//会出错
        const filename = "abc.txt";

　　

写在最后：以上只是说明用法，随手百度就能了解，原理后续再作研究