ES6的三种声明方式【var & let & const】

ES6

以前我们在声明时只有一种方法，就是使用var来进行声明，ES6对声明的进行了扩展，现在可以有三种声明方式了。

字面理解ES6的三种声明方式：

• var：它是variable的简写，可以理解成变量的意思。
• let：它在英文中是“让”的意思，也可以理解为一种声明的意思。
• const：它在英文中也是常量的意思，在ES6也是用来声明常量的，常量你可以简单理解为不变的量。

var声明：

var在ES6里是用来升级全局变量的，我们可以先作一个最简单的实例

var a = 'www';
console.log(a);  // www

如何理解它的作用是声明全局变量那？我们用匿名函数给他进行一个包裹，然后在匿名函数中调用这个a变量，看看能不能调用到。

var a = "www";
window.onload= function(){
    console.log(a);     // www
}

可以看到控制台输出了www，这证明var确实是全局的。如果你觉的这个不够直观说明var是全局声明，还可以用区块的方式进行调用测试，先看下面的代码。

var a=2;
{
   var a=3;
}
console.log(a);  // 3

这时打印出来的值是多少那？对，应该是3，因为var是全局声明的。

let局部声明

通过两个简单的例子，我们对var的全局声明有了一定了解。那跟var相对应的是let，它是局部变量声明。还是上面的例子，我们试着在区块里用let声明。

var a=2;
{
   let a=3;
}
console.log(a);     // 2

如果我们只在区块里声明，不再外部声明，我们打印a时就会报错，显示找不到变量。

{
   let a=3;
}
console.log(a);     // 报错

上面两个例子说明了let是局部变量声明，let声明只在区块内起作用，外部是不可以调用的。

let是防止你的数据污染的，在大型项目中是非常有用处的。

现在看一个循环的例子，我们来看一下let的好处。

用var和let分别声明的循环
使用var循环

for(var i=0; i<10; i++){
    console.log('循环体中:' + i);   // 0 1 2 3 4 5 6 7 8 9 10
}
console.log('循环体外:' + i);     // 10

使用let循环

for(let i=0; i<10; i++){
    console.log('循环体中:' + i);   // 0 1 2 3 4 5 6 7 8 9
}
console.log('循环体外:' + i);   // 报错

执行时发现控制台报错了，找不到循环体外的i变量。

总结：通过两种声明的比较，可以明白let在防止程序数据污染上还是很有用处的。我们要努力去习惯用let声明，减少var声明去污染全局空间，在vue的使用中也要注意这点。

let的特点

1、不可以变量提升

// console.log(a);  // 报错 Uncaught ReferenceError: a is not defined
let a = 20;
console.log(a);     // 20

2、声明的变量不可以再次声明，但是可以重新赋值

let b = 10;
console.log(b);     // 10
// let b = 30;      // Uncaught SyntaxError: Identifier 'a' has already been declared
b = 40;
console.log(b);     // 40

3、可以形成一个块级作用域

for(let i = 0; i<5; i++){
    console.log(i);     // 0 1 2 3 4
}

let a = 20;
function mm(){
    let a = 10;
    console.log(a);         // 10
    return function(){
        console.log(a);     // 10
    }
}
mm()();

var与let的区别

for(var i = 0; i<5; i++){
    setTimeout(function(){
        console.log(i);  // 返回5次的5
    },0)
}

for(let i = 0; i<5; i++){
    setTimeout(function(){
        console.log(i);  // 返回0 1 2 3 4 
    },0)
}

const声明常量

在程序开发中，有些变量是希望声明后在业务层就不再发生变化了，简单来说就是从声明开始，这个变量始终不变，就需要用const进行声明。

我们来一段用const声明错误的代码，在错误中学习const的特性也是非常好的。

const a = "www";
var a = '123';
console.log(a);

在编译这段代码的过程中，你就会发现已经报错，无法编译了，原因就是我们const声明的变量是不可以改变的。

const的特点

1、不可以常量提升

// console.log(a)  // 报错 Uncaught ReferenceError: a is not defined
const a =10;
console.log(a) // 10

注意：声明只读常量，声明时必须初始化，否则编译报错

const a;    // Uncaught SyntaxError: Missing initializer in const declaration

2、声明的常量不可以再次声明，也不可以重新赋值(常量存储的地址不可以发生改变)

不可以再次声明，不可以重新赋值

const b = 10;
// const b = 20     // 报错 Uncaught SyntaxError: Identifier 'b' has already been declared
// b =20;           // 报错 Uncaught TypeError: Assignment to constant variable.

声明的对象常量，不可以重新赋值，但是可以修改值

const obj = {
    a:"html",
    b:"css"
}
console.log(obj);  // {a: "html", b: "css"}
// obj = { a:"javscript" }  // 报错 Uncaught TypeError: Assignment to constant variable.
// 可以修改
obj.a = "javscript";
obj.c =" jquery"
console.log(obj);   // {a: "javscript", b: "css", c: " jquery"}

注意：在同一作用域中不能重复声明一个变量，即使是声明函数的参数也不行

// for(const i=0; i<5;i++){
//  console.log(i);
// }
// 0 Uncaught TypeError: Assignment to constant variable.

3、可以形成一个块级作用域

const a = 20;
function mm(){
    const a = 10;
    console.log(a);         // 10
    return function(){
        console.log(a);     // 10
    }
}
mm()();