快捷導(dǎo)航

簡(jiǎn)單談?wù)凟S6的六個(gè)小特性

更新時(shí)間：2016年11月18日 14:57:47 作者：zhuxy

ES6（ECMAScript2015）的出現(xiàn)，無(wú)疑給前端開(kāi)發(fā)人員帶來(lái)了新的驚喜，它包含了一些很棒的新特性，可以更加方便的實(shí)現(xiàn)很多復(fù)雜的操作，提高開(kāi)發(fā)人員的效率。JS社區(qū)的每個(gè)人都喜歡新的API、語(yǔ)法以及一些簡(jiǎn)單、明了更高效的完成重要任務(wù)的新特性。下面來(lái)一起看看吧。

前言

本文主要針對(duì)ES6做一個(gè)簡(jiǎn)要介紹，也許你還不知道ES6是什么, 實(shí)際上, 它是一種新的JavaScript規(guī)范。在這個(gè)大家都很忙碌的時(shí)代，如果你想對(duì)ES6有一個(gè)快速的了解，那么請(qǐng)繼續(xù)往下讀，去了解當(dāng)今最流行的編程語(yǔ)言JavaScript最新一代的六大特性。

過(guò)去一年ES6帶來(lái)了十足的進(jìn)步，下面是6個(gè)我最喜歡的JS新增特性。

一、Object[key]

有時(shí)候不能在對(duì)象變量聲明時(shí)設(shè)置所有的key/value，所以得再聲明之后添加key/value。

let myKey = 'key3';
let obj = {
  key1: 'One',
  key2: 'Two'
};
obj[myKey] = 'Three';

往好的說(shuō)這有點(diǎn)不方便，往壞的說(shuō)這種方式令人疑惑而且有點(diǎn)丑陋。

ES6提供給開(kāi)發(fā)者一種更優(yōu)雅的方式：

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

開(kāi)發(fā)者可以使用[]包裹變量從而使用一條語(yǔ)句完成所有的功能。

二、Arrow Functions

你不需要跟上ES6的所有改變，箭頭函數(shù)已經(jīng)是許多討論的話題并且也給JS開(kāi)發(fā)者帶來(lái)了一些困惑。即使我可以寫(xiě)很多博文來(lái)說(shuō)箭頭函數(shù)的特點(diǎn)，但是我想指出箭頭函數(shù)是如何提供一個(gè)為簡(jiǎn)單函數(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);

無(wú)functions和return關(guān)鍵詞，有時(shí)甚至不需要添加()，箭頭函數(shù)為寫(xiě)函數(shù)提供了一種簡(jiǎn)短的代碼書(shū)寫(xiě)方式。

三、find/findIndex

JS為開(kāi)發(fā)者提供了Array.prototype.indexOf方法來(lái)獲取數(shù)組中的指定元素下標(biāo)，但是indexOf并沒(méi)有提供一個(gè)根據(jù)判斷條件來(lái)獲取指定元素的方法，find和findIndex兩個(gè)方法提供了取出第一個(gè)滿(mǎn)足計(jì)算條件的元素和下標(biāo)。

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

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

四、...擴(kuò)展修飾符

擴(kuò)展修飾符表示數(shù)組和可迭代對(duì)象在調(diào)用的時(shí)候應(yīng)該拆分成單個(gè)參數(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];

這個(gè)特定的另一個(gè)紅利可以把可迭代對(duì)象（NodeList、arguments）變成真的數(shù)組，以前我們經(jīng)常使用Array.from或其他方法實(shí)現(xiàn)的。

五、Template Literals

JS里多行字符起初通過(guò)+和```來(lái)完成的，但是都很難維護(hù)。許多開(kāi)發(fā)者甚至一些框架使用<script>標(biāo)簽來(lái)容納模板，然后使用DOM方法的outerHTML```來(lái)獲取HTML字符。

ES6提供了Template Literals使用反引號(hào)來(lái)容易的創(chuàng)建多行字符串：

// Multiline String
let myString = `Hello

I'm a new line`;

//Basic interpolations
let obj = {x:1,y:2};

console.log(`Your total is: ${obj.x + obj.y}`); // Your total is 3

六、Default Argument Values

為函數(shù)參數(shù)提供默認(rèn)值在服務(wù)端語(yǔ)言已經(jīng)提供（python、php），現(xiàn)在JS也有此能力：

//Basic usage

function 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 parameter
function greet(name, callback = function(){}) {}

以上列出的6個(gè)特性就是ES6提供給開(kāi)發(fā)者，當(dāng)然還有許多特性。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。

您可能感興趣的文章: