美琴 發表於 2025-3-10 21:55:00

let，const与var的区别

<div class="lake-content">
<h3 id="wtO9z"><span class="ne-text">1.let和const 与 var 在变量提升上的区别</span></h3>
<p id="u3c4d4ea7" class="ne-p"><span class="ne-text"> let和const与var一样都存在变量提升（在编译阶段变量会被提升至作用域的顶部，但不会被赋值，类似：let a），而const和let存在暂时性死区（ 从<strong>变量进入作用域的那一刻</strong><span class="ne-text">，到<strong>变量被声明并初始化的那一行代码执行完之前</strong><span class="ne-text">）在声明之前不能被访问</span></span></span></p>
<pre class="language-javascript highlighter-hljs"><code>//输出为undefined，
//原因是var 变量的声明被提升到作用域顶部，但不会赋值，因此访问时是 undefined
    console.log(a);
    var a = 10;
//输出报错：Cannot access 'b' before initialization
//因为b变量的声明被提升到作用域顶部，但不会赋值，且存在暂时性死区，不能被访问，所以报错
    console.log(b);
    let b = 20;</code></pre>
<h3>&nbsp;</h3>
<h3 id="qub2s"><span class="ne-text">2.let和const 与 var 在作用域上的区别</span></h3>
<p id="u7925e8e7" class="ne-p"><span class="ne-text"> var的作用域：在函数内部则是函数作用域，在函数外部则是全局作用域，</span></p>
<p id="u5a330815" class="ne-p"><span class="ne-text"> let和const的作用域是块级作用域， 即它只在 <code class="ne-code"><span class="ne-text">{}</span></code><span class="ne-text"> 内可访问 </span></span></p>
<pre class="ne-codeblock language-javascript highlighter-hljs" data-language="javascript"><code>    if (true) {
      var c = 10;
      let c1 = 10;
    }
    //输出c = 10
    //var 声明的变量，如果在块级作用域（如 if 或 for）内部声明，
    //它也会被提升到全局作用域，注意：var在函数作用域内则在函数作用域内声明
    console.log(c);
    //输出c1 is not defined，
    //因为c1在test函数外面，不在块级作用域里面
    console.log(c1);</code></pre>
<p id="u50eb93f4" class="ne-p"><span class="ne-text"> 特例：let和const不会污染全局作用域，<code class="ne-code"><span class="ne-text">var</span></code><span class="ne-text"> 的 <code class="ne-code"><span class="ne-text">i</span></code><span class="ne-text"> 是一个全局变量，因此所有函数引用的都是最终的 <code class="ne-code"><span class="ne-text">i</span></code></span></span></span></p>
<pre class="ne-codeblock language-javascript highlighter-hljs" data-language="javascript"><code>var arr = [];
for (var i = 0; i &lt; 10; i++) {
arr = function () {
    return i;
};
}
// 输出10
console.log(arr());

var arr = [];
for (let i = 0; i &lt; 10; i++) {
arr = function () {
    return i;
};
}
// 输出5
console.log(arr());</code></pre>
<p id="ubac7cd2e" class="ne-p">&nbsp;</p>
<h3 id="NeDLF"><span class="ne-text">3.let和const 与 var 在声明变量上的区别</span></h3>
<p id="ua9b8a4a1" class="ne-p"><span class="ne-text"> var能重复被声明，let和const不能被重复声明</span></p>
<pre class="ne-codeblock language-javascript highlighter-hljs" data-language="javascript"><code>    var d = 10;
    var d = 20;
    //输出d = 20
    console.log(d);
    let e = 10;
    //let e = 20;
    //输出Identifier 'e' has already been declared
    //因为e已经声明过了
    //console.log(e);</code></pre>
<p id="ua1841bc6" class="ne-p">&nbsp;</p>
<h3 id="mNrfJ"><span class="ne-text">4.let和const在值改变上的区别</span></h3>
<p id="u89fe17f7" class="ne-p"><span class="ne-text"> let声明后的变量能重新被赋值，const声明后的值是一个常量不能重新被赋值（ps：const定义的对象内部的属性可以被改变）</span></p>
<pre class="ne-codeblock language-javascript highlighter-hljs" data-language="javascript"><code>    let f = 10
    f = 20
    //输出f为20
    console.log(f)

    const g = 10
    g = 20
    //输出g为Assignment to constant variable
    //原因是g不能重新被赋值，g被声明为一个常量
    console.log(g)

    const obj = { name: "Tom" };
    //允许修改对象内部属性
    obj.name = "Jerry";
    //输出Jerry
    console.log(obj.name); </code></pre>
<p id="u2cf2d138" class="ne-p">&nbsp;</p>
<p id="u90c283c0" class="ne-p">&nbsp;</p>
<p id="u5e00eb75" class="ne-p">&nbsp;</p>
</div><br><br>
来源：https://www.cnblogs.com/xiao-zhiqiang/p/18763760
頁: [1]
查看完整版本: let，const与var的区别