前言:Vue是以ES6为基础构建的,加上ES6已经被目前绝大部分浏览器支持,是 JavaScript 的下一个版本标准,因此有必要单独抽出来一篇来总结一下ES6的语法.
目录
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
};目前已知的常用的几项暂时总结到这里,后续如有新的会持续更新过来.
