vue中常用的es6语法

ES6语法

1.var const let 区别

var的作用域是方法作用域，在方法外无法通过var定义的变量

const的作用域和let的作用域相同，是块作用域，只要出在同一个{}内都是可以被访问到的，两者的主要差别是const一旦被赋值就不再被改变，在vue中大部分情况下会用const，除非知道该变量值会改变。

2.箭头函数

//es5
var fn  = function(a,b){
    return a + b;
}
//es6箭头函数写法，当函数直接被return时，可以省略函数体的括号
const fn = (a,b) => a + b;
//es5
var foo = function(){
  var a=20;
  var b=30;
  return a+b;
}
//es6
const foo=()=>{
    const a = 20;
    const b = 20;
    return a + b;
}
值得一提的是，箭头函数中没有this，所以要使用时尽量避免使用箭头函数，否则容易出现undefined

3.参数的默认值

当函数的参数没有传递值会使用默认值，在es6中默认值的指定语法变得非常简单
//es5
function add(x,y){
   var x  = x || 20;
   var y  = y || 30;
   return x + y;
}
//es6
function add(x=20,y=30){
   return x + y;
}

4.展开运算符

const arr1 = [1,2,3];
const arr2 = [...arr1,10,20,30];
//这样，arr2变成了[1,2,3,10,20,30];
在不知道Props有多少数据传递过来，用展开运算符即可解决

5.省略字面量

//es6
const person = {
   name,
   age
}
//es5
var person = {
  name:name,
  age:age
};