ES6 經常使用語法

時間 2019-12-11

標籤 es6 經常使用語法欄目 JavaScript 简体版

原文原文鏈接

什麼是ES6

ECMAScript 6 簡稱ES6, 在2015年6月正式發佈~ ECMAScript 是JavaScript語言的國際標準。python

咱們本着二八原則，掌握好經常使用的，有用的~能讓咱們更快的上手~~~app

1 聲明變量const let var

ES6之前 var關鍵字來聲明變量，不管聲明在何處都存在變量提高這個事情~~會提早建立變量~ide

做用域也只有全局做用域以及函數做用域~ 因此變量會提高在函數頂部或全局做用域頂部~函數

let 關鍵字表示變量，const 表示常量。都是塊級做用域，好比一個函數內部，代碼塊{}內部~post

    // 全局變量的提高
    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 = "隨意"
    // 報錯

var let const

2 模板字符串

ES6引入了反引號``, 來看看它的神奇之處吧~~~this

<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。spa

最直觀的三個特色3d

　　-- 不須要function關鍵字來建立函數code

　　-- 省略return關鍵字對象

　　-- 繼承當前上下文的this關鍵字（由於箭頭函數的調用者是當前上下文，跟普通函數區別開）

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

箭頭函數

// 函數在哪裏調用了 才決定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();

上下文的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

~~其實ES6的特性遠不止於此，有興趣的能夠本身查看文檔~~

~~ 待更新~~~