有趣的JavaScript（一）---let、const与var命令的区别

最新推荐文章于 2022-07-29 14:25:03 发布

kylin_zdd1993

最新推荐文章于 2022-07-29 14:25:03 发布

阅读量634

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/SDUST_JSJ/article/details/74065295

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

let 和 const 都是es6新增的命令，本文对比了这两个命令和 var 命令的异同点。
请注意，let 和 const 在浏览器中存在兼容性问题。

1.是否存在块级作用域

{
    var a = 'a';
    let b = 'b';
    const c = 'c';
}
console.log(a); // a
console.log(b); // Uncaught ReferenceError: b is not defined
console.log(c); //Uncaught ReferenceError: c is not defined

2.是否存在变量提升（hoisting）

声明但未赋值

var a;
let b;
const c; // Uncaught SyntaxError: Missing initializer in const declaration
console.log(a); // undefined
console.log(b); // undefined

在声明前输出

console.log(a); // undefined
console.log(b); // Uncaught ReferenceError: b is not defined
var a;
let b;

3.是否可以重复声明

var a = 'first var';
let b = 'first let';
const c = 'first const';
var a = 'second var';
let b = 'second let'; // Uncaught SyntaxError: Identifier 'b' has already been declared
const c = 'second const'; // Uncaught SyntaxError: Identifier 'c' has already been declared
console.log(a); // second var
console.log(b); // first let
console.log(c); // first const

4.是否存在暂时性死区

console.log(typeof a); // undefined
console.log(typeof b); // undefined
var b = 10;
console.log(typeof c); // Uncaught ReferenceError: c is not defined
let c = 10;
console.log(typeof d); // Uncaught ReferenceError: d is not defined
const d = 10;

5.浏览器环境下，全局声明的变量是否会成为window对象的属性

var wina = 'window.name.a';
let winb = 'window.name.b';
const winc = 'window.name.c';
console.log(window.wina); // window.name.a
console.log(window.winb); // undefined
console.log(window.winc); // undefined

总结

完整程序如下所示

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script type="application/javascript">
    // 是否存在块级作用域
    console.log('块级作用域试验');
    (function () {
        {
            var a = 'a';
            let b = 'b';
            const c = 'c';
        }
        console.log(a); // a
        console.log(b); // Uncaught ReferenceError: b is not defined
        console.log(c); //Uncaught ReferenceError: c is not defined
    })();
</script>
<script type="application/javascript">
    console.log('声明但未赋值试验');
    // 声明但未赋值
    (function () {
        var a;
        let b;
        const c; // Uncaught SyntaxError: Missing initializer in const declaration
        console.log(a); // undefined
        console.log(b); // undefined
    })();
</script>
<script type="application/javascript">
    console.log('变量提升试验');
    // 是否存在变量提升
    (function () {
        console.log(a); // undefined
        console.log(b); // Uncaught ReferenceError: b is not defined
        var a;
        let b;
    })();
</script>
<script type="application/javascript">
    console.log('重复声明试验');
    // 是否可以重复声明
    (function () {
        var a = 'first var';
        let b = 'first let';
        const c = 'first const';
        var a = 'second var';
        let b = 'second let'; // Uncaught SyntaxError: Identifier 'b' has already been declared
        const c = 'second const'; // Uncaught SyntaxError: Identifier 'c' has already been declared
        console.log(a); // second var
        console.log(b); // first let
        console.log(c); // first const
    })();
</script>
<script type="application/javascript">
    console.log('暂时性死区试验');
    // 是否存在暂时性死区
    (function () {
        console.log(typeof a); // undefined
        console.log(typeof b); // undefined
        var b = 10;
        console.log(typeof c); // Uncaught ReferenceError: c is not defined
        let c = 10;
        console.log(typeof d); // Uncaught ReferenceError: d is not defined
        const d = 10;
    })();
</script>
<script type="application/javascript">
    console.log('是否成为window对象的属性试验');
    // 会不会成为window对象的属性
    var wina = 'window.name.a';
    let winb = 'window.name.b';
    const winc = 'window.name.c';
    console.log(window.wina); // window.name.a
    console.log(window.winb); // undefined
    console.log(window.winc); // undefined
</script>
</body>
</html>

经验证，var 和 let 主要有一下区别