六個小而美的ES6特性

DeaSwann 9年前發布 | 8K 次閱讀 JavaScript開發 ECMAScript

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/six-tiny-but-awesome-es6-features-1795.html

本文由用戶 DeaSwann 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1480330563378.html

JavaScript開發 ECMAScript