ES6入門，看這篇就夠了

lewinlee 發(fā)布于2019-08-20 15:48 / 1762人閱讀

摘要：從入門到放棄是什么，黑歷史，不講，自己百度去。類你沒(méi)有看錯(cuò)，這里面的就沒(méi)有問(wèn)題的。之前我們用過(guò)，和有了，再也不用這兩個(gè)貨了。一個(gè)函數(shù)，可以遍歷狀態(tài)感覺(jué)就是狀態(tài)機(jī)，好吧不說(shuō)了再說(shuō)就懵逼了。

ES6從入門到放棄 1.ES6是什么，黑歷史，不講，自己百度去。 2.在瀏覽器中如何使用？ 1.babel babeljs.io在線編譯 2.traceur-----Google出的編譯器，把ES6編譯成ES5

traceur 編譯

bootsrap 引導(dǎo)程序，和我們理解的bootstrap css那個(gè)框架沒(méi)有半毛錢關(guān)系。

3.es6新功能 1.定義變量

let 替代var 擁有塊級(jí)作用域。

2.const

定義常量常量不可以修改，如果修改會(huì)報(bào)錯(cuò)

3.字符串連接

ES6管它叫模板引擎，其實(shí)就是字符串連接這個(gè)破玩意。

用鍵盤1左邊那個(gè)鍵,反引號(hào)。

var str =    "帥";//注意這里是正常雙引號(hào)
var str2 = `你們從我臉上看到了什么${str},難道不是么？`;

4.解構(gòu)賦值

var [a,b,c] = [12,5,8];

console.log(a,b,c);//12,5,8 是不是很簡(jiǎn)潔？

5.ES6新技巧 a)復(fù)制數(shù)組

arr2.from(arr)//再也不用用循環(huán)了，吼吼，還可不可以更性感一點(diǎn)

arr2 = [...arr]//簡(jiǎn)直是bug級(jí)別的用法，不過(guò)真心簡(jiǎn)單

b)for of循環(huán) c)map 、delete 6.箭頭函數(shù) 重點(diǎn)，angular 2.x用的不少。

/*function show(a){
return a;
}
var s=show(12);
alert(s);*/

var show=(a,b)=>a+b;

var s=show(12,5);

相當(dāng)簡(jiǎn)單。

([param] [, param]) => {
   statements
}
param => expression

解釋：

param 是參數(shù)，根據(jù)參數(shù)個(gè)數(shù)不同，分這幾種情況：
() => { … } // 零個(gè)參數(shù)用 () 表示
x => { … } // 一個(gè)參數(shù)可以省略 ()
(x, y) => { … } // 多參數(shù)不能省略 ()

7.更簡(jiǎn)潔的對(duì)象語(yǔ)法

var name="abb";
var age=101;
var preson={
    name,
    age,
    showName(){
        return this.name;
    },
    showAge(){
        return this.age;
    }
};
alert(preson.showName());

你沒(méi)有看錯(cuò)，bug一樣的語(yǔ)法。

8.重中之重，不懂這個(gè)你徹底懵逼，完全看不懂a(chǎn)ngular2.x在干啥。類。

類，真特么累，一個(gè)語(yǔ)法糖，廢柴，然而你還得懂。

class Person{ //類
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    showName(){
        return this.name;
    }
    showAge(){
        return this.age;
    }
}

var p1=new Person("aaa",10);

alert(p1.showName());

你沒(méi)有看錯(cuò)，這里面的this就沒(méi)有問(wèn)題的。玩類，不得不說(shuō)的一個(gè)東西就是繼承，這里得感謝ES6，我們?cè)僖膊挥?/p>

apply 和 constructor 混合的方式繼承了，太特么惡心了，直接用extend,鼓掌，送火箭。

class Person{ //類
    constructor(name="default",age=0){
        this.name=name;
        this.age=age;
      }
    showName(){
        return this.name;
    }
    showAge(){
        return this.age;
    }
}

//繼承
class Worker extends Person{
    constructor(name,age,job="掃地的"){
        super(name,age);
        this.job=job;
    }
    showJob(){
        return this.job;
    }
}

早特么應(yīng)該這么玩，話說(shuō)吐槽一下，敢不敢把construtor這么丑逼的東西給我換成真正的構(gòu)造函數(shù)？

再說(shuō)一個(gè)模塊化，前方高能，必須必須必須會(huì)！！否則你載angular2.x中連代碼你都組織不起來(lái)，不知道你往哪里寫。

之前我們用過(guò)seajs，和require,有了ES6，再也不用這兩個(gè)貨了。

定義模塊

const a = 12;
export a;

再來(lái)一個(gè)angular2.x中的例子

class hero{
    //屬性
      xxxx
      //方法
}

exports hero;

怎么使用？

import modA from "./a.js";
import modB from "./b.js";

console.log(modA+modB);

9.promise

如果你想玩一些新的庫(kù)，肯定離不開(kāi)數(shù)據(jù)交互，外面炒的很火。

就是一個(gè)對(duì)象，用來(lái)傳遞異步操作的數(shù)據(jù)(消息)

pending（等待、處理中）—> Resolve(完成、fullFilled)
              —> Rejected(拒絕、失敗)

使用：

var p1=new Promise(function(resolve,reject){
    //resolve  成功了
    //reject    失敗了
        });

var p1=new Promise(function(resolve,reject){
    if(異步處理成功了){
        resolve(成功數(shù)據(jù))
    }else{
        reject(失敗原因)
    }
        });

p1.then(成功(resolve),失敗(reject))    √
--------------------------------------------
p1.catch——用來(lái)捕獲錯(cuò)誤

10.生成器Gennerator.

看起來(lái)挺懸，其實(shí)就是那么回事兒，我們看看是什么鬼。

一個(gè)函數(shù)，可以遍歷狀態(tài),感覺(jué)就是狀態(tài)機(jī)，好吧不說(shuō)了再說(shuō)就懵逼了。

語(yǔ)法：

function *show(){

}

注意：

a)函數(shù)名字前有星號(hào) b)內(nèi)部用yield c）next執(zhí)行下一個(gè)狀態(tài)

function* show(){
     yield "Hello";
     yield "World";
     yield "Es6";
     return "well";
}

var res=show();
console.log(res.next()); //{value:"Hello", done:false}
console.log(res.next()); //{value:"World", done:false}
console.log(res.next()); //{value:"Es5", done:false}
console.log(res.next()); //{value:"well", done:true}

ES6基本上會(huì)這么多就可以了，剩下的時(shí)間就可以去泡妹子了,JS大法好，收工！