ES6常用语法

2018-12-03 本文已影响0人可笑的黑耀斑

什么是ES6

ECMAScript 6 简称ES6，在2015年6月正式发布。ECMAScript 是 JavaScript 语言的国际标准。
我们本着二八原则，掌握好常用的，有用的就行。

1、声明变量 const、let、var

ES6以前用var关键字声明变量，无论声明在何处都存在着变量提升这个事情（变量提升：会提前创建变量，但并没有赋值）作用域也只有全局作用域以及函数作用域（所以变量会提升在函数顶部或者全局作用域的顶部）。
let 关键字表示变量，const 表示常量。都是块级作用域，比如一个函数内部，代码块 { } 内部。

// 全局变量的提升
    console.log(global)
    var global = "global"
    console.log(global)

    //  函数内变量的提升
    function aa() {
       if(1){
           var test = "test"
       }
       console.log(test)
    }
    function bb() {
        if(1){
            let test ="test";
        }
        console.log(test)
    }
    // 在for循环中 let
    var arry = [];
    for(var i = 0; i<10; i++){
        console.log(i)
        arry[i] = function () {
            console.log(i)
        }
    }
    // 相当于
    // var arry = [];
    // var i;
    // for(i = 0; i<10; i++){
    //     console.log(i)
    //     arry[i] = function () {
    //         console.log(i)
    //     }
    // }
    arry[5]()
    const name = "gaoxin";
    const name = "随意"
    // 报错

2、模板字符串

ES6 引入了反引号

<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的匿名函数 lambda。
最直观的三个特点

不需要function关键字来创建函数
省略 return 关键字
继承当前上下文的this关键字（因为箭头函数的调用者是当前的上下文，跟普通函数区别开）

例子：

// ES6
x => x+1
// 等同于
function test(x) {
    return x+1
}

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();

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