【ES6】var、const/let的区别

219 阅读2分钟

es6主要新增了const和let,声明变量。但是这const和let有一些细节不同的。

区别的内容

var和const/let的区别:

  • 块级作用域

  • 不存在变量提升

  • 暂时性死区

  • 不可重复声明

const的注意使用:

  • const声明之后必须马上赋值,否则会报错

  • const简单类型一旦声明就不能再更改。

01-作用域只局限于当前代码块

    {
        var str='张三';
        console.log(str);
        let str1='李四';
        console.log(str1);
    }
    console.log('++++++++'+str);//张三
    console.log('-------'+str1);//报错,没有定义声明

02-使用let申明的变量作用域不会被提升

    {
            console.log(str1);//undefined
            var str1='张三';

            var str1;
            console.log(str1);//undefined
            str1='张三';
            
            console.log(str);//报错
            let str='李四';
    }

03-在相同的作用域下不能申明相同的变量

{
        var str1='张三';
        var str1='李四';
        console.log(str1);//李四

        let str2='小黄';
        let str2='小黑';
        console.log(str2);//报错
    }

04-for循环提现let的父子作用域

var btns=document.querySelectorAll('button');
        for(var i=0;i<btns.length;i++){
                btns[i].onclick=function () {
                    alert('点击了第'+i+'个');//点击了第5个,5
                }
        }

     var btns=document.querySelectorAll('button');
    for(var i=0;i<btns.length;i++){
        (function (i) {
            btns[i].onclick=function () {
                alert('点击了第'+i+'个');//点击了第0个到第5个,0,1,2,3,4
            }
        })(i);
    }

    let btns=document.querySelectorAll('button');
     for(let i=0;i<btns.length;i++){
     btns[i].onclick=function () {
     alert('点击了第'+i+'个');//点击了第0个到第5个,0,1,2,3,4
     }
     }

注意:let和const的作用基本一样的,但不同的细节在于:

cosnt申明的常量必须赋值

{
        const name;
        name='bbbb';
        console.log(name);//报错,因为常量没有赋值
}
{
        const name='bbbb';
        console.log(name);//bbbb
}

const简单类型一旦声明就不能再更改

{
        const name='bbbb';
        name ='asdasd';
        console.log(name);//报错,不能更改
}

总结:

  • 使用 var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象。
  • 使用 let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升。
  • 使用 const 声明的是常量,在后面出现的代码中不能再修改该常量的值。

觉得我写文章不错的话,给我的内容点个star吧。