JavaScript社區(qū)中的每個(gè)人都喜歡新的API，語法更新和功能-它們提供了更好，更智能，更有效的方式來完成重要任務(wù)。ES6帶來了大量新產(chǎn)品，并且瀏覽器供應(yīng)商在過去的一年中一直在努力將這些語言更新引入他們的瀏覽器。盡管有重大更新，但一些較小的語言更新卻令我大笑。以下是JavaScript語言中我最喜歡的六個(gè)新增功能！

1.對(duì)象[鍵]設(shè)置語法

JavaScript開發(fā)人員長期以來的一個(gè)煩惱就是無法在對(duì)象文字聲明中設(shè)置變量鍵的值-您必須在原始聲明后添加鍵/值：

// *Very* reduced example
let myKey = 'key3';
let obj = {
    key1: 'One',
    key2: 'Two'
};
obj[myKey] = 'Three';

這種模式充其量是不便的，而在最壞的情況下它是令人困惑和丑陋的。ES6為開發(fā)人員提供了擺脫這種混亂的方法：

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

2.箭頭功能

您無需緊跟ES6的每一次更改就可以了解箭頭功能-它們一直是JavaScript開發(fā)人員大量討論和混淆的源泉（至少在最初是這樣）。雖然我可以寫許多博客文章來解釋arrow函數(shù)的每個(gè)方面，但我想指出arrow函數(shù)如何為簡單函數(shù)的壓縮代碼提供一種方法：

// 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 關(guān)鍵字，有時(shí)甚至不需要添加()-箭頭功能是簡單功能的絕佳編碼捷徑。

3.查找/查找索引

JavaScript使開發(fā)人員 Array.prototype.indexOf 可以獲取數(shù)組中給定項(xiàng)目的索引，但indexOf 沒有提供計(jì)算所需項(xiàng)目條件的方法；您還需要搜索確切的已知值。輸入find 和findIndex -用于在數(shù)組中搜索計(jì)算值的第一個(gè)匹配項(xiàng)的兩種方法：

let ages = [12, 19, 6, 4];

let firstAdult = ages.find(age => age >= 18); // 19
let firstAdultIndex = ages.findIndex(age => age >= 18); // 1

find 并且findIndex，通過允許搜索計(jì)算值，還可以防止不必要的副作用和遍歷所有 可能的值！

4.點(diǎn)差運(yùn)算符

點(diǎn)差運(yùn)算符發(fā)出信號(hào)，表示數(shù)組或可迭代對(duì)象的內(nèi)容應(yīng)在調(diào)用內(nèi)拆分為單獨(dú)的參數(shù)。一些例子：

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

5.模板文字

JavaScript中的多行字符串最初是通過串聯(lián)或以 字符結(jié)尾的方式創(chuàng)建的，而 這兩種方法都很難維護(hù)。許多開發(fā)人員甚至某些框架開始濫用<script> 標(biāo)簽來封裝多行模板，其他開發(fā)人員實(shí)際上是使用DOM創(chuàng)建了元素，并用于 outerHTML 將元素HTML作為字符串獲取。

ES6為我們提供了模板文字，您可以使用反引號(hào)字符輕松創(chuàng)建多行字符串：

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

當(dāng)然，模板文字不僅僅可以讓您創(chuàng)建多行字符串，就像從簡單到高級(jí)的插值一樣，但是創(chuàng)建多行字符串的能力卻使我的臉上露出了微笑。

6.默認(rèn)參數(shù)值

在函數(shù)簽名中提供默認(rèn)參數(shù)值是許多服務(wù)器端語言（例如python和PHP）提供的功能，現(xiàn)在我們?cè)贘avaScript中具有該功能：

// 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(){}) {}

如果未提供沒有默認(rèn)值的參數(shù)，則其他語言可能會(huì)發(fā)出警告，但JavaScript會(huì)繼續(xù)將這些參數(shù)值設(shè)置為undefined。

我在這里列出的六個(gè)功能只是ES6為開發(fā)人員提供的功能中的一小部分，但是它們是我們經(jīng)常使用的功能，不會(huì)考慮任何東西。這些微小的添加通常不會(huì)引起注意，但卻成為我們編碼的核心。

我有什么遺漏嗎？讓我知道您喜歡JavaScript的哪些小附加功能！