如何使用ES6簡化代碼

小編給大家分享一下如何使用ES6簡化代碼，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

使用 ES6 簡化代碼

ES6 已經(jīng)發(fā)展很多年了，兼容性也已經(jīng)很好了。恰當(dāng)?shù)厥褂?，可以讓代碼更加地簡潔優(yōu)雅。

(1)使用箭頭函數(shù)取代小函數(shù)

有很多使用小函數(shù)的場景，如果寫個 function，代碼起碼得寫 3 行，但是用箭頭函數(shù)一行就搞定了，例如實(shí)現(xiàn)數(shù)組從大到小排序：

var nums = [4, 8, 1, 9, 0]; nums.sort(function(a, b){     return b - a; }); //輸出[9, 8, 4, 1, 0]

如果用箭頭函數(shù)，排序只要一行就搞定了：

var nums = [4, 8, 1, 9, 0];``nums.sort(a, b => b - a);

代碼看起來簡潔多了，還有 setTimeout 里面經(jīng)常會遇到只要執(zhí)行一行代碼就好了，寫個 function  總感覺有點(diǎn)麻煩，用字符串的方式又不太好，所以這種情況用箭頭函數(shù)也很方便：

setTimeout(() => console.log("hi"), 3000)

箭頭函數(shù)在 C++/Java 等其它語言里面叫做 Lambda 表達(dá)式，Ruby 比較早就有這種語法形式了，后來 C++/Java  也實(shí)現(xiàn)了這種語法。當(dāng)然箭頭函數(shù)或者 Lambda 表達(dá)式不僅適用于這種一行的，多行代碼也可以，不過在一行的時候它的優(yōu)點(diǎn)才比較明顯。

(2)使用 ES6 的 class

雖然 ES6 的 class 和使用 function 的 prototype 本質(zhì)上是一樣的，都是用的原型。但是用 class  可以減少代碼量，同時讓代碼看起來更加地高大上，使用 function 要寫這么多：

function Person(name, age){     this.name = name;     this.age = age; }  Person.prototype.addAge = function(){     this.age++; };  Person.prototype.setName = function(name){     this.name = name; };

使用 class 代碼看加地簡潔易懂：

class Person{     constructor(name, age){         this.name = name;         this.age = age;     }     addAge(){         this.age++;     }     setName(name){         this.name = name;     } }

并且 class 還可以很方便地實(shí)現(xiàn)繼承、靜態(tài)的成員函數(shù)，就不需要自己再去通過一些技巧去實(shí)現(xiàn)了。

(3)字符串拼接

以前要用+號拼接：

var tpl =     '<div>' +     '    <span>1</span>' +     '</div>';

現(xiàn)在只要用兩個反引號“`”就可以了：

var tpl = `   <div>         <span>1</span>     </div> `;

另外反引號還支持占位替換，原本你需要：

var page = 5,     type = encodeURIComponet("#js"); var url = "/list?page=" + page + "&type=" + type;

現(xiàn)在只需要：

var url = `/list?page=${page}&type=${type}`;

就不用使用+號把字符串拆散了。

(4)塊級作用域變量

塊級作用域變量也是 ES6 的一個特色，下面的代碼是一個任務(wù)隊列的模型抽象：

var tasks = []; for(var i = 0; i < 4; i++){     tasks.push(function(){         console.log("i is " + i);     }); } for(var j = 0; j < tasks.length; j++){     tasks[j](); }

但是上面代碼的執(zhí)行輸出是 4，4，4，4，并且不是想要輸出：0，1，2，3，所以每個 task 就不能取到它的 index 了，這是因為閉包都是用的同一個  i 變量，i 已經(jīng)變成 4 了，所以執(zhí)行閉包的時候就都是 4 了。那怎么辦呢?可以這樣解決：

var tasks = []; for(var i = 0; i < 4; i++){     !function(k){         tasks.push(function(){             console.log("i is " + k);         });     }(i); } for(var j = 0; j < tasks.length; j++){     tasks[j](); }

把 i 賦值給了 k，由于 k 它是一個 function 的一個參數(shù)，每次執(zhí)行函數(shù)的時候，肯定會實(shí)例化新的 k，所以每次的 k  都是不同的變量，這樣就輸出就正常了。但是代碼看起來有點(diǎn)別扭，如果用 ES6，只要把 var 改成 let 就可以了：

var tasks = []; for(let i = 0; i <= 4; i++){     tasks.push(function(){         console.log("i is " + i);     }); } for(var j = 0; j < tasks.length; j++){     tasks[j](); }

只改動了 3 個字符就達(dá)到了目的。因為 for 循環(huán)里面有個大括號，大括號就是一個獨(dú)立的作用域，let  定義的變量在獨(dú)立的作用域里面它的值也是獨(dú)立的。當(dāng)然即使沒寫大括號 for 循環(huán)執(zhí)行也是獨(dú)立的。除了以上幾點(diǎn)，ES6 還有其它一些比較好用的功能，如 Object的 assign，Promise 等，也是可以幫助寫出簡潔高效的代碼。

以上是“如何使用ES6簡化代碼”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！