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 想获取数组或者对象除了前几项或者除了某几项的其他项