ES6系列（一）->定义变量

说在系列之前

想要在自己电脑上运行起来es6，请自行配置好环境，这里就不说明怎么配置了，如果有不会的可以百度，百度上很多教程
关于es6是什么，ECMA是什么，这种问题这里不会去说明，想要了解的也请百度
如果对文中出现的任何问题，不管是讨论，指错等等都可以直接在下面留言
废话不多说，开始正文

在es6之前，我们定义变量使用 命令var；

//基本都是如下这样去定义var x,y,z = 1;var a = 10;var b = 20;var c = function(){};var d = {};var e = [];//相信上面大家是没有异议的，如果有的话，那么建议百度一下var的使用方式;//或者再看看《前端--从var入门到彻底放弃》这本书 0.0 (๑˃∀˂๑);

---

es6新增了两种定义变量的命令let 和 const，首先我们来看let;

let

let 命令使用方式和var命令一模一样，我们把上面的例子改成这样：

let x,y,z = 1;let a = 10;let b = 20;let c = function(){};let d = {};let e = [];

完全是成立的，没有任何毛病，当然仅仅是使用方法一模一样，下面分析let有哪些方面是和var有区别的；

---

从变量提升说起

//示例一 let a1 = 10; var b1 = 10; console.log(a1); // 10console.log(b1); // 10//示例二 console.log(a2); // 报错 : a is not definedconsole.log(b2); // undefinedlet a2 = 10; var b2 = 10; 

从上面示例看来，var 和 let 声明的变量，在声明之后调用完全没问题，但是如果在定义之前调用处理的情况就不一样了；
这是因为：var 定义出来的变量是存在变量提升的，但是let定义的变量是不存在变量提升的
所以在之前调用就会报错

---

从作用域来说

//示例一var a = 10;let b = 20;function f1(){    var a = 11;    let b = 21;    console.log(a); // 11    console.log(b); //21}f1();console.log(a); // 10console.log(b); // 20//示例二var a = 10;let b = 20;function f1(){    console.log(a); // undefined    console.log(b); //报错 ：b is not defined    var a = 11;    let b = 20;}f1();console.log(a); //10console.log(b); //20//示例三if(true){    var a = 10;    let b = 20;}console.log(a) // 10;console.log(b) // 报错:b is not definedfor(var i=0;i<3;i++){    var a = i;    let b = i;}console.log(a) //2console.log(b) //报错:b is not defined

示例一：说明let定义的变量和var定义的一样，都会在函数形成的作用域内绑定，不受函数之外定义的变量影响；同样也影响不到外界的变量；
示例二：说明，不管是在全局作用和局部作用域let 都不会存在变量提升
示例三：可以看出，var的作用范围完全取决于作用域块的范围(说明一下：能够形成作用域块的只有全局作用域和函数作用域)，但是let的作用范围取决于是否在{ }区块内定义的变量，如果是只在该区块内定义，该区块内调用有效，否在就会报错；

---

从多次申明来看

//示例一var a = 10;var a = 11;let b = 20;let b = 21;console.log(a); // 11console.log(b); // 报错: Identifier 'b' has already been declared

示例一说明：
var 定义出来的变量可以覆盖前面定义的变量，而let定义出来的变量在同一区块内也就是{}是不能重复声明的否则就会报错；

const

其实const与let很相似，同样没有变量提升，同样以花括号{ }作为作用范围，同样不能多次声明
let 和 const 的区别就在于

//示例一let a = 10;    a = 20;const b = 30;      b = 35;   console.log(a) //20console.log(b) //报错: Assignment to constant variable    

从示例一可以看出来：const申明的变量，一旦申明了，他的值就能再改变，否则就会报错

---

最后一点

全局作用域中赋值，let 和 const的顶级对象都不是window ，而var 是（假定是在浏览器环境中）

var a = 10;let b = 20;const c = 30;console.log(window.a) // 10console.log(window.b) // undefinedconsole.log(window.c) // undefined

好了，关于变量的定义就讲到这里了，感谢大家的阅读，还是那句话，如果大家有任何疑问或者指错，请在下方留言；

---

微信搜索关注公众号 【大前端js】，回复vue教程，react教程，webpack实战等等，获得不同的视频教程，大量视频教程等你来拿；

---

原创不易，总结不易，手打不易，转载时请注明出处，谢谢