JS中定义变量以及三种定义变量的方式的区别

变量-------let 变量名 = 值(数据)

变量是计算机存储数据的“容器”

白话：变量就是一个装东西的盒子。 通俗：变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆。

注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子

变量的基本使用

1.声明变量：

要想使用变量，首先需要创建变量（专业说法： 声明变量）

语法：

声明变量有两部分构成：声明关键字、变量名（标识） let 即关键字 (let: 允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义）变量的词语

<script>
 let age
 console.log(age)  //声明的变量没有赋值，结果为undefined
</script>

age 即变量的名称，也叫标识符

2.变量赋值：

定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。

<script>
 // 变量的使用分为三步
 // 1.声明变量：let 变量名
 // 如果声明一个变量但是还没有赋值(初始化),结果就是undefined
 let age
 // 2.初始化--赋值
 // = 就是赋值运算符，将右边的值(表达式)赋值给左边的变量
 age = 100
</script>

也可以声明变量的时候同时给变量初始化。

<script>
let age = 666   //声明定义变量的同时赋值
console.log(age)  //结果为666
</script>

注意：是通过变量名来获得变量里面的数据------使用变量，本质是使用变量里面存储的值

3.更新变量：

变量赋值后，还可以通过简单地给它一个不同的值来更新它。

<script>
 // 更新(修改)变量的值：
 // 语法： 变量名 = 新值
 let age = 12
 age = 66
 console.log(age)  //最终结果为66 已更新
</script>

注意： let 不允许多次声明一个变量。------例如下面这种多次let声明同一个变量会报错

<script>
 let age = 12
 let age = 66
 console.log(age)  //报错
</script>

4.声明多个变量：----多个变量名之间用英文状态下的逗号隔开

<script>
  /* 如下定义多个变量也能使用，但是代码冗余了
 let aeg =18
 let name = '李信' */
 
 // 同时定义多个变量，使用逗号分割
 let age = 18, name = '李信'
 console.log(age, name)
</script>

变量的本质----内存空间地址

内存：计算机中存储数据的地方，相当于一个空间 变量：是程序在内存中申请的一块用来存放数据的小空间

<script>
// 定义
        // 语法：   let 变量名 = 数据
        //      let 变量名  在内存中申请一个空间，并为这个空间起个名
        //      变量名 = 数据  将数据保存到刚刚申请的这个空间中
        let x = 10;
        let y = 'hello';
</script>

变量命名规则与规范

规则：必须遵守，不遵守报错 规范：建议，不遵守不会报错，但不符合业内通识

0. 规则： 不能用JS里面的关键字 关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等 只能用下划线、字母、数字、$组成，且数字不能开头 字母严格区分大小写，如 Age 和 age 是不同的变量
1. 规范： 起名要有意义(见名知意) 遵守小驼峰命名法 第一个单词首字母小写，后面每个单词首字母大写。例：userName

<script>
    // 变量命名的规则
    // 1.不能使用关键字:if for while let var class do 。。。。。
    // let as = 'abc'
    // 2. 只能用下划线、字母、数字、$组成，且数字不能开头
    // let abc$_9 = 'aaa'
    // 3.字母严格区分大小写，如 Age 和 age 是不同的变量  也会报错
    let age = 20
    console.log(Age)
    // let let = 20   //不能关键字命名
    // console.log(let)
    /* 1. 强制要求
         只能包含字母、数字、下划线 以及 $, 不能以数字开头
         不能是JS的关键字 */
     /* 2. 人为约束
         见名知义
         如果变量名包含多个单词，推荐采用小驼峰(除第1个单词外，其余单词首字母都大写) */
  </script>

常量-----const 常量名 = 值(数据)

存储不允许被修改的数据 --定义常量时必须赋值

<script>
        // 常量   存储不允许被修改的数据   --定义常量时必须赋值
        // 语法: const 常量名 = 数据(值)
        const arr = 99
        console.log(arr)
​
        /* arr = 100  修改常量的值会报错
        const haha   定义常量时不赋值会报错 */
    </script>

以下内容是从 zh.javascript.info/intro 官网复制整理出来的，如有侵权，请联系删除

var、let 或 const 声明变量来存储数据--以及它们的区别

• let — 现代的变量声明方式。
• var — 老旧的变量声明方式。一般情况下，我们不会再使用它。
• const — 类似于 let，但是变量的值无法被修改。

JavaScript 的变量命名有两个限制：

0. 变量名称必须仅包含字母、数字、符号 $ 和 _。
1. 首字符必须非数字。

如果命名包括多个单词，通常采用驼峰式命名法。也就是，单词一个接一个，除了第一个单词，其他的每个单词都以大写字母开头：myVeryLongName。

美元符号 '$' 和下划线 '_' 也可以用于变量命名。它们是正常的符号，就跟字母一样，没有任何特殊的含义。

区分大小写

命名为 apple 和 AppLE 的变量是不同的两个变量。

允许非英文字母，但不推荐

可以使用任何语言，包括西里尔字母（cyrillic letters）甚至是象形文字，就像这样：

<script>
 let имя = '...'
 let 我 = '...'
</script>

保留字--关键字

有一张 保留字列表，这张表中的保留字无法用作变量命名，因为它们被用于编程语言本身了。

比如，let、class、return、function 都被保留了。

下面的代码将会抛出一个语法错误：let is disallowed as a lexically bound name

return is disallowed as a lexically bound name

<script>
 let let = 5 // 不能用 "let" 来命名一个变量，错误！
 let return = 5 // 同样，不能使用 "return"，错误！
</script>

未采用 use strict 下的赋值

一般，我们需要在使用一个变量前定义它。但是在早期，我们可以不使用 let 进行变量声明，而可以简单地通过赋值来创建一个变量。现在如果我们不在脚本中使用 use strict 声明启用严格模式，这仍然可以正常工作，这是为了保持对旧脚本的兼容。

<script>
// 注意：这个例子中没有 "use strict"
num = 5 // 如果变量 "num" 不存在，就会被创建   默认是 var 创建
alert(num) // 5
</script>

严格模式下会报错

<script>
 "use strict";
 num = 5 // 错误：num 未定义
</script>

正确命名变量

谈到变量，还有一件非常重要的事。

一个变量名应该有一个清晰、明显的含义，对其存储的数据进行描述。

变量命名是编程过程中最重要且最复杂的技能之一。

在一个实际项目中，大多数的时间都被用来修改和扩展现有的代码库，而不是从头开始写一些完全独立的代码。当一段时间后，我们做完其他事情，重新回到我们的代码，找到命名良好的信息要容易得多。换句话说，变量要有个好名字。

声明变量之前，多花点时间思考它的更好的命名。你会受益良多。

重用还是新建？

最后一点，有一些懒惰的程序员，倾向于重用现有的变量，而不是声明一个新的变量。

结果是，这个变量就像是被扔进不同东西盒子，但没有改变它的贴纸。现在里面是什么？谁知道呢。我们需要靠近一点，仔细检查才能知道。

这样的程序员节省了一点变量声明的时间，但却在调试代码的时候损失数十倍时间。

额外声明一个变量绝对是利大于弊的。

现代的 JavaScript 压缩器和浏览器都能够很好地对代码进行优化，所以不会产生性能问题。为不同的值使用不同的变量可以帮助引擎对代码进行优化。

在 JavaScript 中创建一个变量，我们需要用到 let 关键字。

基本用法

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
let a = 10;
var b = 1;
}
​
a // ReferenceError: a is not defined.
b // 1

