对JavaScript变量的简单解释：const、let、var

变量只是一个数值的持有者，就像一个装着物品的盒子。

在JavaScript中，你可以创建3种类型的变量：使用const ，let ，和var 语句。每种变量类型在声明、初始化、值访问和赋值步骤方面都有不同的行为。

这篇文章将帮助你巩固你对JavaScript变量的认识。

让我们开始吧。

1.变量标识符

首先，让我们看看什么是变量以及如何识别它。

简单地说，变量是一个值的占位符（或方框）。在JavaScript中，一个值可以是一个基元，也可以是一个对象。

变量有一个名字，严格来说，这个名字叫做标识符。变量标识符的例子有：myNumber,name,list,item 。

标识符的语法非常简单：

一个标识符可以包含字母、数字0..9 ，以及特殊符号$,_ 。一个标识符不能以数字开头0..9 。

有效标识符的例子是myNumber,my_number,list1,$item,_name,a,b,$,_ 。

无效标识符的例子有：1number （错误地以数字1 开始），my-number （标识符中不允许使用符号- ），function （标识符不能是一个关键词）。

最后：

JavaScript标识符是区分大小写的。

例如，标识符myNumber 和mynumber 是不同的，因为字母n 在标识符中的大小写不同（N vsn ）。

说了这么多，现在让我们看看在JavaScript中声明变量的三种方式:const,let, 和var 语句。

2.常量变量

2.1const声明和初始化

下面是你如何声明一个const ，标识符为myConstVariable 的变量。

javascript

const myConstVariable = initialValue;

变量myConstVariable ，并立即用一个initialValue ，它可以是任何可以评估为一个值的表达式。

初始值的例子有字面意义（数字1 ，字符串'My Initial Value' ），其他变量，函数调用。

例如，语句:

javascript

const hero = 'Batman';

声明一个const 变量，其标识符为hero ，初始化为字符串字面意义'Batman' 。

对于const 变量来说，还有一个特殊的地方（与下面描述的let 和var 变量相反），就是你必须赋值初始值。

javascript

const hero; // SyntaxError: Missing initializer in const declaration

2.2常量访问和赋值

在声明和初始化之后，你可以通过使用其名称（又称标识符）来访问变量的值。

javascript

const hero = 'Batman';
console.log(hero);              // logs 'Batman'
console.log(`Hello, ${hero}!`); // logs 'Hello, Batman!'

const 变量与let 和var 的区别在于，你不能为const 变量赋值:

javascript

const hero = 'Batman';
hero = 'Joker'; // TypeError: Assignment to constant variable

代码块和函数体为const 变量创建了一个范围。范围的概念定义了变量可访问的范围。

在下面的例子中，hero 变量被声明在if 条件块的范围内。因此，你只能在该块内访问hero ，而不能在外面访问。

javascript

if (true) {
  // Code block scope
  const hero = 'Batman';
  console.log(hero); // logs 'Batman'
}
console.log(hero); // throws ReferenceError

同样，hero 也被声明在greetBatman() 函数的范围内:

javascript

function greetBatman() {
  // Function scope
  const hero = 'Batman';
  console.log(`Hello, ${hero}!`); // logs 'Hello, Batman!'
}
console.log(`Hello, ${hero}!`); // throws ReferenceError
greetBatman();

除此之外，你也只能在声明语句之后访问const 变量值，而不是之前:

javascript

console.log(hero); // throws ReferenceError
const hero = 'Batman';

从使用的角度来看，你应该把const 变量作为你不打算重新赋值的只读变量。

3.let变量

3.1let声明和初始化

下面是你如何用标识符myVariable1 和myVariable2 来声明一个let 变量。

javascript

let myVariable1 = initialValue;
// or
let myVariable2;

变量myVariable1 被声明，并立即用initialValue 进行初始化。

变量myVariable2 被声明了，但是没有初始值。默认情况下，JavaScript认为未初始化的变量具有特殊值undefined 。

