学习Vue之前,ES6的基础常识是必须要了解的,下面列举了几种最重要的特性,学会了这些,Vue的学习就易如反掌了。
1.变量声明const和let
- 在ES6之前,我们都是用var关键字声明变量。var声明的变量存在变量提升问题,也就是var无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。例如:
<script>
console.log(name);
var name = 'wangjifei';
console.log(name)
</script>
//其代码相当于:
<script>
var name; //变量提升,未定义
console.log(name);
var name = 'wangjifei';
console.log(name)
</script>
- ES6新的变量声明const和let:
let 表示声明变量、const 表示声明常量。let 和 const 都是块级作用域,即每个{}花括号内表示 let 和 const 的作用域。
function aa() {
if(true) {
let name = 'wang'
} else {
//name 在此处访问不到
console.log(name)
}
}
----------------------------------------------
const name = 'lux'
name = 'joe' // 再次赋值此时会报错
2.函数
- 之前的函数书写格式是这样的
function test(x) {
return x+1
}
- 箭头函数
x => x+1
- 箭头函数最直观的三个特点。
- 不需要 function 关键字来创建函数
- 省略 return 关键字
- 继承当前上下文的 this 关键字----->最近的调用者是传递给函数的this
3、类
<script>
//创建类的关键字是class
class Animal {
//构造函数
constructor() {
this.type = "animal"
}
//类方法
says(say) {
console.log(this.type + "says" + say)
}
}
//实例化对象
let animal = new Animal();
//对象调用方法
animal.says("ao~~~");
//类的继承用extends
class Dog extends Animal {
//构造方法
constructor() {
// 没有自己的this super继承父类的this
super();
this.type = "dog"
}
}
//实例化对象
let dog = new Dog();
//对象调用方法
dog.says("wang~~~")
</script>
4、模板字符串
let html = `<div><p>我是一个模板字符串</p></div>`
5、数据的解构
数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息,ES6新增了解构,这是将一个数据结构分解为更小的部分的过程
<script>
let array = ["程咬金", "程咬铜", "程咬铁"];
let obj =
{
name: "wangfei",
sex: "男"
};
let [a, b, c] = array;
let {name, sex} = obj;
console.log(a);
console.log(b);
console.log(c);
console.log(name);
console.log(sex);
</script>