上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。

for循环的计数器，就很合适使用let命令。

for (let i = 0; i < 10; i++) {
// ...
}
​
console.log(i);
// ReferenceError: i is not defined
//上面代码中，计数器`i`只在`for`循环体内有效，在循环体外引用就会报错。

下面的代码如果使用var，最后输出的是10。

var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
 console.log(i);
};
}
a[6](); // 10

上面代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是 10。

如果使用let，声明的变量仅在块级作用域内有效，最后输出的是 6。

var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
 console.log(i);
};
}
a[6](); // 6

上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。

for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i);
}
// abc
// abc
// abc

上面代码正确运行，输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域（同一个作用域不可使用 let 重复声明同一个变量）。

不存在变量提升

var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。

为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
​
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

上面代码中，变量foo用var命令声明，会发生变量提升，即脚本开始运行时，变量foo已经存在了，但是没有值，所以会输出undefined。变量bar用let命令声明，不会发生变量提升。这表示在声明它之前，变量bar是不存在的，这时如果用到它，就会抛出一个错误。

暂时性死区

只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

var tmp = 123;
​
if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}

上面代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

if (true) {
// TDZ开始
tmp = 'abc'; // ReferenceError
console.log(tmp); // ReferenceError
​
let tmp; // TDZ结束
console.log(tmp); // undefined
​
tmp = 123;
console.log(tmp); // 123
}

