携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情
前言
变量的声明在每个编程语言里都会有，es5 中声明变量仅能使用 var , es6后新增了 let 和 const。其中，var 和 let 表示声明变量，const 表示声明常量。
1、基本使用
- let：let 声明的变量只在 let 声明的代码块中有效, 直观上与 var 使用一致
- const：全拼constant常量的意思，一经声明不可以更改，但是引用类型可以修改数据内部结构（Array, Object）
2、命名方式
var:
var name;
var age, id;
var birthplace = '北京';
var sex = '男', height = 170, hobby = [];
let:
同 var
const:
const SCHOOL = '北大'
3、变量let var的区别
3.1、let 变量不能重复声明
let star = '1';
let star = '2';
- （1）let：报错,表示已经声明
- （2）var：正常，star等于2
3.2、let不存在变量提升
console.log(song);
let song = '恋爱达人'
- let：报错，表示未初始化前无法访问
- var：正常，song等于undefined，原因是变量提前以 var 的方式进行了声明
3.3、let声明的变量属于块级作用域
- 什么是块级作用域：ES6 中新增了块级作用域，由一对大括号包裹形成的作用域就是块级作用域。（ps: if else while for）
- var 声明的变量属于函数作用域；let 属于块级作用域
{
let girl = '高圆圆'
}
console.log(girl);
- let：报错，表示没有找到girl这个变量(也体现在if else while for上)
- var：正常，打印高圆圆
- let 之所以会报错，是因为 let 声明的是块级作用域，只在相应的区块内有效，离开就没有权限访问了，{ } 就是一个区块，输出是在外部输出，所以访问不到，便报错了。
3.4、let不会全局环境声明
（1）在全局环境中声明变量，var声明会成为window的属性或方法，let不会
var str1 = 'a';
let str2 = 'b'
console.log(window.str1,window.str2);
- let：输出 undefined
- var：输出 'a'
3.5、var 会造成意想不到的全局污染
举例一
for (var i = 1; i <= 10; i++) {
setTimeout(function () {
console.log(i)
},1000)
}
运行代码：程序输出了十次 11，与需求一秒之后分别输出 1 - 10的值不符，将 var 改成 let 则恢复正常
举例二
let lists = document.getElementsByClassName('li')
for (let i = 0; i < lists.length; i++) {
lists[i].onclick = function() {
// 修改颜色
items[i].style.background = 'red'
}
}
需求：点击 li 让颜色变成 red
运行代码： 如果 i 使用的是let，三个 i 互不影响，如 i 使用的是var 的话 会报错，因为 i 已经变成 lists.length + 1 了
4、const
- const 一定要有初始值
- 一般用大写来命名常量，如：const SCHOOL = '北大'
- 常量的值不能被修改，引用类型除外
- 与 let 一样是块级作用域
5、总结
- 为了安全，大部分情况下 var 都可以用 let 替代，尤其是 for 循环中定义循环变量，使用let可以避免变量污染
- 定义常量在大多数情况下应使用 const，这样有利于代码的阅读，不用考虑这个变量会不会发生改变，还能提高程序的 潜在 执行效率。
- 大部分情况下都不应该使用 var 进行声明，因其全局破坏的影响，尽量使用 let 或 const 进行取缔。
- 有些老版本的浏览器还不兼容 let 和 const ，只能用var
- 在代码块内，使用 let 命令声明变量之前，该变量都是不可用的。这在语法上，称为 “暂时性死区”
