ES6 常用语法

什么是ES6

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

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

1 声明变量const let var

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

作用域也只有全局作用域以及函数作用域~ 所以变量会提升在函数顶部或全局作用域顶部~

let 关键字表示变量，const 表示常量。都是块级作用域，比如一个函数内部，代码块{}内部~

1// 全局变量的提升
2    console.log(global)
3    var global = "global"
4    console.log(global)
5
6    //  函数内变量的提升
7    function aa() {
8       if(1){
9           var test = "test"
10       }
11       console.log(test)
12    }
13    function bb() {
14        if(1){
15            let test ="test";
16        }
17        console.log(test)
18    }
19    // 在for循环中 let
20    var arry = [];
21    for(var i = 0; i<10; i++){
22        console.log(i)
23        arry[i] = function () {
24            console.log(i)
25        }
26    }
27    // 相当于
28    // var arry = [];
29    // var i;
30    // for(i = 0; i<10; i++){
31    //     console.log(i)
32    //     arry[i] = function () {
33    //         console.log(i)
34    //     }
35    // }
36    arry[5]()
37    const name = "gaoxin";
38    const name = "随意"
39    // 报错

var let const

2 模板字符串

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

1<body>
2<div id="head">
3
4</div>
5
6<script>
7// 模板字符串进行标签字符串的拼接一行搞定
8let ele = `
9    <div>
10        <h1>模板字符串</h1>
11        <p>动态添加</p>
12    </div>
13`;
14let ele_div = document.getElementById("head");
15console.log(ele_div)
16ele_div.innerHTML= ele;
17
18// 将表达式嵌入字符串
19let a = 10;
20let b = 5;
21console.log(`结果是：${ a + b }, ${ a * b}`)
22
23
24</script>
25
26</body>

模板字符串

3 函数

箭头函数，是函数的快捷写法，类比Python的匿名函数 lambda。

最直观的三个特点

　　-- 不需要function关键字来创建函数

　　-- 省略return关键字

　　-- 继承当前上下文的this关键字（因为箭头函数的调用者是当前上下文，跟普通函数区别开）

1// ES6
2x => x+1
3// 等同于
4function test(x) {
5    return x+1
6}

箭头函数

1// 函数在哪里调用了 才决定this到底引用的是谁~~~
2// 最后一个调用函数的对象才是传到函数里的上下文对象this~~~
3
4console.log(this)
5
6function test() {
7    console.log(this)
8};
9
10let obj = {
11    a: 1,
12    test: test,
13};
14
15let obj2 = {
16    b: 3,
17    obj: obj,
18};
19
20obj.test();
21test();
22obj2.obj.test();

上下文的this

4 import 和 export

import 导入模块、export导出模块

1// main.js
2// 导出多个声明
3export var name = "gaoxin"
4export var age = "18"
5export function aa() {
6    return 1
7}
8// 批量导出
9export {name, age, aa}
10
11// test.js
12import {name, age, aa} from "./main"
13console.log(name)
14console.log(age)
15console.log(aa())
16// 整个模块导入 把模块当做一个对象
17// 该模块下所有的导出都会作为对象的属性存在
18import * as obj from "./main"
19console.log(obj.name)
20console.log(obj.age)
21console.log(obj.aa())
22

名字导出

1// 一个模块只能有一个默认导出
2// 对于默认导出 导入的时候名字可以不一样
3// main.js
4var app = new Vue({
5
6});
7export default app
8// test.js
9// import app from "./main"
10import my_app from "./main"

默认导出

5 数据解构

数据的解构类似于我们python里面的**解包

1const people = {
2    name: "提莫",
3    age: 2,
4};
5const person = ["瑞文", "刀妹"]
6
7const { name, age } = people
8console.log(name)
9console.log(age)
10const [name1, name2] = person
11console.log(name1)
12console.log(name2)

解构

6 class extends super

ES6 引入了关键字class来定义一个类，constructor是构造方法，this代表实例对象。

类之间通过extends继承，继承父类的所有属性和方法。

super关键字，它代指父类的this对象，子类必须在constructor中调用super()方法，

否则新建实例时会报错，因为子类没有自己的this对象。调用super()得到this，才能进行修改。

1class Animal{
2    constructor(){
3        this.type = "animal"
4    }
5    says(say){
6        console.log(this.type + "says" + say )
7    }
8}
9
10let animal = new Animal()
11
12animal.says("hello")
13
14class Dog extends Animal{
15    constructor(){
16        super();
17        this.type = "dog";
18    }
19}
20
21let dog = new Dog()
22dog.says("hello")

class extends super

~~其实ES6的特性远不止于此，有兴趣的可以自己查看文档~~

~~ 待更新~~~