JavaScript var let const区别

JavaScript var let const区别教程

var 定义变量，没有块的概念，可以跨块访问，不能跨函数访问，不初始化出现 undefined，不会报错。

let 定义变量，只能在块作用域里访问，也不能跨函数访问，对函数外部无影响。

const 定义常量，只能在块作用域里访问，也不能跨函数访问，使用时必须初始化(即必须赋值)，而且不能修改。

案例

var声明变量

var 声明变量作用域在整个函数范围内，或者是全局的

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript var const let区别</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            function func() {
                if (true) {
                    var str = 'hello world';
                }
                console.log("str =", str);
            }
            func();
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

87_javascript var let const区别.png

我们在函数 func 里面的 if 代码块里面使用 var 定义了一个变量 str，接着，我们在 if 代码块的外面访问了该变量，结果，可以访问，说明 var 声明变量作用域在整个函数范围内。现在，我们将程序修改如下：

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript var const let区别</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            function func() {
                if (true) {
                    var str = 'hello world';
                }
                console.log("str =", str);
            }
            func();
            console.log("global str =", str);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

88_javascript var let const区别.png

我们在函数外面访问函数里面定义的变量 str，此时，程序报错，访问不到，因此，使用 var 在函数里定义的变量，只能在函数里访问。

var声明变量允许重复声明

var 声明变量允许重复声明

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript var const let区别</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            var name = "Hello World";
            var name = "Hello HaiCoder";
            console.log("name =", name);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

89_javascript var let const区别.png

我们使用 var 声明了 name 变量两次，此时，程序没有报错，即，使用 var 可以重复声明变量。

var可以先使用后声明

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript var const let区别</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            name = "Hello HaiCoder";
            var name;
            console.log("name =", name);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

90_javascript var let const区别.png

var 声明变量，可以先赋值，后声明。

var声明后不赋值

var声明变量后不赋值，会输出空

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript var const let区别</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            var name;
            console.log("name =", name);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

91_javascript var let const区别.png

我们使用 var 声明了变量 name，但没有给变量 name 赋值，此时，我们输出变量 name 的值，我们看到，输出了空。

let声明变量

let 声明变量只在 let 命令所在的代码块内（{}）有效

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript var const let区别</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            function func() {
                if (true) {
                    let name = 'Hello HaiCoder';
                    console.log("inner if name =", name);
                }
                console.log("outer if name =", name);
            }
            func();
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

92_javascript var let const区别.png

我们在函数 func 里面的 if 代码块里面使用 let 定义了一个变量 name，接着，我们分别在代码块里和代码块外访问该变量，我们可以看到，在代码块里可以访问到该变量，在代码块外不可以访问该变量。

let声明变量不允许重复声明

let 声明变量不允许重复声明

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript var const let区别</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            let name = "Hello World";
            let name = "Hello HaiCoder";
            console.log("name =", name);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

93_javascript var let const区别.png

我们使用 let 声明了 name 变量两次，此时，程序报错，即，使用 let 不可以重复声明变量。

let必须先声明后使用

let 声明变量必须先声明后使用

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript var const let区别</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            name = "Hello HaiCoder";
            let name;
            console.log("name =", name);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

94_javascript var let const区别.png

let 声明变量，必须声明后再赋值，否则，程序报错。

let声明后不赋值

let声明变量后不赋值，会输出 undefined

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript var const let区别</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            let name;
            console.log("name =", name);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

95_javascript var let const区别.png

我们使用 let 声明了变量 name，但没有给变量 name 赋值，此时，我们输出变量 name 的值，我们看到，输出了 undefined。

const声明变量

const 声明变量只在 const 命令所在的代码块内（{}）有效

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript var const let区别</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            function func() {
                if (true) {
                    const name = 'Hello HaiCoder';
                    console.log("inner if name =", name);
                }
                console.log("outer if name =", name);
            }
            func();
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

96_javascript var let const区别.png

我们在函数 func 里面的 if 代码块里面使用 const 定义了一个变量 name，接着，我们分别在代码块里和代码块外访问该变量，我们可以看到，在代码块里可以访问到该变量，在代码块外不可以访问该变量。

const声明变量不允许重复声明

const 声明变量不允许重复声明

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript var const let区别</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            const name = "Hello World";
            const name = "Hello HaiCoder";
            console.log("name =", name);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

97_javascript var let const区别.png

我们使用 const 声明了 name 变量两次，此时，程序报错，即，使用 const 不可以重复声明变量。

const声明后不赋值

const声明变量后不赋值，程序报错

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript var const let区别</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            const name;
            console.log("name =", name);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

98_javascript var let const区别.png

我们使用 const 声明了变量 name，但没有给变量 name 赋值，此时，我们看到，程序直接报错。

const定义变量后不可修改

const定义变量后不可修改，否则程序报错

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript var const let区别</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            const name = "Hello HaiCoder";
            name = "Hello World";
            console.log("name =", name);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

99_javascript var let const区别.png

我们使用 const 定义了变量 name 之后，再次修改了变量 name 的值，此时，程序报错，因为使用 const 定义的变量不可以再次修改。

JavaScript var let const区别总结

var 定义变量，没有块的概念，可以跨块访问，不能跨函数访问，不初始化出现 undefined，不会报错。

let 定义变量，只能在块作用域里访问，也不能跨函数访问，对函数外部无影响。

const 定义常量，只能在块作用域里访问，也不能跨函数访问，使用时必须初始化(即必须赋值)，而且不能修改。