上面代码中，在let命令声明变量tmp之前，都属于变量tmp的“死区”。

“暂时性死区”也意味着typeof不再是一个百分之百安全的操作。

typeof x; // ReferenceError
let x;

上面代码中，变量x使用let命令声明，所以在声明之前，都属于x的“死区”，只要用到该变量就会报错。因此，typeof运行时就会抛出一个ReferenceError。

作为比较，如果一个变量根本没有被声明，使用typeof反而不会报错。

typeof undeclared_variable // "undefined"

上面代码中，undeclared_variable是一个不存在的变量名，结果返回“undefined”。所以，在没有let之前，typeof运算符是百分之百安全的，永远不会报错。现在这一点不成立了。这样的设计是为了让大家养成良好的编程习惯，变量一定要在声明之后使用，否则就报错。

有些“死区”比较隐蔽，不太容易发现。

function bar(x = y, y = 2) {
return [x, y];
}
​
bar(); // 报错

上面代码中，调用bar函数之所以报错（某些实现可能不报错），是因为参数x默认值等于另一个参数y，而此时y还没有声明，属于“死区”。如果y的默认值是x，就不会报错，因为此时x已经声明了。

function bar(x = 2, y = x) {
return [x, y];
}
bar(); // [2, 2]

另外，下面的代码也会报错，与var的行为不同。

// 不报错
var x = x;
​
// 报错
let x = x;
// ReferenceError: x is not defined

上面代码报错，也是因为暂时性死区。使用let声明变量时，只要变量在还没有声明完成前使用，就会报错。上面这行就属于这个情况，在变量x的声明语句还没有执行完成前，就去取x的值，导致报错”x 未定义“。

ES6 规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。这样的错误在 ES5 是很常见的，现在有了这种规定，避免此类错误就很容易了。

总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

将变量定义和赋值合并成一行：

<script>
let message = 'Hello!' // 定义变量，并且赋值
//也可以在一行中声明多个变量：
let user = 'John', age = 25, message = 'Hello'
//看上去代码长度更短，但并不推荐这样。为了更好的可读性，请一行只声明一个变量。
//多行变量声明有点长，但更容易阅读：
let user = 'John'
let age = 25
let message = 'Hello'
</script>

如果将变量想象成一个“数据”的盒子，盒子上有一个唯一的标注盒子名字的贴纸。这样我们能更轻松地掌握“变量”的概念。

例如，变量 message 可以被想象成一个标有 "message" 的盒子，盒子里面的值为"Hello!"：

我们可以在盒子内放入任何值。

并且，这个盒子的值，我们想改变多少次，就可以改变多少次：

<script>
//使用let在全局作用域中声明的变量不会成为window对象的属性(如果是var声明的话会)
let message
message = 'Hello!'
message = 'World!' // 值改变了
</script>

当值改变的时候，之前的数据就被从变量中删除了：

可以声明两个变量，然后将其中一个变量的数据拷贝到另一个变量。

<script>
let hello = 'Hello world!'
let message
// 将字符串 'Hello world' 从变量 hello 拷贝到 message
message = hello
// 现在两个变量保存着相同的数据
alert(hello) // Hello world!
alert(message) // Hello world!
</script>

注意：声明两次会触发 error 报错

<script>
//一个变量应该只被声明一次。
//对同一个变量进行重复声明会触发 error：
let message = "This"
// 重复 'let' 会导致 error
let message = "That" // SyntaxError: 'message' has already been declared
//因此，我们对同一个变量应该只声明一次，之后在不使用 let 的情况下对其进行引用。
​
//let不允许在相同作用域内，重复声明同一个变量。
// 报错
function func() {
let a = 10;
var a = 1;
}
​
// 报错
function func() {
let a = 10;
let a = 1;
}
//因此，不能在函数内部重新声明参数。
function func(arg) {
let arg;
}
func() // 报错
​
function func(arg) {
{
 let arg;
}
}
func() // 不报错
</script>

