六個小而美的 ES6 特性

阿新 • • 發佈：2018-11-11

六個小而美的 ES6 特性

JavaScript社群中的每個人都喜歡新API、新語法和新特性——可以更優雅，更智慧，更有效的完成重要任務。ES6帶來了很多好東西，並且在過去的一年裡,瀏覽器廠商們全力以赴的升級瀏覽器來使它們可用。儘管ES6中有一些大的更新，但是一些小升級也給了我巨大的驚喜。下面這些就是我最喜歡的六個JavaScript新特性。

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. 箭頭函式

不用瞭解ES6帶來的改變，你也早就知道箭頭函數了——它已經是許多話題的中心，給JavaScript程式設計師造成了一些困擾（至少在開始的時候是這樣的）。我可以寫出好幾篇部落格來解釋箭頭函式的方方面面，但是我最想告訴大家的是，箭頭函式是如何壓縮簡單函式的程式碼量的：

// 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. 模板字串

在JavaScript中，我們用連線符或者在一行字元的末尾增加 \來建立多行字串，這兩種方法都難以維護。許多開發者和框架都開始濫用標籤來封裝多行字串模板，其它的則通過DOM和 outerHTML來獲取元素的HTML作為一個字串。

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

當然，除了多行字串，模板字串還有其它的能力，比如說簡單或者高階的插值。不過，僅僅是優雅的寫多行字串這件事情，已經讓我十分欣慰了。

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中的滄海一粟，卻是我們會不假思索的、頻繁使用的特性。這些微小的新特性往往得不到人們的關注，卻是程式碼中的核心部分。

譯者：動靜若參商

譯文：http://www.zcfy.cc/article/1795

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

六個小而美的 ES6 特性