JavaScript es6中的var、let和const

电玩女神 2022-09-13 15:25 217阅读 0赞

2015 年 6 月，ECMAScript 6 （简称 es6，又称为ECMAScript 2015）正式通过，成为国际标准。

let 允许创建块（block）级作用域，ES6 推荐使用 let 定义变量，而非 var。

块作用域由 \{ \} 包括，if语句和 for语句里面的\{ \}也属于块作用域。

var 声明的变量在任何地方都能重复声明，let 声明的变量在相同的作用域不能重复声明。如：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_9_color_FFFFFF_t_70_g_se_x_16][]

let 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的。如：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_9_color_FFFFFF_t_70_g_se_x_16 1][]

非函数内（在函数体外）使用var或let声明的变量拥有全局的作用域，是全局变量。如：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_6_color_FFFFFF_t_70_g_se_x_16][]

在函数内使用var或let声明的变量是局部变量，只能在函数内部使用，不能在函数外部使用。如：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_8_color_FFFFFF_t_70_g_se_x_16][]

var有变量提升（hoisting）特性， let 没有变量提升特性。

变量提升，即编译时提前将后面声明的变量提前放入内存中，供上下文语句执行时调用；但并不是指在编译时改变语句的顺序。

var具备变量提升（hoisting）特性的例子：

代码段

console.log(i);

var i;

不报错，相当于

var i;

console.log(i);

代码段

console.log(j);

let j;

将报错

参见下图：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_7_color_FFFFFF_t_70_g_se_x_16][]

注意，变量提升并不是指在编译时改变语句的顺序，例如

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_5_color_FFFFFF_t_70_g_se_x_16][]

上面的代码最后一行的语句是 var a = 1，即对变量进行了申明并赋值，但是最后输出仍然是 undefined 而不是 1，证明变量提升行为只会对变量进行申明操作，并不会对其初始化赋值，不管原语句是否有赋值操作。

同样在块级作用域有效的另一个变量声明方式是 const，const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。const定义的对象属性是否可以改变呢？可以。如：

const ARR = \[5,6\];

ARR.push(7);

ARR; // \[5,6,7\]

ARR = 10; // TypeError，让ARR指向一个新对象，即让指针改变将报错

打开浏览器，按下F12键，在控制台中输入上述代码行测试之，参见下图：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_10_color_FFFFFF_t_70_g_se_x_16][]

对象是引用类型，ARR中保存的仅是对象的指针，这就意味着，const仅保证指针不发生改变，修改对象的属性不会改变对象的指针，所以是被允许的。也就是说const定义的引用类型只要指针不发生改变，其它的不论如何改变都是允许的。

小结：

非函数内（在函数体外）使用var或let声明的变量拥有全局的作用域，是全局变量。

在函数内使用var或let声明的变量是局部变量，只能在函数内部使用。

var 声明的变量在任何地方都能重复声明。let 声明的变量在相同的作用域不能重复声明,在不同作用域，或不同块级作用域中是可以重新声明赋值的。

var有变量提升（hoisting）特性， let 没有变量提升特性。

var定义的变量，没有块（block）的概念，可以跨块访问, 不能跨函数访问。

let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。

let 和 const 声明只在最靠近的一个块中（花括号内）有效，const用来定义常量，使用时必须初始化(即声明时必须赋值)，只能在块作用域里访问，而且不能修改。const定义的对象属性可以改变，但不可指向一个新对象。

进一步了解：[https://www.jb51.net/article/221216.htm][https_www.jb51.net_article_221216.htm]

[JS变量和函数式编程-var、let、const、全局变量、局部变量、块级作用域、循环作用域\_yanggfann的博客-CSDN博客][JS_-var_let_const_yanggfann_-CSDN]

[var 描述 - JavaScript | MDN][var _ - JavaScript _ MDN]

[let - JavaScript | MDN][let - JavaScript _ MDN]

[const - JavaScript | MDN][const - JavaScript _ MDN]

**附录、**浏览器控制台（Conaole）使用简介

**1****、**如何打开浏览器控制台（Conaole）？

打开浏览器按下F12键即可。

实际上，按下F12键，可以打开浏览器自带的开发工具，有多个面板，是一套内置于浏览器中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。其中控制台（Console）面板基本上就是一个命令行窗口，你可以在提示符下，键入各种命令。Microsoft Edge浏览器的参见下图：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_10_color_FFFFFF_t_70_g_se_x_16 1][]

**2****、**在浏览器控制台中如何输入多行语句？

当你想输入多行代码时，可以用shift+enter键。输入完毕回车得到结果。

如

let x=2 //按shift+enter键

let y=5  //按shift+enter键

console.log('和：',x+y)  //按enter键

参见下图：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_10_color_FFFFFF_t_70_g_se_x_16 2][]

**3**、在浏览器控制台中使用console.log()语句，如console.log("Hello")，没有显示的原因及解决：

原因筛选框中有内容，删除之即可，参见下图：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_11_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_9_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/1f439da8a46146e1b0cd4fdfa6e511c8.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_9_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/593a5fdbb0254ac7bb789ff7f38e31a9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_6_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/16b3593f46dc4baf993949d944f834ef.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_8_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/a50830fe9e6b4d2e924d5909041ab0b5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_7_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/8beb8f248ecf4a6daef4c7f25972802c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_5_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/d4c9687d0b4a49859c9cfdc31c2bb031.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_10_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/f4e20537f5384c97bdda7c300d097ee7.png
[https_www.jb51.net_article_221216.htm]: https://www.jb51.net/article/221216.htm
[JS_-var_let_const_yanggfann_-CSDN]: https://blog.csdn.net/weixin_45876795/article/details/108560366
[var _ - JavaScript _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/var
[let - JavaScript _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let
[const - JavaScript _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/const
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_10_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/710ccc33e3854441b96000c5a69c39cc.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_10_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/434f957fc53b43c38842a30138b5823a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_11_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/2c0dde604d8b471795740937bb2969a1.png