【VUE】ES6常用语法巩固

前言:Vue是以ES6为基础构建的,加上ES6已经被目前绝大部分浏览器支持,是 JavaScript 的下一个版本标准,因此有必要单独抽出来一篇来总结一下ES6的语法.

---

目录

 

1.var const let 区别

2.箭头函数

3.参数的默认值

4.展开运算符

5.省略字面量

---

1.var const let 区别

var的作用域是方法作用域,在方法外无法访问通过var定义的变量.

const的作用域和let的作用域相同,是块级作用域,只要出在同一个{}内都是可以被访问到的,两者的主要差别是const一旦被赋值就不能再被改变了,这点类比java中的final关键字即可理解. 在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 = 30;
   return a + b;
}

值得一提的是,箭头函数中没有this,所以要使用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
};

目前已知的常用的几项暂时总结到这里,后续如有新的会持续更新过来.