前言
本文主要針對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 totallet calculateTotal = total => total * 1.1;calculateTotal(10) // 11// Cancel an event -- another tiny tasklet 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); // 19let firstAdultIndex = ages.findIndex(age => age >= 19); // 1
四、...擴展修飾符
擴展修飾符表示數組和可迭代對象在調用的時候應該拆分成單個參數：
// Pass to function that expects separate multiple arguments// Much like Function.prototype.apply() doeslet numbers = [9, 4, 7, 1];Math.min(...numbers); // 1// Convert NodeList to Arraylet divsArray = [...document.querySelectorAll('div')];// Convert Arguments to Arraylet argsArray = [...arguments];這個特定的另一個紅利可以把可迭代對象（NodeList、arguments）變成真的數組，以前我們經常使用Array.from或其他方法實現的。
五、Template Literals
JS里多行字符起初通過+和```來完成的，但是都很難維護。許多開發者甚至一些框架使用<script>標簽來容納模板，然后使用DOM方法的outerHTML```來獲取HTML字符。
ES6提供了Template Literals使用反引號來容易的創建多行字符串：
// Multiline Stringlet myString = `HelloI'm a new line`;//Basic interpolationslet obj = {x:1,y:2};console.log(`Your total is: ${obj.x + obj.y}`); // Your total is 3六、Default Argument Values
為函數參數提供默認值在服務端語言已經提供（python、php），現在JS也有此能力：
//Basic usagefunction great( name = 'Anon' ){ console.log(`Hello ${name}`);}great(); // 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 parameterfunction greet(name, callback = function(){}) {}以上列出的6個特性就是ES6提供給開發者，當然還有許多特性。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