let声明的变量的作用域------let和var重要区别是，let声明的变量不会在作用域提升

<script>
  /*  1. let声明的变量不会进行任何的提升，一定要先声明赋值在使用
   console.log(age)  // 报错
   let age = 20 */
  /*  2. let声明的变量有块级作用域，作用域是当前变量所有的结构块{ }
   有效作用域：从定义这个变量开始到它所在 } 结束
   if (true) {
       // console.log(age)  // 输出在前面，定义在后面会报错
       let age = 20
       console.log(age)  //20  输出在后面，定义在前面,结果为20
   }
   console.log(age)  // 报错 */
​
  /* 3. let不能重复声明同名变量，否则报错
  let age = 20
  let age = 30
  console.log(age)  // 报错 */
​
  function test() {
      // 函数里面声明的变量在函数外部不能直接使用
      var age = 20
      let age = 20
  }
  test()
  console.log(age)  // var和let定义都会报错,因为在函数外部不能使用
</script>

ES5---没有块级作用域，这带来很多不合理的场景。

第一种场景，内层变量可能会覆盖外层变量。

var tmp = new Date();
​
function f() {
console.log(tmp);
if (false) {
 var tmp = 'hello world';
}
}
​
f(); // undefined

上面代码的原意是，if代码块的外部使用外层的tmp变量，内部使用内层的tmp变量。但是，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。

第二种场景，用来计数的循环变量泄露为全局变量。

var s = 'hello';
​
for (var i = 0; i < s.length; i++) {
console.log(s[i]);
}
​
console.log(i); // 5

上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

ES6 的块级作用域

let实际上为 JavaScript 新增了块级作用域。

function f1() {
let n = 5;
if (true) {
 let n = 10;
}
console.log(n); // 5
}

上面的函数有两个代码块，都声明了变量n，运行后输出 5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n，最后输出的值才是 10。

ES6 允许块级作用域的任意嵌套。

{{{{
{let insane = 'Hello World'}
console.log(insane); // 报错
}}}};

上面代码使用了一个五层的块级作用域，每一层都是一个单独的作用域。第四层作用域无法读取第五层作用域的内部变量。

内层作用域可以定义外层作用域的同名变量。

{{{{
let insane = 'Hello World';
{let insane = 'Hello World'}  //逐级往上
}}}};

块级作用域与函数声明

ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。

// 情况一
if (true) {
function f() {}
}
​
// 情况二
try {
function f() {}
} catch(e) {
// ...
}

上面两种函数声明，根据 ES5 的规定都是非法的。

但是，浏览器没有遵守这个规定，为了兼容以前的旧代码，还是支持在块级作用域之中声明函数，因此上面两种情况实际都能运行，不会报错。

ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。ES6 规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。

function f() { console.log('I am outside!'); }
​
(function () {
if (false) {
 // 重复声明一次函数f
 function f() { console.log('I am inside!'); }
}
​
f();
}());

上面代码在 ES5 中运行，会得到“I am inside!”，因为在if内声明的函数f会被提升到函数头部，实际运行的代码如下。

// ES5 环境
function f() { console.log('I am outside!'); }
​
(function () {
function f() { console.log('I am inside!'); }
if (false) {
}
f();
}());

ES6 就完全不一样了，理论上会得到“I am outside!”。因为块级作用域内声明的函数类似于let，对作用域之外没有影响。但是，如果你真的在 ES6 浏览器中运行一下上面的代码，是会报错的，这是为什么呢？

// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
​
(function () {
if (false) {
 // 重复声明一次函数f
 function f() { console.log('I am inside!'); }
}
​
f();
}());
// Uncaught TypeError: f is not a function

上面的代码在 ES6 浏览器中，都会报错。

原来，如果改变了块级作用域内声明的函数的处理规则，显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题，ES6 在附录 B里面规定，浏览器的实现可以不遵守上面的规定，有自己的行为方式。

• 允许在块级作用域内声明函数。
• 函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
• 同时，函数声明还会提升到所在的块级作用域的头部。

注意，上面三条规则只对 ES6 的浏览器实现有效，其他环境的实现不用遵守，还是将块级作用域的函数声明当作let处理。

