ES6入門，看這篇就夠了

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

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

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

traceur 編譯

bootsrap 引導(dǎo)程序，和我們理解的bootstrap css那個(gè)框架沒有半毛錢關(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 是不是很簡潔？

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

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

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

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)簡單。

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

解釋：

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

7.更簡潔的對(duì)象語法

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

你沒有看錯(cuò)，bug一樣的語法。

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

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

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

你沒有看錯(cuò)，這里面的this就沒有問題的。玩類，不得不說的一個(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)該這么玩，話說吐槽一下，敢不敢把construtor這么丑逼的東西給我換成真正的構(gòu)造函數(shù)？

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

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

定義模塊

const a = 12;
export a;

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

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

exports hero;

怎么使用？

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

console.log(modA+modB);

9.promise

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

就是一個(gè)對(duì)象，用來傳遞異步操作的數(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——用來捕獲錯(cuò)誤

10.生成器Gennerator.

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

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

語法：

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大法好，收工！

GPU云服務(wù)器云服務(wù)器篇就夠 ES6入門兒就夠看這

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82501.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

lewinlee

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow中的op

閱讀 2139·2023-04-26 02:41
MQTT協(xié)議介紹

閱讀 2171·2021-09-24 09:47
CSS系列——瀏覽器默認(rèn)樣式

閱讀 1577·2019-08-30 15:53
flex-item的flex-basis與width屬性有什么關(guān)系？

閱讀 1232·2019-08-30 13:01
DemoHouse

閱讀 1910·2019-08-29 11:27
如何檢測網(wǎng)站訪問者安裝了什么軟件

閱讀 2885·2019-08-28 17:55
關(guān)于拆分url返回key=value格式

閱讀 1805·2019-08-26 14:00
快速 TypeScript 化 lodash 中的 throttle & debounce

閱讀 3455·2019-08-26 10:18

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

ES6入門，看這篇就夠了

traceur 編譯

相關(guān)文章

JS正則表達(dá)式入門，看這篇就夠了

監(jiān)聽器入門看這篇就夠了

Lombok 看這篇就夠了

Python 3 入門，看這篇就夠了

你真的完全了解Java動(dòng)態(tài)代理嗎？看這篇就夠了

發(fā)表評(píng)論

0條評(píng)論

lewinlee

男|高級(jí)講師

TA的文章

tensorflow中的op

MQTT協(xié)議介紹

CSS系列——瀏覽器默認(rèn)樣式

flex-item的flex-basis與width屬性有什么關(guān)系？

DemoHouse

如何檢測網(wǎng)站訪問者安裝了什么軟件

關(guān)于拆分url返回key=value格式

快速 TypeScript 化 lodash 中的 throttle & debounce

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

ES6入門，看這篇就夠了

traceur 編譯

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

ES6入門，看這篇就夠了