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对象
原文地址:https://www.cnblogs.com/lvye001/p/9971173.html