在下面的代码片断中:

javascript

let villain = 'Joker';
let name;

命名为let 的变量villain 被声明，并以字符串字面的'Joker' 进行初始化。name 变量也被定义，但它没有被初始化。

3.2让访问和赋值

在声明和初始化之后，你可以通过写标识符来访问 let 变量的值。

javascript

let villain = 'Joker';
console.log(villain);              // logs 'Joker'
console.log(`Hello, ${villain}!`); // logs 'Hello, Joker!'
let name;
console.log(name); // logs undefined

name 变量虽然被声明了，但并没有被初始化，所以它有一个 undefined的值。

你可以很容易地更新let 变量的值，这是你在const 变量中无法做到的事情--这就是它们之间的主要区别。

javascript

let villain = 'Joker';
villain = 'Bane';
console.log(villain); // logs 'Bane'

let 变量的范围与const 的定义方式相同：由代码块或函数体定义。

javascript

if (true) {
  // Code block scope
  let villain = 'Joker';
  console.log(villain); // logs 'Joker'
}
console.log(villain); // throws ReferenceError

function greetJoker() {
  // Function scope
  let villain = 'Joker';
  console.log(`Hello, ${villain}!`); // logs 'Hello, Joker!'
}
console.log(`Hello, ${villain}!`); // throws ReferenceError
greetJoker();

与const 相同，你不能在声明语句之前访问let 变量。

javascript

console.log(villain); // throws ReferenceError
let villain = 'Joker';

4.var变量

4.1var声明和初始化

下面是如何声明一个标识符为myVariable1 或myVariable2 的var 变量。

javascript

var myVariable1 = initialValue;
// or
var myVariable2;

变量myVariable1 ，并立即用一个initialValue ，它可以是任何一种表达式：字面意思、函数调用等，进行声明和初始化。

变量myVariable2 被声明了，但是没有初始值。默认情况下，JavaScript认为未初始化的变量具有特殊值undefined 。

在下面的代码片断中:

javascript

var city = 'Gotham';
var name;

var 变量city 已被声明，并以字符串字面形式初始化'Gotham' 。name 变量也已被定义，但它并没有被初始化。

4.2变量访问和赋值

在声明和可选初始化之后，你可以通过使用其名称（或标识符）来访问 var 变量的值。

javascript

var city = 'Gotham';
console.log(city);                  // logs 'Gotham'
console.log(`Welcome to ${city}!`); // logs 'Welcome to Gotham!'
var name;
console.log(name); // logs undefined

name 变量，同时被声明，它还没有被初始化，所以它有一个 undefined的值。

与let 变量一样，你可以轻松地重新分配var 变量。

javascript

var city = 'Gotham';
city = 'New York';
console.log(city); // logs 'New York'

与const 和let 相比，var 变量的范围只由函数体定义:

javascript

function welcomeTo() {
  // Function scope
  var city = 'Gotham';
  console.log(`Welcome to ${city}!`); // logs 'Welcome to Gotham!'
}
console.log(`Welcome to ${city}!`); // throws ReferenceError
welcomeTo();

一个代码块不会为var 变量创建一个范围:

javascript

if (true) {
  // Code block scope
  var city = 'Gotham';
  console.log(city); // logs 'Gotham'
}
console.log(city); // logs 'Gotham'

通常情况下，你不会在声明语句之前访问一个var 变量。但如果你这样做了，JavaScript不会抛出一个引用错误，而是将该变量评估为undefined :

javascript

console.log(city); // logs undefined
var city = 'Gotham';

这是因为一个var 变量被提升到了作用域的顶端。

5.总结

在JavaScript中，有3种声明变量的方法：使用const 、let 、或var 语句。

对于const 变量的特殊性在于，你必须用一个初始值来初始化这个变量。另外，const 变量不能被重新赋值。

let另一方面，在声明时可以使用或不使用初始值。同时，let 变量的值可以被更新。