根据这三条规则，浏览器的 ES6 环境中，块级作用域内声明的函数，行为类似于var声明的变量。上面的例子实际运行的代码如下。

// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {
var f = undefined;
if (false) {
 function f() { console.log('I am inside!'); }
}
​
f();
}());
// Uncaught TypeError: f is not a function

考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。

// 块级作用域内部的函数声明语句，建议不要使用
{
let a = 'secret';
function f() {
 return a;
}
}
​
// 块级作用域内部，优先使用函数表达式
{
let a = 'secret';
let f = function () {
 return a;
};
}

另外，还有一个需要注意的地方。ES6 的块级作用域必须有大括号，如果没有大括号，JavaScript 引擎就认为不存在块级作用域。

// 第一种写法，报错
if (true) let x = 1;
​
// 第二种写法，不报错
if (true) {
let x = 1;
}

上面代码中，第一种写法没有大括号，所以不存在块级作用域，而let只能出现在当前作用域的顶层，所以报错。第二种写法有大括号，所以块级作用域成立。

函数声明也是如此，严格模式下，函数只能声明在当前作用域的顶层。

// 不报错
'use strict';
if (true) {
function f() {}
}
​
// 报错
'use strict';
if (true)
function f() {}

在较老的脚本中，你也可能发现另一个关键字 var，而不是 let

<script>
var message = 'Hello'
</script>

var 关键字与 let 大体 相同，也用来声明变量，但在作用域上稍微有些不同，也有点“老派”。

var没有块级作用域

用 var 声明的变量，不是函数作用域就是全局作用域。它们在代码块外也是可见的（译注：也就是说，var 声明的变量只有函数作用域和全局作用域，没有块级作用域）。

举个例子：

<script>
 if (true) {
   var test = true // 使用 "var" 而不是 "let"
 }
 
 alert(test) // true，变量在 if 结束后仍存在
</script>

由于 var 会忽略代码块，因此我们有了一个全局变量 test。

如果我们在第二行使用 let test 而不是 var test，那么该变量将仅在 if 内部可用：

<script>
  if (true) {
    let test = true // 使用 "let"
  }
  
  alert(test) // ReferenceError: test is not defined
</script>

对于循环也是这样的，var 声明的变量没有块级作用域也没有循环局部作用域：

<script>
  for (var i = 0; i < 10; i++) {
    var one = 1;
    // ...
  }
  
  alert(i);   // 10，"i" 在循环结束后仍可见，它是一个全局变量
  alert(one); // 1，"one" 在循环结束后仍可见，它是一个全局变量
</script>

如果一个代码块位于函数内部，那么 var 声明的变量的作用域将为函数作用域：

<script>
  function sayHi() {
    if (true) {
      var phrase = "Hello";
    }
  
    alert(phrase); // 能正常工作
  }
  
  sayHi();
  alert(phrase); // ReferenceError: phrase is not defined
</script>

var 穿透了 if，for 和其它代码块。这是因为在早期的 JavaScript 中，块没有词法环境，而 var 就是这个时期的代表之一。

var允许重复声明定义

如果我们用 let 在同一作用域下将同一个变量声明两次，则会出现错误：

<script>
 let user;
 let user; // SyntaxError: 'user' has already been declared
</script>

使用 var，我们可以重复声明一个变量，不管多少次都行。如果我们对一个已经声明的变量使用 var，这条新的声明语句会被忽略(覆盖)：

<script>
 var user = "Pete";
​
 var user = "John"; // 这个 "var" 无效（因为变量已经声明过了）
 // ……不会触发错误
 
 alert(user); // John
</script>

var声明的变量，可以在其声明语句前被使用

当函数开始的时候，就会处理 var 声明（脚本启动对应全局变量）。

换言之，var 声明的变量会在函数开头被定义，与它在代码中定义的位置无关（这里不考虑定义在嵌套函数中的情况）。

那么看一下这段代码：

<script>
function sayHi() {
  phrase = "Hello";
​
  alert(phrase);
​
  var phrase;
}
sayHi();
 //从技术上讲，它与下面这种情况是一样的（var phrase 被上移至函数开头）
 function sayHi() {
 var phrase;
​
 phrase = "Hello";
​
 alert(phrase);
}
 sayHi();
 //甚至与这种情况也一样（记住，代码块是会被忽略的）
 function sayHi() {
 phrase = "Hello"; // (*)
​
 if (false) {
   var phrase;
 }
​
 alert(phrase);
}
sayHi();
</script>

