簡單談談ES6的六個小特性
前言
本文主要針對ES6做一個簡要介紹,也許你還不知道ES6是什么, 實際上, 它是一種新的JavaScript規(guī)范。在這個大家都很忙碌的時代,如果你想對ES6有一個快速的了解,那么請繼續(xù)往下讀,去了解當今最流行的編程語言JavaScript最新一代的六大特性。
過去一年ES6帶來了十足的進步,下面是6個我最喜歡的JS新增特性。
一、Object[key]
有時候不能在對象變量聲明時設置所有的key/value,所以得再聲明之后添加key/value。
let myKey = 'key3'; let obj = { key1: 'One', key2: 'Two' }; obj[myKey] = 'Three';
往好的說這有點不方便,往壞的說這種方式令人疑惑而且有點丑陋。
ES6提供給開發(fā)者一種更優(yōu)雅的方式:
let myKey = 'variableKey'; let obj = { key1: 'One', key2: 'Two', [myKey]: 'Three' /* yay! */ };
開發(fā)者可以使用[]包裹變量從而使用一條語句完成所有的功能。
二、Arrow Functions
你不需要跟上ES6的所有改變,箭頭函數(shù)已經(jīng)是許多討論的話題并且也給JS開發(fā)者帶來了一些困惑。即使我可以寫很多博文來說箭頭函數(shù)的特點,但是我想指出箭頭函數(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);
無functions和return關鍵詞,有時甚至不需要添加(),箭頭函數(shù)為寫函數(shù)提供了一種簡短的代碼書寫方式。
三、find/findIndex
JS為開發(fā)者提供了Array.prototype.indexOf方法來獲取數(shù)組中的指定元素下標,但是indexOf并沒有提供一個根據(jù)判斷條件來獲取指定元素的方法,find和findIndex兩個方法提供了取出第一個滿足計算條件的元素和下標。
let age = [12,19,6,4]; let firstAdult = ages.find(age => age >= 18); // 19 let firstAdultIndex = ages.findIndex(age => age >= 19); // 1
四、...擴展修飾符
擴展修飾符表示數(shù)組和可迭代對象在調(diào)用的時候應該拆分成單個參數(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];
這個特定的另一個紅利可以把可迭代對象(NodeList、arguments)變成真的數(shù)組,以前我們經(jīng)常使用Array.from或其他方法實現(xiàn)的。
五、Template Literals
JS里多行字符起初通過+和```來完成的,但是都很難維護。許多開發(fā)者甚至一些框架使用<script>標簽來容納模板,然后使用DOM方法的outerHTML```來獲取HTML字符。
ES6提供了Template Literals使用反引號來容易的創(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ù)提供默認值在服務端語言已經(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個特性就是ES6提供給開發(fā)者,當然還有許多特性。
總結
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
- ES6中非常實用的新特性介紹
- JavaScript ES6的新特性使用新方法定義Class
- JavaScript中的Reflect對象詳解(ES6新特性)
- 深入淺出ES6新特性之函數(shù)默認參數(shù)和箭頭函數(shù)
- ES6新特性之Symbol類型用法分析
- ES6(ECMAScript 6)新特性之模板字符串用法分析
- ES6新特性之變量和字符串用法示例
- ES6新特性之模塊Module用法詳解
- ES6新特性之字符串的擴展實例分析
- ES6新特性二:Iterator(遍歷器)和for-of循環(huán)詳解
- ES6新特性六:promise對象實例詳解
- ES6新特性七:數(shù)組的擴充詳解
- ES6新特性八:async函數(shù)用法實例詳解
- ES6新特性之類(Class)和繼承(Extends)相關概念與用法分析
- 讓微信小程序支持ES6中Promise特性的方法詳解
- ES6新特性:使用export和import實現(xiàn)模塊化詳解
- es6新特性之 class 基本用法解析
- ES6 13個新特性總結