web前端分享JS有哪些很牛的語法系列二,，JS這個(gè)語言好是好,，但是很多時(shí)候?qū)懫饋硖罅耍看慰创笈５拇a的時(shí)候,，媽媽都問我為什么跪著讀代碼,，隨著 ES 2015的普及我們可以寫出很多可讀性強(qiáng)且漂亮的代碼，那么接下來就帶著大家一塊學(xué)習(xí)一下可以把JS寫漂亮的 “很牛” 語法,。

　　在組織面向?qū)ο蟠a的時(shí)候我們通常使用的語法是 :

　　function Swiper(){

　　}

　　原型編程時(shí)我們往往會(huì)因?yàn)檎Z言的無奈寫成這樣的 :

　　Swiper.prototype.init = function (){}

　　Swiper.prototype.render = function(){}

　　...

　　這樣寫丑陋且麻煩,，那么如何讓我們的代碼變得更漂亮，更好用那,？對(duì)于JS有一定了解的童鞋可能會(huì)這么寫,，兼容性良好且可以節(jié)省大量的代碼。

　　Swiper.prototype = {

　　constructor : Swiper,

　　init : function(){

　　},

　　render:function(){

　　}

　　....

　　}

　　這樣組織看起來工整一點(diǎn)但是還會(huì)存在不少莫名其妙的屬性constructor是個(gè)啥,，好像沒啥用啊,，那么如果我們?cè)陧?xiàng)目中加入了類似jQuery 這樣的類庫，我們的代碼就可以變得更加簡練,，類似于這樣

　　$.extend(Swiper.prototype,{

　　init : function(){

　　},

　　render:function(){

　　}

　　})

　　但是受限于語法,，沒法讓方法看起來很很清爽，而且要引入一個(gè)龐大的類庫,，那么我們?cè)陧?xiàng)目構(gòu)建時(shí)使用babel這樣的編譯工具,，我們可以寫成

　　Object.assign(Swiper.prototype,{

　　Init(){

　　},

　　render(){

　　}

　　})

　　現(xiàn)在你的代碼可以無需任何類庫，變得漂亮,，優(yōu)雅,。甚至無需使用class關(guān)鍵字就可以讓我們的代碼變得清晰、耐看,，有逼格,。

　　說完了面向?qū)ο筮@個(gè)大事再跟大家普及兩個(gè)極其方便的ES6新特性,。

　　一行式數(shù)組去重:

　　var arr = [1,1,2,3,2,3,4,5,6,7]

　　arr = Array.from(new Set(arr));

　　ok數(shù)組去重完畢，不再用一大堆邏輯代碼處理數(shù)組中的重復(fù),，不可謂不”很?！?/p>

　　讓我們的HTMLCollection 可以使用forEach ， map ,，filer... 等遍歷屬性 :

　　當(dāng)我們選擇一組元素想要遍歷的時(shí)候我們?cè)?/span>es5中往往需要非常惡心的for循環(huán)語法:

　　例如 :

　　var domlist = document.querySelector(“.list”);

　　我們需要使用非常...的for 循環(huán)

　　for( var i = 0 ; i < domlist.lenght ; i++){

　　domlist[i].....

　　}

　　如何讓這段代碼變得優(yōu)雅那 ,？

　　domlist = Array.from(domlist)

　　domlist.forEach( dom =>{

　　dom....

　　})

　　怎么樣，是不是代碼上了一個(gè)臺(tái)階的趕腳,。

　　好了,，今天的“很牛”語法就暫時(shí)說到這里，各位小伙伴,，我們下期見,。