因为所有的 var 都被“提升”到了函数的顶部。

所以，在上面的例子中，if (false) 分支永远都不会执行，但没关系，它里面的 var 在函数刚开始时就被处理了，所以在执行 (*) 那行代码时，变量是存在的。

声明会被提升，但是赋值不会。

用例子来说明：

<script>
function sayHi() {
alert(phrase);
/*var phrase = "Hello" 这行代码包含两个行为：
 1-使用 var 声明变量
 2-使用 = 给变量赋值。*/
var phrase = "Hello";
}
sayHi();
</script>
<script>
 //声明在函数刚开始执行的时候（“提升”）就被处理了，但是赋值操作始终是在它出现的地方才起作用。所以上面这段代码实际上是这样工作的：
 function sayHi() {
  var phrase; // 在函数刚开始时进行变量声明
  alert(phrase); // undefined
  phrase = "Hello"; // ……赋值 — 当程序执行到这一行时。
}
sayHi();
</script>

因为所有的 var 声明都是在函数开头处理的，我们可以在任何地方引用它们。但是在它们被赋值之前都是 undefined。

上面两个例子中，alert 运行都不会报错，因为变量 phrase 是存在的。但是它还没有被赋值，所以显示 undefiend。

总结

var 与 let/const 有两个主要的区别：

0. var 声明的变量没有块级作用域，它们仅在当前函数内可见，或者全局可见（如果变量是在函数外声明的）。
1. var 变量声明在函数开头就会被处理（脚本启动对应全局变量）。

常量--const

声明一个常数（不变）变量，可以使用 const 而非 let：

使用 const 声明的变量称为“常量”。它们不能被修改，如果你尝试修改就会发现报错：

<script>
const myBirthday = '18.04.1982'
myBirthday = '01.01.2001' // 错误，不能对常量重新赋值
</script>

能确定这个变量永远不会改变的时候，就可以使用 const 来确保这种行为，并且清楚地向别人传递这一事实。

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化(赋值)，不能留到以后赋值。

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

上面代码表示，对于const来说，只声明不赋值，就会报错。

const的作用域与let命令相同：只在声明所在的块级作用域内有效。

if (true) {
const MAX = 5;
}
​
console.log(MAX) // Uncaught ReferenceError: MAX is not defined

const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。

if (true) {
console.log(MAX); // ReferenceError
const MAX = 5;
}

上面代码在常量MAX声明之前就调用，结果报错。

const声明的常量，也与let一样不可重复声明。

var message = "Hello!";
let age = 25;
​
// 以下两行都会报错
const message = "Goodbye!";
const age = 30;

大写形式的常量

一个普遍的做法是将常量用作别名，以便记住那些在执行之前就已知的难以记住的值。

使用大写字母和下划线来命名这些常量。

例如，让我们以所谓的“web”（十六进制）格式为颜色声明常量：

<script>
const COLOR_RED = "#F00"
const COLOR_GREEN = "#0F0"
const COLOR_BLUE = "#00F"
const COLOR_ORANGE = "#FF7F00"
​
// ……当我们需要选择一个颜色
let color = COLOR_ORANGE
alert(color) // #FF7F00
</script>

好处：

• COLOR_ORANGE 比 "#FF7F00" 更容易记忆。
• 比起 COLOR_ORANGE 而言，"#FF7F00" 更容易输错。
• 阅读代码时，COLOR_ORANGE 比 #FF7F00 更易懂。

什么时候该为常量使用大写命名，什么时候进行常规命名？

作为一个“常数”，意味着值永远不变。但是有些常量在执行之前就已知了（比如红色的十六进制值），还有些在执行期间被“计算”出来，但初始赋值之后就不会改变。

例如：

<script>
const pageLoadTime = /* 网页加载所需的时间 */
</script>

pageLoadTime 的值在页面加载之前是未知的，所以采用常规命名。但是它仍然是个常量，因为赋值之后不会改变。

换句话说，大写命名的常量仅用作“硬编码（hard-coded）”值的别名。