前言
ECMAScript 变量是松散类型的，变量可以保存任何类型的数据，每个变量不过是一个用于保存任意值的命名占位符。有三个关键字可以声明变量，var 是在 ECMAScript 所有版本都可以使用，而 const 和 let 只能在 ES6 版本后使用
一、var 声明
1. 如果不给变量传值的话 ，变量就是 undefined
var msg;console.log(msg) //undefined
复制代码
2. var 声明作用域：var 操作定义符的变量会成为包含它的函数的局部变量，如果用 var 在一个函数内部定义变量，该变量将在函数推出时被销毁
function test(){ var msg = 'Bear';}test();console.log(msg);//报错
复制代码
3. var 声明提升：使用 var 时，下面代码不会报错，因为使用这个关键字声明的变量会自动提升到函数作用域顶部
function test(){ console.log(name); var name = 'Bear';}test() //undefined//之所以不会报错是因为ES运行时把他看成以下的代码function test(){ var name ; console.log(name); name = 'Bear';}test() //undefined
复制代码
二、let 声明
let 跟 var 的作用差不多，区别就是 let 声明的范围是块作用域，而 var 声明的范围是函数作用域
if(true){var name = 'bear';console.log(name); //bear}console.log(name);//bear
if(true){let name = 'bear';console.log(name); //bear}console.log(name);// ReferebceError:name 没有定义
复制代码
2.let 不允许同一块作用域出现重复的声明，这样会导致报错
var name;var name;let age;let age;//报错 Syntax Error 标识符age已经被声明过了
复制代码
let 声明的变量不会在作用域中被提升
//var会提升console.log(name) //undefinedvar name = 'bear';//let 不会提升console.log(age) //ReferenceError age没有定义let age = 21;
复制代码
4.let 在全局作用域中声明的变量不会成为 window 对象的属性（var 声明的则会）
var name = 'bear';console.log(window.name);// bear
let age = 21;console.log(window.age); //undefined
复制代码
5.for 循环中的 let 声明在 let 出现之前 for 循环定义的迭代变量会渗透到循环体外部
for (var i = 0; i < 5 ;i++){}console.log(i); //5
复制代码
在改成 let，这个问题就小时了，因为迭代的变量只属于 for 循环块内部
for (var i = 0; i < 5 ;i++){}console.log(i); //ReferenceError i没有定义
复制代码
在用 var 的时候最常见的问题就是对迭代变量的声明和修改
for (var i = 0; i < 5 ;i++){ setTimeout(() => console.log(i) , 0)} //会输出55555 你可能以为会输出0 1 2 3 4 //因为在推出循环时候，变量保存的是循环退出后的值，所以输出了 5次5
复制代码
在使用 let 变量就不会导致这样的情况
for (let i = 0; i < 5 ;i++){ setTimeout(() => console.log(i) , 0)} //会输出0 1 2 3 4
复制代码
三、const 声明
const 基本与 let 相似，唯一一个重要区别是用它声明变量时必须同时初始化变量值，且尝试修改 const 声明的变量会导致运行的错误
1.给常量赋值
const name = 'bear';name = 'jackson' ; //typeError 报错
复制代码
2.const 也不允许重复声明
const name = 'bear';const name = 'jackson' ; //SyntaxError 报错
复制代码
3.const 声明的作用域也是块
const name = 'bear';if(true){ const name = 'jackson';}console.log(name) //bear
复制代码
4.const 的声明限制值适用于它指向的变量的引用
const test = {};test.name = 'bear' ; //这里可以运行
复制代码
四、总结
1.不使用 varES6 相当于把 var 的功能拆解成 const 和 let，有了 let 和 const，其实会发现不需要再用 var 了，限制自己使用 const 和 let 有助于代码质量的提升。
2.const 优先 let 次之使用 const 声明可以让浏览器运行时强制保持变量不变，在这同时也能迅速发现意外赋值的这种非预期行为。简而言之就是 const 定义一些不会变的变量，会变的就用 let 定义。
评论