DIV CSS 佈局教程網

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); // 1
console.log(b); // 2

ES5 中 if 塊兒內聲明的變量 b 可以在塊兒外訪問

// in ES6
let a = 1;
if (true) {
  let b = 2;
}
console.log(a); // 1
console.log(b); // ReferenceError: b is not defined

ES6 中 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 ES5

var MY_CONSTANT = true;

MY_CONSTANT = false;

ES5 中不能定義常量，值可以被改，只能靠我們自己來保證

// in ES6
const 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);

}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。