JS 的 ES6版本已經被各大瀏覽器廣泛支持，很多前端框架也已經使用 ES6，并且還有 Babel 可以做兼容處理，所以ES6已經進入了應用階段
如果您對 ES6 還不太熟悉，下面4個簡單的基礎用法可以幫助您快速了解ES6
1.使用 let 和 const 聲明變量
在傳統的 ES5 代碼中，變量的聲明有兩個主要問題
（1）缺少塊兒作用域的支持
（2）不能聲明常量
ES6中，這兩個問題被解決了，增加了兩個新的關鍵字：let 和 const
塊兒作用域使用 let
var a = 1;if (true) { var b = 2;}console.log(a); // 1console.log(b); // 2ES5 中 if 塊兒內聲明的變量 b 可以在塊兒外訪問
// in ES6let a = 1;if (true) { let b = 2;}console.log(a); // 1console.log(b); // ReferenceError: b is not definedES6 中 if 塊兒內使用 let 聲明的變量 b 不能在塊兒外訪問
下面這段代碼是常見的一個比較迷惑人的情況
var a = [];for (var i=0; i< 5; i++) { a.push(function() { console.log(i); });}a.forEach(function(value) { value();});運行結果是：5, 5, 5, 5, 5
使用 let 聲明循環中的變量 i
var b = []; for ( let i=0; i< 5; i++) { b.push(function() { console.log(i); });}b.forEach(function(value) { value();});運行結果是：0, 1, 2, 3, 4
定義常量使用 const
// in ES5var MY_CONSTANT = true;MY_CONSTANT = false;
ES5 中不能定義常量，值可以被改，只能靠我們自己來保證
// in ES6const MY_CONSTANT = true;MY_CONSTANT = false; // Uncaught TypeError: Assignment to constant variable
ES6 中使用 const 聲明的常量是不可以被改的
2.模板字符串
下面這種字符串與變量的拼接方式是比較常見的
var url = ‘http://www.' + domain + ‘.com/' + path + ‘?' + queryParams;
ES6 提供了簡潔的用法
let url = `http://www.${domain}.com/${path}?${queryParams}`;
3.新的 Set 和 Map 對象
ES5 中我們經常使用數組來存儲動態數據，例如
var collection = [];collection.push(1, 2, 1);console.log(collection); // [ 1, 2, 1]
其中包含了重復數據，如果不想有重復數據，需要使用代碼判斷
function addToCollection(collection, value) { if (collection.indexOf(value) < 0) { collection.push(value) }}ES6 提供了 Set 對象，處理這個情況就方便多了
let collection = new Set();collection.add(1);collection.add(2);collection.add(1);console.log(collection); // Set {1, 2}Set 還可以方便的遍歷集合，和處理集合中的數據
ES5 中通常使用 object 來存儲鍵值對數據，例如
var collection = {};collection.a = ‘abc';collection.b = ‘xyz';ES6 有了 Map，就可以這樣使用
let collection = new Map();collection.set(‘a', ‘abc');collection.set(‘b', ‘xyz');
遍歷也很簡單
collection.forEach(function(value, key) { console.log(key + ":" + value);});console.log(collection.size);4.函數參數
ES6 中函數的參數有兩個新特性
默認值
function doSomething(someObject) { console.log(someObject);}這里有可能會出現運行時錯誤，需要驗證參數
function doSomething(someObject) { if (someObject === undefined) { someObject = {}; } console.log(someObject);}這類的驗證代碼非常普遍，ES6 中可以給參數設置默認值，就簡單了很多
function doSomething(someObject = {}) { console.log(someObject);}對象解構
我們常會把一個包含鍵值對的對象做為參數傳給某個函數，然后在函數內獲取對象的各個屬性
function doSomething(someObject) { var one = someObject.propOne; console.log(one); var two = someObject.propTwo; console.log(two); var three = someObject.propThree; console.log(three);}ES6 可以讓我們直接在參數中解構對象參數
function doSomething({ propOne, propTwo, propThree }) { console.log(propOne); console.log(propTwo); console.log(propThree);}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
