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); // 10
console.log(b1); // 10

//示例二 
console.log(a2); // 报错 : a is not defined
console.log(b2); // undefined
let 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); // 10
console.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); //10
console.log(b); //20

//示例三
if(true){
    var a = 10;
    let b = 20;
}
console.log(a) // 10;
console.log(b) // 报错:b is not defined

for(var i=0;i<3;i++){
    var a = i;
    let b = i;
}
console.log(a) //2
console.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); // 11
console.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) //20
console.log(b) //报错: Assignment to constant variable    

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

---

最后一点

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

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

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

---

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

---

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