如何使用ES6簡化代碼

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

使用 ES6 簡化代碼

ES6 已經發展很多年了，兼容性也已經很好了。恰當地使用，可以讓代碼更加地簡潔優雅。

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

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

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

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

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

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

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

箭頭函數在 C++/Java 等其它語言里面叫做 Lambda 表達式，Ruby 比較早就有這種語法形式了，后來 C++/Java  也實現了這種語法。當然箭頭函數或者 Lambda 表達式不僅適用于這種一行的，多行代碼也可以，不過在一行的時候它的優點才比較明顯。

(2)使用 ES6 的 class

雖然 ES6 的 class 和使用 function 的 prototype 本質上是一樣的，都是用的原型。但是用 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 還可以很方便地實現繼承、靜態的成員函數，就不需要自己再去通過一些技巧去實現了。

(3)字符串拼接

以前要用+號拼接：

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

現在只要用兩個反引號“`”就可以了：

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

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

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

現在只需要：

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

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

(4)塊級作用域變量

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

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

但是上面代碼的執行輸出是 4，4，4，4，并且不是想要輸出：0，1，2，3，所以每個 task 就不能取到它的 index 了，這是因為閉包都是用的同一個  i 變量，i 已經變成 4 了，所以執行閉包的時候就都是 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 的一個參數，每次執行函數的時候，肯定會實例化新的 k，所以每次的 k  都是不同的變量，這樣就輸出就正常了。但是代碼看起來有點別扭，如果用 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 個字符就達到了目的。因為 for 循環里面有個大括號，大括號就是一個獨立的作用域，let  定義的變量在獨立的作用域里面它的值也是獨立的。當然即使沒寫大括號 for 循環執行也是獨立的。除了以上幾點，ES6 還有其它一些比較好用的功能，如 Object的 assign，Promise 等，也是可以幫助寫出簡潔高效的代碼。

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