let,const,var的区别

最新推荐文章于 2022-11-27 13:18:12 发布

转载最新推荐文章于 2022-11-27 13:18:12 发布

· 220 阅读

1 ·

版权

原文链接：https://blog.youkuaiyun.com/unionz/article/details/80032048

笔记同时被 2 个专栏收录

34 篇文章

订阅专栏

ES6

20 篇文章

订阅专栏

这里的声明提升存在疑点，涉及到暂存性死区

在这里插入图片描述

重复定义：

只有const不行，会报错
let var 可以重复定义 const不可以

<body>
    <input type="text" placeholder="aaa">
    <button>发表评论</button>
    <div></div>
</body>
<script>
    var text=document.querySelector("input[type='text']");
    var button=document.querySelector("button");
    var div=document.querySelector("div");
    button.onclick=function(){
        let content=text.value;
        content="11111";
        div.innerText=content;
    }
</script>

修改值

const 定义数组和对象时，可以修改值

<script>
    var text=document.querySelector("input[type='text']");
    var button=document.querySelector("button");
    var div=document.querySelector("div");
    button.onclick=function(){
        const content=[]
        content[0]=text.value;
        content[1]="1234";
        div.innerText=content[1];
    }
</script>

声明提升

<body>
    <p class="p1">床前明月光</p>
    <p class="p2"></p>
</body>
<script>
    var p1=document.querySelector("p.p1");
    var p2=document.querySelector("p.p2");
    p2.innerText=content;
    var content="疑似地上霜";
</script>

只有var 时，出现underfined
let const时，都会报错
在这里插入图片描述

块级作用域

修改第二行内容：
以前喜欢用函数创建块级作用域

<body>
    <p class="p1">床前明月光</p>
    <p class="p2"></p>
</body>
<script>
    var p1=document.querySelector("p.p1");
    var p2=document.querySelector("p.p2");
    
    var content="疑似地上霜";
    function fn(){
        var content="李白睡的香";
        return content;
    }
    p2.innerText=fn();
</script>

现在可以使用let const使用块级作用域实现（var不行）

循环

<style>
    div{
       display: inline-block; 
       width: 100px;
       height: 100px;
       background-color: pink;         
    }
</style>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
<script>
    var li=document.querySelectorAll("div");
    for(let i=0;i<5;i++){
        li[i].onmouseover=function(){
            var text=document.createTextNode(i);
            this.appendChild(text);
            this.style.height=i*100+100+"px";
        }
    }
    
</script>

在这里插入图片描述

for循环里的let关键字不能变为var关键字
var关键字没有形成块级作用域，经过5次循环，

{var i=0;}
{var i=1;}
{var i=2;}
{var i=3;}
{var i=4;}
console.log(window.i);

i已经变成4了，mouseover之后会执行回调函数里的代码，这时，this也就是 li[i]找不到就会在window下找，这时i=4；
为了迫使形成块级作用域，就可以使用let。

这里想到一个问题，点击不同的按钮，弹出不同的值也是可以实现的：

<body>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
</body>
<script>
    var li=document.querySelectorAll("button");
    for(let i=0;i<5;i++){
        li[i].onclick=function(){
            alert(i);
        }
    }
    
</script>