vue2.0使用ES6语法

ES6 快速入门

什么是ES6？

　　ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。

　　ECMAScript和JavaScript到底是什么关系？简单来说，ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。

let:

 ES6新增了let命令，用于声明变量。其用法类似var，但是声明的变量只在let命令所在的代码块内有效。

{
    let x = 10;
    var y = 20;
}

x  // ReferenceError: x is not defined
y  // 20

var声明变量存在变量提升。也就是在声明变量之前就可以使用该变量。

console.log(x)  // undefined，var声明变量之前可以使用该变量
var x = 10;

而let不会这样，let声明的变量不能在声明之前使用。

console.log(x)  // ReferenceError: x is not defined，let声明变量之前不可以使用该变量
let x = 10;

注意：

let不允许在相同的作用域内重复声明同一个变量。 

比如：

function foo(){
    let x = 10;
    var x = 20;
}  // 报错

再比如：

function foo(){
    let y = 10;
    let y = 20;
}  // 报错

ES5中只有全局作用域和函数作用域，并没有块级作用域。

请看下面的示例： 

var name = 'Q1mi'

function foo(){
    console.log(name)
    if (false){
        var name = 'Bob'
    }
}
foo()  // undefined

出现上述现象的原因就是在函数内部，由于变量提升导致内存的name变量覆盖了外层的name变量。

类似的情况还出现在 for循环的计数变量最后会泄露为全局变量。 

for (var i=0;i<5;i++){
    console.log('哈哈');
}
console.log(i);  // 5

ES6中的let声明变量的方式实际上就为JavaScript新增了块级作用域。

var name = 'Q1mi'

function foo(){
    console.log(name)
    if (false){
        let name = 'Bob'
    }
}
foo()  // Q1mi

此时，在foo函数内容，外层代码块就不再受内层代码块的影响。所以类似for循环的计数变量我们最好都是用let来声明。

const

const用来声明常量。const声明变量必须立即初始化，并且其值不能再改变。

const声明常量的作用域与let相同，只在声明所在的块级作用域内有效。 

 

例如：

const PI = 3.14；

全局对象的属性：

ES6规定：var命令和function命令声明的全局变量依旧是全局对象的属性；let命令、const命令和class命令声明的全局变量不属于全局对象的属性。

查看下面的示例代码：

var x = 10;
let y = 20;
window.x  // 10
window.y  // undefined

变量的解构赋值

ES6允许按照一定的模式，从数组或对象中提取值，对变量进行赋值，这种方式被称为解构赋值。

var [x, y, z] = [10, 20, 30]
x  // 10
y  // 20
z  // 30

对象的解构赋值：

var {x, y} = {x: 10, y: 20}
x  // 10
y  // 20

箭头函数

箭头函数有个特点：

1. 如果参数只有一个，可以省略小括号
2. 如果不写return，可以不写大括号
3. 没有arguments变量
4. 不改变this指向

其中箭头函数中this指向被固定化，不是因为箭头函数内部有绑定this的机制。实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。

 

可以查看下面两段代码输出的区别：

var person = {
    name: 'Q1mi',
    age:18,
    func:function(){
        console.log(this);
    }
}
person.func()  // person对象

和

var person = {
    name: 'Q1mi',
    age:18,
    func:()=>{
        console.log(this);
    }
}
person.func()  // window对象