六個小而美的 ES6 特性

1. 設置對象變量鍵值的語法

JavaScript開發者的煩惱之一是不能在對象字面量裏設置變量鍵值——必須要在初始化後對象後增加變量鍵/值：

// *Very* reduced example
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! */
};

加上一層 []，程序員們就可以在一條對象字面量定義語句就做完所有的事情。

2. 箭頭函數

箭頭函數最大的方便之處是如何壓縮簡單函數的代碼量：

// 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);

不用寫 function和 return這兩個關鍵詞，有時候甚至不需要寫 ()，箭頭函數是簡單函數非常好的一個快捷寫法。

3. find/findIndex

JavaScript提供了 Array.prototype.indexOf 法，用來獲取一個元素在數組中的索引，但是 indexOf 法不能計算目標元素的查找條件。有時候你還會想獲取滿足查找條件的那個元素本身。輸入 find和 findIndex吧——這兩個方法可以在一個數組搜索出第一個滿足條件的值。

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

find和 findIndex允許搜索一個計算後的值，也防止了一些不必要的副作用和循環產生的不確定值

4. 擴展運算符： …

擴展運算符表示一個數組或者一個可迭代的對象可以在一次調用中將它們的內容分割爲獨立的參數。比如：

// 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('div')];
// Convert Arguments to Array
let argsArray = [...arguments];

這個神奇的運算符帶來的附加好處是能夠把可迭代對象（ NodeList, arguments等等）轉化爲真正的數組——一直以來我們都用 Array.from 或其它的hack方法。

5. 模板字符串

ES6給我們提供了模板字符串，你可以用它和重音符一起輕鬆的寫多行字符串。

// Multiline String
let myString = `Hello
I'm a new line`; // No error!
// Basic interpolation
let obj = { x: 1, y: 2 };
console.log(`Your total is: ${obj.x + obj.y}`); // Your total is: 3

這個神奇的運算符帶來的附加好處是能夠把可迭代對象（ NodeList, arguments等等）轉化爲真正的數組——一直以來我們都用 Array.from 或其它的hack方法。

6. 默認參數值

許多服務端語言可以在函數聲明中定義默認參數值，比如python和PHP，現在JavaScript也可以了。

// Basic usage
function greet(name = 'Anon') {
  console.log(`Hello ${name}!`);
}
greet(); // Hello Anon!
// You can have a function too!
function greet(name = 'Anon', callback = function(){}) {
  console.log(`Hello ${name}!`);
  // No more "callback && callback()" (no conditional)
  callback();
}
// Only set a default for one parameter
function greet(name, callback = function(){}) {}

如果沒有傳遞無默認值的參數，其它的語言可能會報錯，但是JavaScript會將它們設爲 undefined。

這六個特性只是ES6中的滄海一粟，卻是我們會不假思索的、頻繁使用的特性。這些微小的新特性往往得不到人們的關注，卻是代碼中的核心部分。

原文：https://davidwalsh.name/es6-features