JavaScript 常量 - 绿叶网

JavaScript 常量是什么？

在实际开发中，有些值是固定不变的，比如圆周率 PI (3.14159...)，或者程序中某个固定的配置值。对于这些不变的值，我们通常使用 “常量” 来表示，而不是 “变量”。

常量指的是值一个不能改变的量。也就是说，常量的值从定义开始就是固定的，一直到程序结束都不会改变。

在 JavaScript 中，我们可以使用 const 关键字来定义一个常量。

语法：

const 常量名 = 值;

说明：

JavaScript 常量具有以下 2 个特点。

常量通常使用纯大写字母表示，以区分于普通变量。
常量的值是不可变的，一旦被赋值就无法被修改（如果尝试修改则会报错）。

注意: 只有像圆周率 PI 这种在程序运行前就确定的 “硬常量”，我们才习惯用全大写字母。而对于那些仅仅是因为 “不希望被修改” 而使用 const 定义的普通变量（如 DOM 元素、临时数据），我们依然使用小驼峰命名法（如 userName）。

示例 1：使用 JavaScript 常量

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const PI = 3.1415;
        console.log(PI);
    </script>
</body>
</html>

运行结果如下。

3.1415

JavaScript 常量的特点

在 JavaScript 中，使用 const 声明的常量具有以下两个重要特点：

常量声明时，必须初始化（也就是必须要赋一个值）。
常量声明后，不允许重新赋值。

示例 2：常量必须初始化

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const PI;
        console.log(PI);
    </script>
</body>
</html>

浏览器控制台如下图所示。

常量必须初始化

分析：

从控制台提示可以看出，这里出现了一个语法错误，那就是这里 “const 声明的常量没有初始化”。

示例 3：常量不可被重新赋值

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const PI = 3.1415;
        PI = 3.14;
        console.log(PI);
    </script>
</body>
</html>

控制台输出如下图所示。

常量不可被重新赋值

分析：

从浏览器控制台可以看出，程序直接报错了。实际上，对于使用 const 声明过的常量，任何尝试重新给它赋值的操作都会导致运行时错误。

let 和 const 的最佳实践（非常重要）

在真实的项目开发中，有一个非常重要的代码规范：“能使用 const 的，就不要使用 let。” 也就是说，如果一个变量的值不会改变，我们都应该把它看成是一个常量，都应该使用 const 来声明，而不是使用 let 来声明。

看到这里，小伙伴们估计都蒙了。不是说 let 声明的是变量，const 声明的是常量吗？如果这样做，语义岂不是乱套了。其实并不是这样的，const 之所以比 let 好，主要是因为以下 2 点。

1. 代码可读性更好

因为 const 声明就是常量，常量是不允许修改的。别人一看到 const，就知道这个变量的值在后面是不会被改变的。但是如果使用 let 来声明，变量的值在后面可以改变也可以不改变，我们并不能一下子就能判断出来。

2. 避免无意间修改变量值导致的错误

如果一个变量的值是不允许被修改的，但是我们却使用了 let 来声明。后面如果不小心把它改了，就可能会导致程序出现 bug，像这样的 bug 的原因有时是很难被发现的。但如果使用 const 就可以完全避免这个问题。

到这里小伙伴就会问了：“我一开始怎么知道哪些变量的值是会变的，哪些又不会变呢？” 在实际开发中，如果一开始我们无法判断一个变量的值是否会改变，都应该先使用 const 来声明。如果后面这个变量的值需要改变了，我们再回去将 const 改为 let 就可以了。

这样一来，如果我们看到的变量是使用 const 声明的，就知道这个变量的值在后面一定不会被改变。如果我们看到的变量是使用 let 声明的，就知道这个变量的值在后面一定会被改变。

现在几乎所有的项目都采用了这个最佳实践，特别是 Vue 和 React 的项目。在实际开发中，这些项目本身会配置一个 ESlint 的工具。ESlint 会自动帮我们检测，如果你的变量值没有改变，却使用了 let 来声明，它就会提示你使用 const 来代替。当然，这个只有等我们学了 Vue 或 React 才知道。

对于这个最佳实践，我本来是准备在教程的最后再来介绍的。但为了让小伙伴能更好地掌握真实项目的开发规范，所以在一开始就给大家说清楚。在后面章节所有的例子代码中，我们都会采用这个最佳实践。

提示: 对于 let 和 const 更详细的用法，我们在后面 “JavaScript let 和 const” 一节中会详细介绍。