ES6常用语法

什么是ES6

ECMAScript 6 简称ES6, 在2015年6月正式发布~ ECMAScript 是JavaScript语言的国际标准。

我们本着二八原则，掌握好常用的，有用的~能让我们更快的上手~~~

1 声明变量const let var

ES6以前 var关键字来声明变量，无论声明在何处都存在变量提升这个事情~~会提前创建变量~

let    特点：
1.局部作用域
2.不会存在变量提升
3.变量不能重复声明

const  特点：    
1.局部作用域 
2.不会存在变量提升 
3.不能重复声明，只声明常量 不可变的量

2 模板字符串

ES6引入了反引号``, 来看看它的神奇之处吧~~~

tab键上面的反引号 ${变量名}来插值
let name = '未来';
let str = `我是${name}`
```

3 函数

function(){} === ()=>{} this的指向发生了改变

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
    /*
    function add(x){
        return x
    }
    add(5);
    */
//    let add = function (x) {
//        return x;
//    }
//    add(10);

//    let add2 = (x)=>{
//        return x
//    }
//    let add2 = x => x;
//    console.log(add2(30));

</script>

</body>
</html>

箭头函数

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
    let person = {
        name: "日天",
        age: 30,
        fav: function () {
            console.log(this); //this指向 当前的对象
            console.log(this.name);
        }
    }

    /*
     let person2 = {
        name: "日天2",
        age: 30,
        fav:  () => {
            console.log(this); //this指向 发生了改变。this指向 定义person2的父级对象(上下文)
            console.log(this.name);
        }
    }

    person2.fav()
    */
//    对象的单体模式
        let person3 = {
            name:'日天',
            fav(){
                console.log(this);
            }
//            fav:function () {
//
//            }
        }
        person3.fav();
</script>
</body>
</html>

this指向问题

4 import 和 export

import 导入模块、export导出模块

// main.js
// 导出多个声明
export var name = "gaoxin"
export var age = "18"
export function aa() {
    return 1
}
// 批量导出
export {name, age, aa}

// test.js
import {name, age, aa} from "./main"
console.log(name)
console.log(age)
console.log(aa())
// 整个模块导入 把模块当做一个对象
// 该模块下所有的导出都会作为对象的属性存在
import * as obj from "./main"
console.log(obj.name)
console.log(obj.age)
console.log(obj.aa())
       

名字导出

名字导出

// 一个模块只能有一个默认导出
// 对于默认导出 导入的时候名字可以不一样
// main.js
var app = new Vue({

});
export default app
// test.js
// import app from "./main"
import my_app from "./main"

默认导出

默认导出

5 数据解构

数据的解构类似于我们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)

解构

解构

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")

class extends super

class extends super

幻想毫无价值，计划渺如尘埃，目标不可能达到。这一切的一切毫无意义——除非我们付诸行动。