簡單談談ES6的六個小特性

前言

本文主要針對ES6做一個簡要介紹，也許你還不知道ES6是什麼, 實際上, 它是一種新的JavaScript規範。在這個大家都很忙碌的時代，如果你想對ES6有一個快速的了解，那麼請繼續往下讀，去了解當今最流行的程式語言JavaScript最新一代的六大特性。

過去一年ES6帶來了十足的進步，以下是6個我最喜歡的JS新增特性。

一、Object[key]

有時候不能在物件變數宣告時設定所有的key/value，所以要再宣告之後加上key/value。

let myKey = 'key3';
let obj = {
  key1: 'One',
  key2: 'Two'
};
obj[myKey] = 'Three';

   

往好的說這有點不方便，往壞的說這種方式令人疑惑而且有點醜陋。

ES6提供給開發者一種更優雅的方式：

let myKey = 'variableKey';
let obj = {
  key1: 'One',
  key2: 'Two',
  [myKey]: 'Three' /* yay! */
};

   

開發者可以使用[]包裹變數從而使用一條語句完成所有的功能。

二、Arrow Functions

你不需要跟上ES6的所有改變，箭頭函數已經是許多討論的話題並且也給JS開發者帶來了一些困惑。即使我可以寫很多博文來說箭頭函數的特點，但是我想指出箭頭函數是如何提供一個為簡單函數壓縮程式碼的方法。

// Adds a 10% tax to total
let calculateTotal = total => total * 1.1;
calculateTotal(10) // 11
 
// Cancel an event -- another tiny task
let brickEvent = e => e.preventDefault();
document.querySelector('div').addEventListener('click', brickEvent);

   

無functions和return關鍵字，有時甚至不需要加上()，箭頭函數為寫函數提供了一個簡短的程式碼書寫方式。

三、find/findIndex

JS為開發者提供了Array.prototype.indexOf方法來取得陣列中的指定元素下標，但是indexOf並沒有提供一個根據判斷條件來取得指定元素的方法，find和findIndex兩個方法提供了取出第一個滿足計算條件的元素和下標。

let age = [12,19,6,4];
 
let firstAdult = ages.find(age => age >= 18); // 19
let firstAdultIndex = ages.findIndex(age => age >= 19); // 1

   

四、...擴展修飾符

擴展修飾符表示數組和可迭代對像在調用的時候應該拆分成單一參數：紅利可以把可迭代物件（NodeList、arguments）變成真的數組，以前我們常使用Array.from或其他方法實作的。

五、Template Literals

JS裡多行字符起初透過+和```來完成的，但是都很難維護。許多開發者甚至一些框架使用<script>標籤來容納模板，然後使用DOM方法的outerHTML```來取得HTML字元。 <p>ES6提供了Template Literals使用反引號來容易的創建多行字串：<p><pre class="brush:js;toolbar:false">// Pass to function that expects separate multiple arguments // Much like Function.prototype.apply() does let numbers = [9, 4, 7, 1]; Math.min(...numbers); // 1 // Convert NodeList to Array let divsArray = [...document.querySelectorAll(&amp;#39;div&amp;#39;)]; // Convert Arguments to Array let argsArray = [...arguments];</pre><br/>   <p><p>六、Default Argument Values<p><p>六、Default Argument Values<p><br/>六、Default Argument Values<p><p>為函數端為函數提供值），現在JS也有此能力：<pre class="brush:js;toolbar:false">// Multiline String let myString = `Hello I&amp;#39;m a new line`; //Basic interpolations let obj = {x:1,y:2}; console.log(`Your total is: ${obj.x + obj.y}`); // Your total is 3</pre><p>   <p><p>以上列出的6個特性就是ES6提供給開發者，當然還有許多特性。 <br/>🎜🎜</script>