Vue-es6基础语法
什么是ES6
ECMAScript 6 简称ES6, 在2015年6月正式发布~ ECMAScript 是JavaScript语言的国际标准。
我们本着二八原则，掌握好常用的，有用的~能让我们更快的上手~~~
1 声明变量const let var
ES6以前 var关键字来声明变量，无论声明在何处都存在变量提升这个事情~~会提前创建变量~
作用域也只有全局作用域以及函数作用域~ 所以变量会提升在函数顶部或全局作用域顶部~
let 关键字表示变量，const 表示常量。都是块级作用域，比如一个函数内部，代码块{}内部~
变量提升：只是提升变量名，赋值还在原位置赋值
var : 全局作用域
let : 块级作用域，不能被重复定义
const : 变量不可改，不能被重复定义
2 模板字符串
<body> <div id="head"> </div> <script> // 模板字符串进行标签字符串的拼接一行搞定 let ele = ` <div> <h1>模板字符串</h1> <p>动态添加</p> </div> `; let ele_div = document.getElementById("head"); console.log(ele_div) ele_div.innerHTML= ele; // 将表达式嵌入字符串 let a = 10; let b = 5; console.log(`结果是：${ a + b }, ${ a * b}`) </script> </body>
3 数据解构
数据的解构类似于我们python里面的**解包
const people = { name: "提莫", age: 2, }; const person = ["瑞文", "刀妹"] const { name, age } = people console.log(name) console.log(age) const [name1, name2] = person console.log(name1) console.log(name2)
4 函数
箭头函数，是函数的快捷写法，类比Python的匿名函数 lambda。
最直观的三个特点
-- 不需要function关键字来创建函数
-- 省略return关键字
-- 继承当前上下文的this关键字
// ES6
x => x+1
// 等同于
function test(x) {
return x+1
}
5 this
// 函数在哪里调用了 才决定this到底引用的是谁~~~
// 最后一个调用函数的对象才是传到函数里的上下文对象this~~~
console.log(this)
function test() {
console.log(this)
};
let obj = {
a: 1,
test: test,
};
let obj2 = {
b: 3,
obj: obj,
};
obj.test();
test();
obj2.obj.test();
6 class extends super
ES6 引入了关键字class来定义一个类，constructor是构造方法，this代表实例对象。
类之间通过extends继承，继承父类的所有属性和方法。
super关键字，它代指父类的this对象，子类必须在constructor中调用super()方法，
否则新建实例时会报错，因为子类没有自己的this对象。调用super()得到this，才能进行修改。
class Animal{
constructor(){
this.type = "animal"
}
says(say){
console.log(this.type + "says" + say )
}
}
let animal = new Animal()
animal.says("hello")
class Dog extends Animal{
constructor(){
super();
this.type = "dog";
}
}
let dog = new Dog()
dog.says("hello")
7 Spread Operator 展开运算符
1 组装对象或者数组
2 想获取数组或者对象除了前几项或者除了某几项的其他项
